forked from overmind1980/lovestory
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
224 lines (202 loc) · 8.15 KB
/
index.html
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
220
221
222
223
224
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>我们的爱情故事</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
</style>
<link type="text/css" rel="stylesheet" href="css/default.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jscex.js"></script>
<script type="text/javascript" src="js/jscex-parser.js"></script>
<script type="text/javascript" src="js/jscex-jit.js"></script>
<script type="text/javascript" src="js/jscex-builderbase.js"></script>
<script type="text/javascript" src="js/jscex-async.js"></script>
<script type="text/javascript" src="js/jscex-async-powerpack.js"></script>
<script type="text/javascript" src="js/functions.js" charset="utf-8"></script>
<script type="text/javascript" src="js/love.min.js" charset="utf-8"></script>
</head>
<body>
<audio autoplay="autopaly">
<source src="iloveu.mp3"audio/mp3" />
</audio>
<div id="main">
<div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成 Chrome 14+/IE 9+/Firefox 7+/Safari 4+</div>
<div id="wrap">
<div id="text">
<div id="code">
<span class="say">我们的爱情故事</span><br>
<span class="say"> </span><br>
<span class="say">for Shao & Yee</a></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><br>
<span class="say"></span><br>
<span class="say">永远的</span><br>
<span class="say"></span><br>
<span class="say"><span class="space"></span>Shao & Yee</span>
</div>
</div>
<div id="clock-box">
Shao<span class="STYLE1"> & </span>Yee <span class="STYLE1">已经相爱了</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(2016, 1, 25); // 这里的月份要填写实际月份减1
together.setHours(22); //小时
together.setMinutes(0); //分钟
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>