love/index.html at master · ajmmd/love · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>❤梦里北极光❤爱你呦❤</title>
		<link type="text/css" rel="stylesheet" href="./renxi/default.css">
		<script type="text/javascript" src="./renxi/jquery.min.js"></script>
		<script type="text/javascript" src="./renxi/jscex.min.js"></script>
		<script type="text/javascript" src="./renxi/jscex-parser.js"></script>
		<script type="text/javascript" src="./renxi/jscex-jit.js"></script>
		<script type="text/javascript" src="./renxi/jscex-builderbase.min.js"></script>
		<script type="text/javascript" src="./renxi/jscex-async.min.js"></script>
		<script type="text/javascript" src="./renxi/jscex-async-powerpack.min.js"></script>
		<script type="text/javascript" src="./renxi/functions.js" charset="utf-8"></script>
		<script type="text/javascript" src="./renxi/love.js" charset="utf-8"></script>
		<style type="text/css"></style>
		<script>
			var str;
			str = prompt("请输入你的名字,有惊喜！");
			console.log(str);
			window.onload = function() {
				if (str != null && str !="") {
					//document.getElementById("ai").innerHTML=str;
					var all = document.getElementsByClassName("ai"); //返回的是数组
					for (var i = 0; i < all.length; i++) {
						all[i].innerHTML = str;
					}
				}
			}
		</script>
	</head>

	<body>
		<audio autoplay="autopaly" loop="loop">
	<source src="renxi.mp3" type="audio/mp3" /></audio>
		<div id="main">
			<div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>
			<div id="wrap">
				<div id="text">
					<div id="code">
						<font color="black" size="4"><b><i>
						<span class="say">不管你能否看的到，但是我还是要把这些心里话说出来！</span><br>
						<span class="say"> </span><br>
						<span class="say"><span class="ai" >对的人 </span>，昨天太近，明天太远。选在今日，对你告白！</span><br>
						<span class="say"> </span><br>
						<span class="say"> 对你的依赖，如同鱼儿离不开海洋，如同植物离不开阳光。</span><br>
						<span class="say"> </span><br>
						<span class="say">给我一次机会，写满我们的幸福人生。</span><br>
						<span class="say"> </span><br>
						<span class="say">睁开我的眼睛，我的眼里只有你！</span><br>
						<span class="say"> </span><br>
						<span class="say">闭上我的眼睛，我的眼里只有你！</span><br>
						<span class="say"> </span><br>
						<span class="say">带上眼镜，我的四个眼里只有你！</span><br>
						<span class="say"> </span><br>
						<span class="say"><span class="ai" >亲爱的 </span>，跟我走吧，我偷电动车养你！</span><br>
						<span class="say"></span><br>
						<span class="say">套路都是我学的，但爱你是真的！ </span><br>
						<span class="say"> </span><br>
						<span class="say"> -- 爱你的梦里北极光--</span>
						</i></b>
						</font>
					</div>
				</div>
				<div id="clock-box">
					<span><font color="#666666"><span class="ai" >亲爱的 </span>，我等你已经是</font></span>
					<div id="clock"></div>
				</div>
				<canvas id="canvas" width="1100" height="680"></canvas>
			</div>
		</div>
		<script>
			(function() {
				var canvas = $('#canvas');
				if (!canvas[0].getContext) {
					$("#error").show();
					return false;
				}
				var width = canvas.width();
				var height = canvas.height();
				canvas.attr("width", width);
				canvas.attr("height", height);
				var opts = {
					seed: {
						x: width / 2 - 20,
						color: "rgb(190, 26, 37)",
						scale: 2
					},
					branch: [
						[535, 680, 570, 250, 500, 200, 30, 100, [
							[540, 500, 455, 417, 340, 400, 13, 100, [
								[450, 435, 434, 430, 394, 395, 2, 40]
							]],
							[550, 445, 600, 356, 680, 345, 12, 100, [
								[578, 400, 648, 409, 661, 426, 3, 80]
							]],
							[539, 281, 537, 248, 534, 217, 3, 40],
							[546, 397, 413, 247, 328, 244, 9, 80, [
								[427, 286, 383, 253, 371, 205, 2, 40],
								[498, 345, 435, 315, 395, 330, 4, 60]
							]],
							[546, 357, 608, 252, 678, 221, 6, 100, [
								[590, 293, 646, 277, 648, 271, 2, 80]
							]]
						]]
					],
					bloom: {
						num: 700,
						width: 1080,
						height: 650,
					},
					footer: {
						width: 1200,
						height: 5,
						speed: 10,
					}
				};
				var tree = new Tree(canvas[0], width, height, opts);
				var seed = tree.seed;
				var foot = tree.footer;
				var hold = 1;
				canvas.click(function(e) {
					var offset = canvas.offset(),
						x, y;
					x = e.pageX - offset.left;
					y = e.pageY - offset.top;
					if (seed.hover(x, y)) {
						hold = 0;
						canvas.unbind("click");
						canvas.unbind("mousemove");
						canvas.removeClass('hand');
					}
				}).mousemove(function(e) {
					var offset = canvas.offset(),
						x, y;
					x = e.pageX - offset.left;
					y = e.pageY - offset.top;
					canvas.toggleClass('hand', seed.hover(x, y));
				});
				var seedAnimate = eval(Jscex.compile("async", function() {
					seed.draw();
					while (hold) {
						$await(Jscex.Async.sleep(10));
					}
					while (seed.canScale()) {
						seed.scale(0.95);
						$await(Jscex.Async.sleep(10));
					}
					while (seed.canMove()) {
						seed.move(0, 2);
						foot.draw();
						$await(Jscex.Async.sleep(10));
					}
				}));
				var growAnimate = eval(Jscex.compile("async", function() {
					do {
						tree.grow();
						$await(Jscex.Async.sleep(10));
					}
					while (tree.canGrow());
				}));
				var flowAnimate = eval(Jscex.compile("async", function() {
					do {
						tree.flower(2);
						$await(Jscex.Async.sleep(10));
					}
					while (tree.canFlower());
				}));
				var moveAnimate = eval(Jscex.compile("async", function() {
					tree.snapshot("p1", 240, 0, 610, 680);
					while (tree.move("p1", 500, 0)) {
						foot.draw();
						$await(Jscex.Async.sleep(10));
					}
					foot.draw();
					tree.snapshot("p2", 500, 0, 610, 680);
					canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
					canvas.css("background", "#ffe");
					$await(Jscex.Async.sleep(300));
					canvas.css("background", "none");
				}));
				var jumpAnimate = eval(Jscex.compile("async", function() {
					var ctx = tree.ctx;
					while (true) {
						tree.ctx.clearRect(0, 0, width, height);
						tree.jump();
						foot.draw();
						$await(Jscex.Async.sleep(25));
					}
				}));
				var textAnimate = eval(Jscex.compile("async", function() {
					var together = new Date();
					together.setFullYear(2015, (9 - 1), (2 - 1));
					together.setHours(9);
					together.setMinutes(00);
					together.setSeconds(0);
					together.setMilliseconds(0);
					$("#code").show().typewriter();
					$("#clock-box").fadeIn(500);
					while (true) {
						timeElapse(together);
						$await(Jscex.Async.sleep(1000));
					}
				}));
				var runAsync = eval(Jscex.compile("async", function() {
					$await(seedAnimate());
					$await(growAnimate());
					$await(flowAnimate());
					$await(moveAnimate());
					textAnimate().start();
					$await(jumpAnimate());
				}));
				runAsync().start();
			})();
		</script>
	</body>

</html>