抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

可能是下一次更新的内容

导航栏优化排版

修复小游戏Bug

优化友链页

博客更新日志及部分功能源码

2022-04-02

更新主题

把评论系统从Valine更换为Waline

2022-03-30

更改图标配色

配置文件themes\volantis\source\css_style_plugins\fontcolor.styl

2022-03-29

为文章添加了头图，白嫖Vercel当CDN

2021-10-20

历经千辛万苦后终于把Volantis版本升级到了5.0.0-alpha.5🥱🥳

2021-07-02

修复鼠标点击无法触发烟花特效的Bug

2021-06-05

新增解锁音乐
顺便把博客部署到了Netlify上

2021-05-16

新增天气

2021-05-13

在Vercel上部署了readme-stats,api地址👇
https://zryyyy-readme-stats.vercel.app/
Vercel永远滴神！！！！！
api api使用方法

2021-04-11

将部分资源链接替换为jsDelivr加速
添加Valine评论图片

2021-04-11

因为不好用没钱弃用Coding，转用Gitee
重构右键菜单

2021-03-26

fontawesome图标由Free改为Duotone
新增哔哔

2021-03-21

修复网站访问量统计

2021-03-14

增加NASA boarding pass
微调关于页面设计

2021-03-07

在Vercel上部署了博客
增加sitemap.xml

2021-02-07

更新主题版本4.2.0→4.3.1
新增疫情地图、小游戏
更改音乐源虾米→网抑云
调整页面内容与侧边栏布局
修复Valine
重写导航栏

2020-12-12

重新配置Volantis
新增鼠标指针特效,更新日志,GitHub Readme Stats
更改右键菜单
优化页面排版

2020-12-11

更新主题版本4.1.6→4.2.0

2020-11-15

更新Volantis没备份，一夜回到解放前😔

2020-04-12

改用主题Volantis
新增nest样式背景

2020-04-01

开始用主题Stun

2020-03-29

建立

部分功能实现代码

美化

1.线条背景：

layout.ejs

1
<script type="text/javascript" color="0,0,0" opacity="0.6" zindex="-400" count="399" src="https://gcore.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@latest/canvas-nest.min.js">  </script>

nest.js

1
!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();
2.鼠标点击烟花效果：

layout.ejs

1
2
<script async src="https://gcore.jsdelivr.net/gh/zryyyy/CDN@latest/js/fireworks.min.js"></script>
<script async src="/js/cursor/fireworks.js"></script>

fireworks.js

1
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
3.Valine评论框图片
source\css\_style\_plugins\valine.styl
1
2
3
4
5
6
7
8
9
10
11
12
 #veditor {
background-image: url(https://gcore.jsdelivr.net/gh/zryyyy/CDN/img/others/hj4.gif);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: rgba(255, 255, 255, 0);
resize: vertical
 }
 #veditor:focus{
background-position-y: 200px;
transition: all 0.2s ease-in-out 0s;
 }
博客美化参考资料

TRHX’s Blog https://www.itrhx.com/2018/08/27/A04-Hexo-blog-topic-personalization/

CodeHeap’s Blog https://jrbcode.gitee.io/posts/80095cae.html

Yearito’s Blog http://yearito.cn/posts/hexo-theme-beautify.html

小游戏

1.2048
查看源代码 
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2048游戏</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
div {
	border-radius:20%;
}
#marks {
	width:560px;
	height:50px;
	background:#ffefdb;
	margin:auto;
	line-height:50px;
	text-align:center;
}
#mark {
	width:580px;
	margin:30px auto;
	background:#2b2b2b;
	border-radius:10%;
}
#box {
	background:#ffefdb;
	width:560px;
	height:560px;
	margin:30px auto;
	border-radius:10%;
}
.bx {
	background:#EED5B7;
	width:100px;
	height:100px;
	margin:20px;
	float:left;
	text-align:center;
	line-height:100px;
	font-size:50px;
}
</style>
</head>
<body>
<div id="mark">
    <div id="marks">
        <p>当前分数是：<span id="mark1">0</span></p>
    </div>
    <div id="box">
        <div id="d1" class="bx"></div>
        <div id="d2" class="bx"></div>
        <div id="d3" class="bx"></div>
        <div id="d4" class="bx"></div>
        <div id="d5" class="bx"></div>
        <div id="d6" class="bx"></div>
        <div id="d7" class="bx"></div>
        <div id="d8" class="bx"></div>
        <div id="d9" class="bx"></div>
        <div id="d3" class="bx"></div>
        <div id="d4" class="bx"></div>
        <div id="d5" class="bx"></div>
        <div id="d6" class="bx"></div>
        <div id="d7" class="bx"></div>
        <div id="d8" class="bx"></div>
        <div id="d9" class="bx"></div>
    </div>
</div>

<script>
var a1 = [];
var a2 = [];
window.onload = function() {
    var num = Math.random() * 15 + 1;
    num = parseInt(num);
    var dx = document.getElementsByClassName("bx");
    dx[num].innerText = 2;
    score();

}
//添加数组相同剔除方法
Array.prototype.contains = function(needle) {
    for (i in this) {
        if (this[i] == needle) return false
    }
    return true;
}
//递归
function recur(dx, i, myX, myC, can) {
    if (dx[i].innerHTML != "") {
        if (can.contains(i)) {
            a1.push(i);
            if (dx[i + myX].innerHTML == "") { //为空赋值
                dx[i + myX].innerText = dx[i].innerHTML;
                dx[i].innerText = "";
                recur(dx, i + myX, myX, myC, can);
            } else {
                if (dx[i + myX].innerHTML == dx[i].innerHTML) { //值相同合并
                    dx[i + myX].innerText = parseInt(dx[i].innerHTML) * 2;
                    dx[i].innerText = "";
                } else {
                    a2.push(i);
                }
            }
        }

    }

}
//更换背景色
function score() {
    var dx = document.getElementsByClassName("bx");
    var ma = 0;
    for (var i = 0; i < dx.length; i++) {
        if (dx[i].innerHTML != "") {
            var bk = dx[i].innerHTML;
            ma = parseInt(bk) + parseInt(ma);
            switch (bk) {
                case "2":
                    dx[i].style.backgroundColor = "#c7c7c7";
                    dx[i].style.color = "#000000";
                    dx[i].style.fontSize = "50px";
                    break;
                case "4":
                    dx[i].style.backgroundColor = "#c7c7c7";
                    dx[i].style.color = "#000000";
                    dx[i].style.fontSize = "50px";
                    break;
                case "8":
                    dx[i].style.backgroundColor = "orange";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "50px";
                    break;
                case "16":
                    dx[i].style.backgroundColor = "orange";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "50px";
                    break;
                case "32":
                    dx[i].style.backgroundColor = "orange";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "50px";
                    break;
                case "64":
                    dx[i].style.backgroundColor = "orange";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "50px";
                    break;
                case "128":
                    dx[i].style.backgroundColor = "yellow";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "50px";
                    break;
                case "256":
                    dx[i].style.backgroundColor = "green";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "50px";
                    break;
                case "512":
                    dx[i].style.backgroundColor = "cyan";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "50px";
                    break;
                case "1024":
                    dx[i].style.backgroundColor = "darkblue";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "30px";
                    break;
                case "2048":
                    dx[i].style.backgroundColor = "#bf3eff";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "30px";
                    break;
                case "4096":
                    dx[i].style.backgroundColor = "#2b2b2b";
                    dx[i].style.color = "#FFFFFF";
                    dx[i].style.fontSize = "30px";
                    break;
            }
        } else {
            dx[i].style.backgroundColor = "#EED5B7";
            dx[i].style.color = "#000000";
            dx[i].style.fontSize = "50px";
        }
    }
    document.getElementById("mark1").innerText = ma;

}

//方向
function about(dx, myX, myC, can) {
    for (var i = 0; i < myC * myC; i++) {
        recur(dx, i, myX, myC, can);
    }
    //检查是否有遗漏
    for (var i = 0; i < myC; i++) {
        for (var j = 0; j < myC * myC; j++) {
            recur(dx, j, myX, myC, can);
        }
    }
    if (a1.length != a2.length) {
        var fuc = [];
        for (var j = 0; j < myC * myC; j++) {
            if (dx[j].innerHTML == "") {
                fuc.push(j);
            }
        }
        var index = Math.floor((Math.random() * fuc.length));
        dx[fuc[index]].innerText = 2;
        fuc.splice(0, fuc.length);
        a1.splice(0, a1.length);
        a2.splice(0, a2.length);
    }
    for (var i = 0; i < 4; i++) {
        score();
    }


}

//获取键盘键
document.onkeydown = function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    //向上
    if (e.keyCode == 87) {
        var dx = document.getElementsByClassName("bx");
        var can = [];
        var myT = 0;
        for (var i = 0; i < 4; i++) {
            can.push(myT);
            myT += 1;
        }
        about(dx, -4, 4, can);
    }
    //向下
    if (e.keyCode == 83) {
        var dx = document.getElementsByClassName("bx");
        var can = [];
        var myT = 12;
        for (var i = 0; i < 4; i++) {
            can.push(myT);
            myT += 1;
        }
        about(dx, 4, 4, can)
    }
    //向左
    if (e.keyCode == 65) {
        var dx = document.getElementsByClassName("bx");
        var can = [];
        var myT = 0;
        for (var i = 0; i < 4; i++) {
            can.push(myT);
            myT += 4;
        }
        about(dx, -1, 4, can)
    }
    //向右
    if (e.keyCode == 68) {
        var dx = document.getElementsByClassName("bx");
        var can = [];
        var myT = 3;
        for (var i = 0; i < 4; i++) {
            can.push(myT);
            myT += 4;
        }
        about(dx, 1, 4, can)
    }
    var dx = document.getElementsByClassName("bx");

}
</script>

</body>
</html>

2.打地鼠
查看源代码 
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打地鼠</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
html,body {
	height:100%;
}
body {
	background:#000;
	font-family:sans-serif;
}
.window {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#000;
	z-index:999;
	-webkit-transition:opacity 0.6s;
	transition:opacity 0.6s;
}
.window h1,.window h2,.window p {
	color:#fff;
	text-align:center;
}
.window h2 {
	margin-top:100px;
	margin-bottom:10px;
}
.window .meta {
	margin-top:50px;
	opacity:0.6;
}
.window h1 {
	line-height:50px;
}
.window .btn-group {
	margin:80px auto;
	width:100px;
	height:90px;
	overflow:hidden;
	position:relative;
}
.window .gopher {
	position:relative;
	top:6px;
	left:0;
	margin:0 auto;
}
.window label {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:40px;
	background:#51a70d;
	color:#fff;
	text-align:center;
	line-height:40px;
	cursor:pointer;
	border-bottom:4px solid #62b210;
	border-radius:4px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
#end {
	opacity:0;
	pointer-events:none;
	-webkit-pointer-events:none;
}
#startFlag {
	position:absolute;
	top:-10px;
	left:-10px;
}
#startFlag:checked + #start {
	opacity:0;
	pointer-events:none;
	-webkit-pointer-events:none;
}
#container {
	background:-webkit-linear-gradient(top,#8adcf7 0%,#bbe8fd 100%);
	background:linear-gradient(to bottom,#8adcf7 0%,#bbe8fd 100%);
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-300px;
	margin-top:-300px;
	width:600px;
	height:600px;
	border:1px solid #000;
	overflow:hidden;
}
#map {
	position:absolute;
	bottom:0;
	left:-600px;
	width:1800px;
	height:800px;
	-webkit-transform:perspective(600px) rotateX(45deg);
	transform:perspective(600px) rotateX(45deg);
	-webkit-transform-origin:center bottom;
	-ms-transform-origin:center bottom;
	transform-origin:center bottom;
}
.map {
	width:5%;
	height:100%;
	float:left;
}
.map:nth-child(even) {
	background:#62b210;
}
.map:nth-child(odd) {
	background:#51a70d;
}
.hole {
	position:absolute;
	left:0;
	top:70px;
	width:68px;
	height:100px;
	background-image:-webkit-linear-gradient(left,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);
	background-image:linear-gradient(to right,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);
	border-left:1px solid #236d22;
	box-shadow:0px 2px 5px 0px rgba(0,0,0,0.6);
}
.hole:before {
	display:block;
	content:'';
	position:absolute;
	width:84px;
	height:24px;
	margin-left:-8px;
	top:-24px;
	background-image:-webkit-linear-gradient(top,rgba(255,255,255,0) 1px,rgba(255,255,255,0.3) 2px,rgba(255,255,255,0.3) 3px,rgba(255,255,255,0) 4px),-webkit-linear-gradient(bottom,rgba(0,0,0,0.4) 3px,rgba(255,255,255,0.2) 5px,rgba(255,255,255,0) 6px),-webkit-linear-gradient(left,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);
	background-image:linear-gradient(to bottom,rgba(255,255,255,0) 1px,rgba(255,255,255,0.3) 2px,rgba(255,255,255,0.3) 3px,rgba(255,255,255,0) 4px),linear-gradient(to top,rgba(0,0,0,0.4) 3px,rgba(255,255,255,0.2) 5px,rgba(255,255,255,0) 6px),linear-gradient(to right,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);
	border-radius:2px;
}
.gopher {
	z-index:0;
	position:absolute;
	display:block;
	top:70px;
	left:7px;
	width:56px;
	height:100px;
	border-radius:20px;
	background:#e3c498;
	background-image:-webkit-radial-gradient(20px 23px,circle,#000000 5%,rgba(255,255,255,0) 5%),-webkit-radial-gradient(17px 20px,circle,#ffffff 10%,rgba(255,255,255,0) 10%),-webkit-radial-gradient(40px 23px,circle,#000000 5%,rgba(255,255,255,0) 5%),-webkit-radial-gradient(43px 20px,circle,#ffffff 10%,rgba(255,255,255,0) 10%),-webkit-radial-gradient(center 36px,circle,#000000 8%,rgba(255,255,255,0) 8%),-webkit-radial-gradient(center 48px,circle,#ffffff 20%,rgba(255,255,255,0) 20%);
	background-image:radial-gradient(circle at 20px 23px,#000000 5%,rgba(255,255,255,0) 5%),radial-gradient(circle at 17px 20px,#ffffff 10%,rgba(255,255,255,0) 10%),radial-gradient(circle at 40px 23px,#000000 5%,rgba(255,255,255,0) 5%),radial-gradient(circle at 43px 20px,#ffffff 10%,rgba(255,255,255,0) 10%),radial-gradient(circle at center 36px,#000000 8%,rgba(255,255,255,0) 8%),radial-gradient(circle at center 48px,#ffffff 20%,rgba(255,255,255,0) 20%);
	-webkit-appearance:button;
	-moz-apperance:button;
	appearance:button;
	cursor:pointer;
	border:none;
	outline:none;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}
.gopher:before,.gopher:after {
	z-index:-1;
	content:'';
	left:-5px;
	top:-5px;
	width:20px;
	height:20px;
	position:absolute;
	background:#e3c498;
	border-radius:50%;
	background-image:-webkit-radial-gradient(center,circle,#000000 40%,rgba(255,255,255,0) 40%);
	background-image:radial-gradient(circle at center,#000000 40%,rgba(255,255,255,0) 40%);
}
.gopher:after {
	left:auto;
	right:-5px;
}
.gopher--not-button {
	-webkit-appearance:none;
	-moz-apperance:none;
	appearance:none;
}
.group {
	position:absolute;
	z-index:1;
}
.group:nth-child(1) {
	left:45px;
	top:210px;
}
.group:nth-child(2) {
	left:165px;
	top:270px;
}
.group:nth-child(3) {
	left:345px;
	top:250px;
}
.group:nth-child(4) {
	left:80px;
	top:370px;
}
.group:nth-child(5) {
	left:400px;
	top:410px;
}
.group:nth-child(6) {
	left:470px;
	top:230px;
}
.gopher:checked {
	-webkit-animation-name:none;
	animation-name:none;
	pointer-events:none;
	-webkit-pointer-events:none;
	opacity:0;
	overflow:hidden;
}
.gopher1 {
	-webkit-animation-name:gopher1;
	animation-name:gopher1;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher1 {
	0% {
	top:70px;
}
10% {
	top:0;
}
15% {
	top:0;
}
20% {
	top:70px;
}
100% {
	top:70px;
}
}@keyframes gopher1 {
	0% {
	top:70px;
}
10% {
	top:0;
}
15% {
	top:0;
}
20% {
	top:70px;
}
100% {
	top:70px;
}
}.gopher2 {
	-webkit-animation-name:gopher2;
	animation-name:gopher2;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher2 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:0;
}
90% {
	top:0;
}
}@keyframes gopher2 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:0;
}
90% {
	top:0;
}
}.gopher3 {
	-webkit-animation-name:gopher3;
	animation-name:gopher3;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:5s;
	animation-duration:5s;
}
@-webkit-keyframes gopher3 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:0;
}
90% {
	top:70px;
}
}@keyframes gopher3 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:0;
}
90% {
	top:70px;
}
}.gopher4 {
	-webkit-animation-name:gopher4;
	animation-name:gopher4;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:8s;
	animation-duration:8s;
}
@-webkit-keyframes gopher4 {
	0% {
	top:70px;
}
10% {
	top:70px;
}
15% {
	top:0;
}
30% {
	top:70px;
}
}@keyframes gopher4 {
	0% {
	top:70px;
}
10% {
	top:70px;
}
15% {
	top:0;
}
30% {
	top:70px;
}
}.gopher5 {
	-webkit-animation-name:gopher5;
	animation-name:gopher5;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher5 {
	0% {
	top:70px;
}
70% {
	top:70px;
}
80% {
	top:0;
}
90% {
	top:70px;
}
}@keyframes gopher5 {
	0% {
	top:70px;
}
70% {
	top:70px;
}
80% {
	top:0;
}
90% {
	top:70px;
}
}.gopher6 {
	-webkit-animation-name:gopher6;
	animation-name:gopher6;
	-webkit-animation-delay:4s;
	animation-delay:4s;
	-webkit-animation-duration:6s;
	animation-duration:6s;
}
@-webkit-keyframes gopher6 {
	0% {
	top:70px;
}
70% {
	top:70px;
}
90% {
	top:0;
}
100% {
	top:70px;
}
}@keyframes gopher6 {
	0% {
	top:70px;
}
70% {
	top:70px;
}
90% {
	top:0;
}
100% {
	top:70px;
}
}.gopher7 {
	-webkit-animation-name:gopher7;
	animation-name:gopher7;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:6s;
	animation-duration:6s;
}
@-webkit-keyframes gopher7 {
	0% {
	top:70px;
}
20% {
	top:70px;
}
25% {
	top:0;
}
35% {
	top:70px;
}
}@keyframes gopher7 {
	0% {
	top:70px;
}
20% {
	top:70px;
}
25% {
	top:0;
}
35% {
	top:70px;
}
}.gopher8 {
	-webkit-animation-name:gopher8;
	animation-name:gopher8;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:8s;
	animation-duration:8s;
}
@-webkit-keyframes gopher8 {
	0% {
	top:70px;
}
50% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:70px;
}
}@keyframes gopher8 {
	0% {
	top:70px;
}
50% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:70px;
}
}.gopher9 {
	-webkit-animation-name:gopher9;
	animation-name:gopher9;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher9 {
	0% {
	top:70px;
}
10% {
	top:70px;
}
20% {
	top:0;
}
40% {
	top:70px;
}
}@keyframes gopher9 {
	0% {
	top:70px;
}
10% {
	top:70px;
}
20% {
	top:0;
}
40% {
	top:70px;
}
}.gopher10 {
	-webkit-animation-name:gopher10;
	animation-name:gopher10;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:8s;
	animation-duration:8s;
}
@-webkit-keyframes gopher10 {
	0% {
	top:70px;
}
40% {
	top:70px;
}
55% {
	top:0;
}
65% {
	top:70px;
}
}@keyframes gopher10 {
	0% {
	top:70px;
}
40% {
	top:70px;
}
55% {
	top:0;
}
65% {
	top:70px;
}
}.gopher11 {
	-webkit-animation-name:gopher11;
	animation-name:gopher11;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher11 {
	0% {
	top:70px;
}
40% {
	top:70px;
}
50% {
	top:0;
}
60% {
	top:70px;
}
}@keyframes gopher11 {
	0% {
	top:70px;
}
40% {
	top:70px;
}
50% {
	top:0;
}
60% {
	top:70px;
}
}.gopher12 {
	-webkit-animation-name:gopher12;
	animation-name:gopher12;
	-webkit-animation-delay:3s;
	animation-delay:3s;
	-webkit-animation-duration:6s;
	animation-duration:6s;
}
@-webkit-keyframes gopher12 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
50% {
	top:0;
}
55% {
	top:70px;
}
}@keyframes gopher12 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
50% {
	top:0;
}
55% {
	top:70px;
}
}#startFlag:checked ~ .points {
	top:20px;
}
.points {
	-webkit-transition:top 1s;
	transition:top 1s;
	position:absolute;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	top:-100px;
	left:50%;
	width:100px;
	height:48px;
	margin-left:-50px;
	background:rgba(0,0,0,0.2);
	border:4px solid #ffffff;
	border-radius:4px;
	color:#fff;
}
.points .points-viewport {
	overflow:hidden;
	height:40px;
	width:100%;
}
.points .points-list {
	position:relative;
	top:-480px;
}
.points input {
	display:block;
	height:40px;
	-webkit-transition:1s;
	transition:1s;
}
.points input:checked {
	height:0;
}
.points ul {
	list-style:none;
	padding:0;
	margin:0;
}
.points li {
	display:block;
	height:40px;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	cursor:default;
}
.time-wrapper {
	position:absolute;
	left:-150px;
	top:20px;
	-webkit-transition:1s;
	transition:1s;
}
.time-wrapper p {
	color:#fff;
	line-height:24px;
}
.time {
	border:2px solid #fff;
	width:140px;
	height:20px;
}
.time .progress {
	height:16px;
	width:0;
}
#startFlag:checked ~ .time-wrapper .progress {
	-webkit-animation:progress 15s linear 0s forwards;
	animation:progress 15s linear 0s forwards;
}
#startFlag:checked ~ #end {
	-webkit-animation:end 16s linear 0s forwards;
	animation:end 16s linear 0s forwards;
}
#startFlag:checked ~ .time-wrapper {
	left:20px;
}
@-webkit-keyframes progress {
	from {
	width:0;
	background:#00ff00;
}
to {
	width:136px;
	background:#ff0000;
}
}@keyframes progress {
	from {
	width:0;
	background:#00ff00;
}
to {
	width:136px;
	background:#ff0000;
}
}#end {
	top:-800px;
	opacity:1;
	display:block;
	border-bottom:2px solid #fff;
}
#end .gopher {
	position:absolute;
	left:50%;
	top:auto;
	margin-left:-30px;
	bottom:-54px;
}
@-webkit-keyframes end {
	from {
	top:-800px;
}
95% {
	top:-800px;
}
to {
	top:0;
}
}@keyframes end {
	from {
	top:-800px;
}
95% {
	top:-800px;
}
to {
	top:0;
}
}</style>
</head>
<body>
<div id="container">
    <input id="startFlag" type="checkbox">
    <div id="start" class="window">
        <h1>就是爱玩打地鼠</h1>
        <p>一个一本正经的 CSS 游戏</p>
        <div class="btn-group">
            <div class="gopher gopher--not-button"></div>
            <label for="startFlag">开始</label>
        </div>
    </div>
    <div id="end" class="window">
        <h2>Game Over</h2>
        <p>壮士欢迎从头再来</p>
        <p class="meta">按 F5/Command R 重来</p>
        <div class="gopher gopher--not-button"></div>
    </div>
    <div class="time-wrapper">
        <p>游戏时间：</p>
        <div class="time">
            <div class="progress"></div>
        </div>
    </div>
    <div id="map">
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
        <div class="map"></div>
    </div>
    <div class="holes">
        <div class="group">
            <input type="radio" name="target1" class="gopher gopher1">
            <input type="radio" name="target2" class="gopher gopher2">
            <div class="hole"></div>
        </div>
        <div class="group">
            <input type="radio" name="target3" class="gopher gopher3">
            <div class="hole"></div>
        </div>
        <div class="group">
            <input type="radio" name="target4" class="gopher gopher4">
            <input type="radio" name="target5" class="gopher gopher5">
            <input type="radio" name="target6" class="gopher gopher6">
            <div class="hole"></div>
        </div>
        <div class="group">
            <input type="radio" name="target7" class="gopher gopher7">
            <input type="radio" name="target8" class="gopher gopher8">
            <div class="hole"></div>
        </div>
        <div class="group">
            <input type="radio" name="target9" class="gopher gopher9">
            <input type="radio" name="target10" class="gopher gopher10">
            <div class="hole"></div>
        </div>
        <div class="group">
            <input type="radio" name="target11" class="gopher gopher11">
            <input type="radio" name="target12" class="gopher gopher12">
            <div class="hole"></div>
        </div>
    </div>
    <div class="points">
        <div class="points-viewport">
            <div class="points-list">
                <input type="radio" checked="" name="target1">
                <input type="radio" checked="" name="target2">
                <input type="radio" checked="" name="target3">
                <input type="radio" checked="" name="target4">
                <input type="radio" checked="" name="target5">
                <input type="radio" checked="" name="target6">
                <input type="radio" checked="" name="target7">
                <input type="radio" checked="" name="target8">
                <input type="radio" checked="" name="target9">
                <input type="radio" checked="" name="target10">
                <input type="radio" checked="" name="target11">
                <input type="radio" checked="" name="target12">
                <ul class="points-value">
                    <li>12</li>
                    <li>11</li>
                    <li>10</li>
                    <li>9</li>
                    <li>8</li>
                    <li>7</li>
                    <li>6</li>
                    <li>5</li>
                    <li>4</li>
                    <li>3</li>
                    <li>2</li>
                    <li>1</li>
                    <li>0</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>

</script>

</body>
</html>

3.井字棋
查看源代码 
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>井字棋</title>
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
* {
	padding:0;
	margin:0;
	font-family:'Itim',cursive;
}
html,body {
	background-color:#cb4042;
	width:100%;
	height:96%;
	background-position:fixed;
}
h1 {
	text-align:center;
	color:#fff;
	font-size:2em;
	margin-top:3%;
}
.main {
	width:486px;
	height:486px;
	margin:auto;
	margin-top:3%;
	background-color:#fff;
	text-align:center;
	z-index:5;
}
.tic {
	display:inline-block;
	width:160px;
	height:160px;
	font-size:1em;
	-webkit-text-size-adjust:100%;
	border:1px solid #cb4042;
	cursor:pointer;
	float:left;
	color:#000;
	position:relative;
}
.tic-span {
	font-size:3em;
	color:#cb4042;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.back {
	position:fixed;
	top:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:.5;
	z-index:20;
}
.choose {
	z-index:21;
	position:absolute;
	top:20%;
	left:0;
	right:0;
	margin:auto;
	width:700px;
	color:#fff;
	background-color:#db4d6d;
	border-radius:10px;
	outline:none;
	display:none;
}
.choose-title {
	padding-top:20px;
	text-align:center;
}
.choose-bt {
	margin-top:20px;
	margin-bottom:15px;
	/* text-align:right;
	margin-right:15px;
	*/
    text-align:center;
}
.choose-bt button {
	font-family:sans-serif;
	width:40px;
	height:40px;
	font-size:1.5em;
	text-align:center;
	background:#eee;
	border:1px solid #cb4042;
	border-radius:50%;
	outline:none;
	color:#cb4042;
	margin-left:50px;
	margin-right:50px;
	cursor:pointer;
}
.choose-bt button:hover {
	background-color:#fff;
}
.loser {
	position:absolute;
	top:0;
	height:100%;
	width:100%;
	text-align:center;
	font-size:25em;
	z-index:1;
	color:red;
	display:none;
}
</style>
</head>
<body>
    <h1>Yinyou TicTacToe</h1>
    <div class="main">
        <div id="tic-1" class="tic">
            <span id="span-1" class="tic-span"></span>
        </div>
        <div id="tic-2" class="tic">
            <span id="span-2" class="tic-span"></span>
        </div>
        <div id="tic-3" class="tic">
            <span id="span-3" class="tic-span"></span>
        </div>
        <div id="tic-4" class="tic">
            <span id="span-4" class="tic-span"></span>
        </div>
        <div id="tic-5" class="tic">
            <span id="span-5" class="tic-span"></span>
        </div>
        <div id="tic-6" class="tic">
            <span id="span-6" class="tic-span"></span>
        </div>
        <div id="tic-7" class="tic">
            <span id="span-7" class="tic-span"></span>
        </div>
        <div id="tic-8" class="tic">
            <span id="span-8" class="tic-span"></span>
        </div>
        <div id="tic-9" class="tic">
            <span id="span-9" class="tic-span"></span>
        </div>
    </div>

    <div class="back"></div>
    <div class="choose">
        <div class="choose-title">
            <h2>TicTacToe</h2>
            <hr>
            <p>Please choose whether you wanna use? × OR O</p>
        </div>
        <div class="choose-bt">
            <button id="cha">×</button>
            <button id="O">o</button>
        </div>
    </div>

    <div class="loser">
        Tie!
    </div>


<script>
$(document).ready(function() {
    var cmpt = ""; //电脑用的
    var user = ""; //用户用的
    var group = [0, 0, 0, 0, 0, 0, 0, 0, 0]; //记录九个棋格，0表示没下，1表示电脑，2表示玩家

    $(".choose").fadeIn(2000);
    $("#cha").on("click", function() {
        $(".choose").fadeOut(1);
        $(".back").fadeOut(1);
        cmpt = "O";
        user = "×";
        pcStep();
    });
    $("#O").on("click", function() {
        $(".choose").fadeOut(1);
        $(".back").fadeOut(1);
        cmpt = "×";
        user = "O";
        pcStep();
    });

    //电脑下棋，只下一步
    var pcStep = function() {
        var step = 0; //记录当前是电脑下的第几步
        for (var i in group) {
            if (group[i] !== 0) {
                //如果某格已经下过了，step++
                step++;
            }
        }
        if (step % 2 !== 0) {
            //如果用户还没下，就return
            return;
        }

        if (step === 0) {
            //如果电脑当前需要下第一步，因为是第一步所以不需要考虑该位置是否被别人下过的问题
            var proStep = [0, 2, 6, 8, 4]; //第一步允许下的地方，四个角与中央，这里用的是从0开始
            var posit = parseInt(Math.random() * 5, 10); //从0-4中随机生成一个数，作为proStep的下标，即随机选择一个格子下棋
            group[proStep[posit]] = 1; //电脑下棋
            $("#span-" + (proStep[posit] + 1)).html(cmpt);

            judge();
            return;
        }

        if (step === 2) {
            //如果是电脑下的第二步,分两种情况，分别是电脑第一步下了正中和四个角
            if (group[4] === 1) {
                //如果电脑第一步下的正中，又分两种情况，对方下的是四个角还是中间
                var corStep = [0, 2, 6, 8]; //四个角在group的索引
                for (var t = 0; t < 4; t++) {
                    if (group[corStep[t]] === 2) {
                        //如果玩家下的是某一个角，那就下他对角
                        var posit = 0; //这里表示的是电脑要下的位置
                        if (corStep[t] === 0) {
                            posit = 8;
                        } else if (corStep[t] === 8) {
                            posit = 0;
                        } else if (corStep[t] === 2) {
                            posit = 6;
                        } else if (corStep[t] === 6) {
                            posit = 2;
                        }
                        posit = parseInt(posit);
                        group[posit] = 1; //电脑下棋
                        $("#span-" + (posit + 1)).html(cmpt);
                        judge();
                        return;
                    }
                }
                //电脑下的不是某个角，而是在每一行或列的中间位置,电脑就下一个靠着它的角
                var posit_g = [0, 0]; //如果下在中间，就会有两个角靠着它，随机选一个
                var posit = 0; //这就是随机选择之后的位置
                if (group[1] === 2) {
                    posit_g[0] = 0;
                    posit_g[1] = 2;
                } else if (group[3] === 2) {
                    posit_g[0] = 0;
                    posit_g[1] = 6;
                } else if (group[5] === 2) {
                    posit_g[0] = 2;
                    posit_g[1] = 8;
                } else if (group[7] === 2) {
                    posit_g[0] = 6;
                    posit_g[1] = 8;
                }
                posit = posit_g[parseInt(Math.random() * 2)];
                posit = parseInt(posit);
                group[posit] = 1; //电脑下棋
                $("#span-" + (posit + 1)).html(cmpt);
                judge();
                return;
            } else {
                //如果电脑第一步下的不是正中，而是四个角
                //分两种情况，如果对方没下正中，那么就下正中，如果对方下了正中，就下第一步的对角
                if (group[4] === 0) {
                    //玩家没下正中，则下正中
                    group[4] = 1;
                    $("#span-5").html(cmpt);
                    judge();
                    return;
                }
                //下第一步的对角
                var posit = 0; //记录要下的从0起的位置
                if (group[0] === 1) {
                    posit = 8;
                } else if (group[8] === 1) {
                    posit = 0;
                } else if (group[2] === 1) {
                    posit = 6;
                } else if (group[6] === 1) {
                    posit = 2;
                }
                posit = parseInt(posit);
                group[posit] = 1; //电脑下棋
                $("#span-" + (posit + 1)).html(cmpt);
                judge();
                return;
            }
        }

        /*如果是第二步以后，分三步
         * 1、判断自己是否可以三连珠，如果可以就连上就赢了
         * 2、判断对方是否可以三连珠，如果有就堵上，不然就输了
         * 3、遍历剩下的还没下的格子，看下在哪一个，能让自己一条线上存在两粒棋子且都能实现三连珠的  这样的线最多
         */

        //第一步
        var first_arr = checkThree(1, group);
        if (first_arr.length !== 0) {
            //如果自己可以三连珠
            var posit = first_arr[0];
            posit = parseInt(posit);
            group[posit] = 1; //电脑下棋
            $("#span-" + (posit + 1)).html(cmpt);
            judge();
            return;
        }
        //如果自己不能三连珠，就第二步，检查对方是否能三连珠
        var second_arr = checkThree(2, group);
        if (second_arr.length !== 0) {
            //如果对方可以三连珠
            //console.log(second_arr[0]);
            var posit = second_arr[0];
            posit = parseInt(posit);
            group[posit] = 1; //电脑下棋
            $("#span-" + (posit + 1)).html(cmpt);
            judge();
            return;
        }
        //如果自己和对方都不能三连珠，进入第三步
        var third_posit = 0;
        var third_max = -1;
        for (var temp in group) {
            if (group[temp] === 0) {
                if (third_max === -1) {
                    third_posit = temp;
                    third_max = 0;
                }
                var ttt = [].concat(group);
                ttt[temp] = 1;
                var temp_arr = checkThree(1, ttt);
                if (temp_arr.length > third_max) {
                    //如果当前点能让更多个连珠，就决定是它了
                    third_max = temp_arr.length;
                    third_posit = temp;
                }
            }
        }
        group[third_posit] = 1; //电脑下棋
        //这里必须先转成数字，不然会当成字符串相加，会不对
        var wtf = parseInt(third_posit);
        wtf += 1;
        $("#span-" + wtf).html(cmpt);
        judge();
        return;
    };

    //检查是否有一点可以三连珠，参数kind如果是1，检查电脑，参数如果是2，检查玩家，如果检查到下某一点可以三连珠，
    //就返回该格从0开始的下标（数组形式，所有情况都在），如果没找到，返回[]
    //参数gp是参考的数组，正常情况下就是group，但是考虑到第三步需要判断每一个格子的，那时候要传一个临时数组了
    var checkThree = function(kind, gp) {
        var situ = []; //用来记录所有需要返回的值
        var allPossible = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
        ]; //记录八条线
        for (var i in allPossible) {
            var x = allPossible[i][0];
            var y = allPossible[i][1];
            var z = allPossible[i][2];
            if ((gp[x] === kind && gp[y] === kind && gp[z] === 0) || (gp[x] === 0 && gp[y] === kind && gp[z] === kind) || (gp[x] === kind && gp[y] === 0 && gp[z] === kind)) {
                //迭代判断吧，就不复制粘贴了
                //如果满足上述条件
                //console.log("Three:"+allPossible[i]);
                if (gp[x] === 0) {
                    situ.push(x);
                    continue;
                } else if (gp[y] === 0) {
                    situ.push(y);
                    continue;
                } else if (gp[z] === 0) {
                    situ.push(z);
                    continue;
                }
            }
        }
        return situ;
    };


    //输赢平的结果显示  state取值1,2,3,1表示电脑赢，2表示玩家赢，3表示平局，a,b,c表示连起来的三格
    var result = function(state, a, b, c) {
        if (state === 1) {
            console.log('lose');
            $(".loser").html("LOSE!");

        } else if (state === 2) {
            console.log('win');
            $(".loser").html("WIN!");

        } else if (state === 3) {
            console.log('tie');
            $(".loser").html("TIE!");

        }
        if (state !== 3) {
            $("#tic-" + a).css("background-color", "#877f6c");
            $("#tic-" + b).css("background-color", "#877f6c");
            $("#tic-" + c).css("background-color", "#877f6c");
        }
        setTimeout(function() {
            if (state !== 3) {
                $("#tic-" + a).css("background-color", "#fff");
                $("#tic-" + b).css("background-color", "#fff");
                $("#tic-" + c).css("background-color", "#fff");
            }
            $(".loser").fadeIn(400, function() {
                setTimeout(function() {
                    beginAgain();
                }, 2000);
            });
        }, 1500);



    };

    //出了结果就重新开始
    var beginAgain = function() {
        for (var yyy = 0; yyy < 9; yyy++) {
            group[yyy] = 0;
            $("#span-" + (yyy + 1)).html("");
        }
        $(".loser").fadeOut(1, function() {
            pcStep();
        });

    }

    //判断输赢与和棋，一共10种情况，8负1平1还没下完
    var judge = function() {
        if (group[0] === group[1] && group[1] === group[2] && group[0] !== 0) {
            //第一行连起来了，这样写是因为格子的编号是从0开始，
            result(group[0], 1, 2, 3);
        } else if (group[3] === group[4] && group[4] === group[5] && group[3] !== 0) {
            //第二行
            result(group[3], 4, 5, 6);
        } else if (group[6] === group[7] && group[7] === group[8] && group[6] !== 0) {
            //第三行
            result(group[6], 7, 8, 9);
        } else if (group[0] === group[3] && group[3] === group[6] && group[0] !== 0) {
            //第一列
            result(group[0], 1, 4, 7);
        } else if (group[1] === group[4] && group[4] === group[7] && group[1] !== 0) {
            //第二列
            result(group[1], 2, 5, 8);
        } else if (group[2] === group[5] && group[5] === group[8] && group[2] !== 0) {
            //第三列
            result(group[2], 3, 6, 9);
        } else if (group[0] === group[4] && group[4] === group[8] && group[0] !== 0) {
            //主对角线
            result(group[0], 1, 5, 9);
        } else if (group[2] === group[4] && group[4] === group[6] && group[2] !== 0) {
            //次对角线
            result(group[2], 3, 5, 7);
        } else {
            //没分出胜负
            var isTie = true;
            for (var i = 0; i < 9; i++) {
                if (group[i] === 0) {
                    //还有格子没下，表示棋还没下完
                    isTie = false;
                }
            }
            //平局
            if (isTie) {
                result(3, 0, 0, 0);
            } else {
                var step = 0; //记录当前是电脑下的第几步
                for (var i in group) {
                    if (group[i] !== 0) {
                        //如果某格已经下过了，step++
                        step++;
                    }
                }
                if (step % 2 === 0 && step !== 0) {
                    //如果用户下了，就电脑下
                    pcStep();
                }
            }
        }
    };


    //初始化棋盘点击事件,闭包以获取对应的o
    var initClick = function(i) {
        $("#tic-" + i).on("click", function() {
            var step = 0; //记录当前是下的第几步
            for (var j in group) {
                if (group[j] !== 0) {
                    //如果某格已经下过了，step++
                    step++;
                }
            }
            if (step % 2 === 0) {
                //如果电脑还没下，点了也没用
                return;
            }


            if (group[i - 1] === 0) {
                //如果没下,那么按了才有效,并将之设置为玩家下的，并判断是否和棋或者赢了
                //console.log("pressed:"+i);
                //console.log(group);
                group[i - 1] = 2;
                $("#span-" + i).html(user);
                judge();
            }
        });
    };

    for (var i = 1; i <= 9; i++) {
        initClick(i); //初始化棋盘点击事件
    }




});
</script>

</body>
</html>

4.球球大作战
查看源代码 
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>球球大作战</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body {
	overflow:hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>


<script>
var obj = document.getElementById("canvas"),
    w = window.innerWidth, //屏幕可视区的宽高
    h = window.innerHeight,
    s = w + h, //控制随机球球的数量
    footArr = [], //存放食物对象的数组
    nowX = 0, //鼠标所在的点
    nowY = 0,
    huabu = { //画布对象
        ax: w * 3, //画布对象X轴 乘以6
        ay: h * 3 //画布对象Y轴 乘以6
    }
My = { //玩家小球的对象
    x: w / 2,
    y: h / 2,
    r: 7,
    next_x: w / 2,
    next_y: h / 2,
    tiji: 0,
    posX: w / 2,
    posY: h / 2
};
var Scolor = ["#468966", "#FFF0A5", "#FFB03B", "#B64926", "#8E2800", "white", "blue", "green", "red", "yellow"]; //老师colors
var context = obj.getContext("2d");

function canvasN() {
    obj.width = w;
    obj.height = h;
    obj.style.background = '#000';
    //初始化创建食物
    creatfoot();
    //创建玩家
    MyMove();

}

//获取XY坐标以后 画出小圆
function foot(_l, _t, _cc) {
    this.left = _l; //相当于X坐标
    this.top = _t; //相当于Y坐标
    this.color = _cc; //数组颜色添加进去
    role(this.left, this.top, 2, this.color, 0)

    /* arc(x,y,r,sAngle,eAngle,counterclockwise);	创建弧/曲线（用于创建圆形或部分圆）。
					x 	圆的中心的 x 坐标。
					y 	圆的中心的 y 坐标。
					r 	圆的半径。
					sAngle 	起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
					eAngle 	结束角，以弧度计。
					counterclockwise  可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
	
					*/
}

//初始化创建食物   创建小球
function creatfoot() {
    for (var i = 0; i < s; i++) {
        var posLeft = Math.random() * w * 3; //随机宽度
        var posTop = Math.random() * h * 3; //随机的高度
        var length = Scolor.length;
        var _S = Scolor[Math.floor(Math.random() * length)]; //随机颜色的长度   ys
        footArr[i] = new foot(posLeft, posTop, _S) //posLeft,posTop,_S   _l,_t,_cc  foot函数传入的参数

    }
    footArr.push(""); //把食物填充进去  方便下面获取到食物判断是否被吃掉
}

//创建玩家  角色自己球    role 角色
function role(x, y, r, ys, yy) {
    context.beginPath(); //开始画
    context.arc(x, y, r, 0, Math.PI * 2, false); //画圆  
    context.closePath(); //闭合路径
    context.fillStyle = ys; //颜色添加进去
    context.shadowBlur = yy; //模糊程度
    context.shadowColor = ys; //模糊度的随机颜色
    context.fill()
}


/*function creatFoot_move() { //遍历所有食物，并重新绘画到画布上
	
}*/

document.addEventListener("mousemove", move, false)

function move(e) {
    var e = e || window.event;
    My.next_x = e.clientX; //赋值给鼠标 确定鼠标所在点
    My.next_y = e.clientY;
}
var timer = setInterval(function() {
    context.clearRect(0, 0, w, h); //清除画布
    MyMove();
}, 10)

function MyMove() { //创建玩家与控制玩家移动
    var move_x = (My.next_x - My.x) / 200, //move_x速度 = 鼠标所在的点 - 目标所在的点 /200 速度
        move_y = (My.next_y - My.y) / 200,
        len_x = Math.max(Math.min(move_x, 2), -2), //先从最里面的看  求出最大最小   相当于判断他的速度如何执行
        len_y = Math.max(Math.min(move_y, 2), -2);

    My.posX += len_x; //食物X轴 
    My.posY += len_y;
    if (My.posX <= huabu.ax / 6 && My.posX > My.r) {
        My.x += len_x
        len_x = 0;
    } else if (My.posX >= huabu.ax - w / 2 && My.posX > My.r) {
        My.x += len_x
        len_x = 0;
    } else {
        if (My.x <= My.r + 1) {
            My.x = My.r
        } else {
            My.x = w / 2;
        }
    }
    if (My.posY < huabu.ay / 6 && My.posY > My.r) {
        My.y += len_y;
        len_y = 0;
    } else if (My.posY > huabu.ay - w / 2 && My.posY > My.r) {
        My.y += len_y
        len_y = 0;
    } else {
        if (My.y <= My.r + 1) {
            My.y = My.r
        } else {
            My.y = h / 2;
        }
    }

    for (var i = 0; i < footArr.length - 1; i++) {
        footArr[i].left -= len_x; //移动食物 
        footArr[i].top -= len_y;

        if (footArr[i].left - 2 >= My.x - My.r && footArr[i].left + 2 <= My.x + My.r && footArr[i].top - 2 >= My.y - My.r && footArr[i].top + 2 <= My.y + My.r) { //判断玩家上下左右与食物的重合
            footArr.splice(i, 1) //如果重合就删掉
            My.tiji += 1; //每次食物消失的时候  玩家体积加一个
        } else {
            role(footArr[i].left, footArr[i].top, 2, footArr[i].color, 0)
            //食物
        }
    }
    //判断球球变大的
    if (My.tiji >= 5 && My.tiji < 10) {
        My.r = 10;
    } else if (My.tiji >= 10 && My.tiji < 15) {
        My.r = 15;
    } else if (My.tiji >= 15 && My.tiji < 20) {
        My.r = 20;
    } else if (My.tiji >= 20 && My.tiji < 25) {
        My.r = 25;
    } else if (My.tiji >= 25 && My.tiji < 30) {
        My.r = 30;
    } else if (My.tiji >= 30 && My.tiji < 35) {
        My.r = 40;
    }

    role(My.x, My.y, My.r, "#fff", 20)

    //console.log(My.y)
};

window.onload = canvasN;
//window.onresize = canvasN;
</script>

</body>
</html>

5.贪吃蛇
查看源代码 
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<canvas id="my_canvas" height="265" width="265" style="border:1px solid #000">您的浏览器不支持Canvas！</canvas><br> 长度：
<span id="length"></span><br> 移动速度：
<span id="speed"></span><br> 提示：按任意方向键开始

<script>
var c = document.getElementById("my_canvas").getContext("2d"),
    s = [{
            x: 10,
            y: 9
        },
        {
            x: 10,
            y: 8
        }
    ],
    k = 40,
    f = null,
    t,
    w,
    l = 500,
    m = function(d) {
        if (!d) {
            s.unshift({
                    x: 0,
                    y: 0
                }),
                k % 2 == 0 ? (s[0].x = s[1].x, s[0].y = s[1].y + (k == 40 ? 1 : -1)) : (s[0].y = s[1].y, s[0].x = s[1].x + (k == 39 ? 1 : -1));

            if (ck(s[0], 0) || s[0].x < 0 || s[0].x >= 24 || s[0].y < 0 || s[0].y >= 24) {
                ac();
                document.onkeydown = null;
                alert('game over!');
                return false
            };

            if (f && (k == 40 && s[0].x == f.x && s[0].y == f.y) || (k == 38 && s[0].x == f.x && s[0].y == f.y) || (k == 37 && s[0].x == f.x && s[0].y == f.y) || (k == 39 && s[0].x == f.x && s[0].y == f.y)) {
                k % 2 == 0 ? (f.x = s[s.length - 1].x, f.y = s[s.length - 1].y + (k == 40 ? -1 : 1)) : (f.x = s[s.length - 1].x + (k == 39 ? -1 : 1), f.y = s[s.length - 1].y);
                f = null,
                    l -= Math.floor(s.length / 10),
                    ac(),
                    a()
            } else s.pop()
        }

        if (!f) {
            w = [];
            for (var i = 0; i < 24; i++)
                for (var j = 0; j < 24; j++)
                    if (!ck({
                            x: i,
                            y: j
                        }))
                        w.push({
                            x: i,
                            y: j
                        }),
                        f = w[Math.floor(Math.random() * w.length)]
        };
        c.clearRect(0, 0, 265, 265);
        if (f) {
            c.fillStyle = '#093';
            c.fillRect(1 + f.x * 11, 1 + f.y * 11, 10, 10)
        }
        for (var i = 0; i < s.length; i++) {
            i ? c.fillStyle = '#ccc' : c.fillStyle = '#000';
            c.fillRect(1 + s[i].x * 11, 1 + s[i].y * 11, 10, 10)
        }
        document.getElementById('length').innerHTML = s.length;
        document.getElementById('speed').innerHTML = (Math.floor(l / 1000 * 100) / 100) + 's';
        return true
    },

    ck = function(p, j) {
        for (var i = 0; i < s.length; i++)
            if (i != j && p.x == s[i].x && p.y == s[i].y)
                return true;
        return false
    },
    a = function() {
        if (!t)
            t = setInterval(m, l)
    },
    ac = function() {
        clearInterval(t);
        t = null
    };
document.onkeydown = function(e) {
    var kk = e ? e.which : event.keyCode;
    if (kk < 37 || kk > 40 || Math.abs(kk - k) == 2)
        return;
    k = kk;
    ac();
    if (m())
        a()
};
window.onload = m;
</script>

</body>
</html>

6.五子棋
查看源代码 
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五子棋</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
#main {
	width:100%;
}
#main h2 {
	text-align:center;
	margin-top:50px;
}
#main canvas {
	display:block;
	margin:30px auto;
	box-shadow:5px 5px 5px #c3c3c3,-5px -5px 10px #eeeeee;
	background:rgb(221,191,163);
}
#restart {
	width:100px;
	height:40px;
	background:#ccc;
	color:#fff;
	font-size:20px;
	text-align:center;
	line-height:40px;
	margin:auto;
	cursor:pointer;
	display:none;
}
</style>
</head>
<body>
<div id="main">
    <h2>五子棋</h2>
    <canvas id="chess" width="450px" height="450px"></canvas>
</div>
<div id="restart">重新开始</div>

<script>
window.onload = function() {
    var chess = document.getElementById("chess"); //获取棋盘

    //绘制棋盘
    var context = chess.getContext("2d"); //获取绘制2d画要用的方法
    context.strokeStyle = "rgb(64, 37, 8)" //线的颜色
    chessBorder();

    //线段绘制
    function chessBorder() {
        //横线
        for (var i = 0; i < 15; i++) {
            //线段绘制起始点
            context.moveTo(15, 15 + i * 30);
            //线段绘制终点
            context.lineTo(435, 15 + i * 30);
            //连线
            context.stroke();
        }
        //竖线
        for (var i = 0; i < 15; i++) {
            //线段绘制起始点
            context.moveTo(15 + 30 * i, 15);
            //线段绘制终点
            context.lineTo(15 + 30 * i, 435);
            //连线
            context.stroke();
        }
    }

    //赢法数组
    var wins = [];
    var count = 0; //赢法编号
    var mywin = []; //记录用户赢法上的分值
    var computerwin = []; //记录计算机赢法上的分值
    //将赢法数组变成三维数组分别用于放入棋子的x,y和赢法编号
    for (var i = 0; i < 15; i++) {
        wins[i] = [];
        for (var j = 0; j < 15; j++) {
            wins[i][j] = [];
        }
    }


    //横线赢法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[j + k][i][count] = true;
            }
            count++;
        }
    }
    //竖线赢法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i][j + k][count] = true;
            }
            count++;
        }
    }
    //左斜线赢法
    for (var i = 0; i < 11; i++) {
        for (var j = 4; j < 15; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i + k][j - k][count] = true;
            }
            count++;
        }
    }
    //右斜线赢法
    for (var i = 0; i < 11; i++) {
        for (var j = 0; j < 11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i + k][j + k][count] = true;
            }
            count++;
        }
    }
    //初始化赢法的分值
    //注：一定要在赢法统计完之后再初始化，否则赢法编号会有错
    for (var i = 0; i < count; i++) {
        mywin[i] = 0;
        computerwin[i] = 0;
    }

    //下棋时判断棋盘上这个位置是否已经下过
    var chessboerd = []; //记录哪些位置被下过
    for (var i = 0; i < 15; i++) {
        chessboerd[i] = [];
        for (var k = 0; k < 15; k++) {
            // 0为没下过，1为下过
            chessboerd[i][k] = 0;
        }
    }

    //下棋
    var me = true; //是否轮到我下棋
    var over = false; //游戏是否结束

    chess.onclick = function(e) {
        //如果游戏结束则跳出函数，将无法操作
        if (over) {
            return;
        }
        //如果没有轮到我也无法操作
        if (!me) {
            return;
        }
        //获取点击位置的x,y
        var x = e.offsetX;
        var y = e.offsetY;

        //将点击位置向下取整
        var i = Math.floor(x / 30);
        var j = Math.floor(y / 30);

        //判断下的地方有没有子
        if (chessboerd[i][j] == 0) {
            //下一个子
            oneStep(i, j, me);
            //标记已经下过的子
            chessboerd[i][j] = 1;
            //判断用户是否胜利
            for (var k = 0; k < count; k++) {
                if (wins[i][j][k]) {
                    mywin[k]++;

                    if (mywin[k] == 5) {
                        alert("恭喜你，你赢了！")

                        over = !over;
                        restart();
                    }
                }
            }
            //如果游戏没有结束，轮到计算机下子
            if (!over) {
                //禁止用户下子
                me = !me;
                //计算机落子
                computerAI();
            }
        }


        function computerAI() {

            //空白子在用户算法上的分值
            var myScore = [];
            //空白子在计算机算法上的分值
            var computerScore = [];

            for (var i = 0; i < 15; i++) {
                myScore[i] = [];
                computerScore[i] = [];
                for (var j = 0; j < 15; j++) {
                    myScore[i][j] = 0;
                    computerScore[i][j] = 0;
                }
            }
            //空白子最大分值
            var max = 0;
            //最大分值子的坐标
            let x = 0;
            let y = 0;
            for (var i = 0; i < 15; i++) {
                for (var j = 0; j < 15; j++) {
                    //筛选出所有空白子
                    if (chessboerd[i][j] == 0) {
                        for (var k = 0; k < count; k++) {
                            if (wins[i][j][k]) {
                                if (mywin[k] == 1) {
                                    myScore[i][j] += 200;
                                } else if (mywin[k] == 2) {
                                    myScore[i][j] += 900;
                                } else if (mywin[k] == 3) {
                                    myScore[i][j] += 2000;
                                } else if (mywin[k] == 4) {
                                    myScore[i][j] += 10000;
                                }

                                if (computerwin[k] == 1) {
                                    computerScore[i][j] += 220;
                                } else if (computerwin[k] == 2) {
                                    computerScore[i][j] += 420;
                                } else if (computerwin[k] == 3) {
                                    computerScore[i][j] += 2200;
                                } else if (computerwin[k] == 4) {
                                    computerScore[i][j] += 20000;
                                }
                            }

                        }

                        if (myScore[i][j] > max) {
                            max = myScore[i][j];
                            x = i;
                            y = j;
                        } else if (myScore[i][j] == max) {
                            if (computerScore[i][j] > max) {
                                max = computerScore[i][j];
                                x = i;
                                y = j;
                            }
                        }
                        if (computerScore[i][j] > max) {
                            max = computerScore[i][j];
                            x = i;
                            y = j;
                        } else if (computerScore[i][j] == max) {
                            if (myScore[i][j] > max) {
                                max = myScore[i][j];
                                x = i;
                                y = j;
                            }
                        }

                    }

                }
            }
            oneStep(x, y, me);
            chessboerd[x][y] = 1;

            for (var k = 0; k < count; k++) {
                if (wins[x][y][k]) {
                    computerwin[k]++;

                    if (computerwin[k] == 5) {
                        alert("计算机获胜！")
                        over = !over;
                        restart();

                    }
                }
            }

            if (!over) {
                me = !me;
            }

        }



        //绘制棋子的样式
        function oneStep(x, y, me) {
            //画圆
            context.beginPath();
            context.arc(15 + x * 30, 15 + y * 30, 13, 0, 2 * Math.PI)
            context.closePath();
            var color;
            if (me) {
                color = "#000"
            } else {
                color = "#fff"
            }
            context.fillStyle = color;
            context.fill();
        }

    }
    //游戏结束后点击重新开始按钮重载页面
    function restart() {
        $("#restart").css({
            display: "block"
        }).click(function() {
            window.location.reload();
        })
    }

}
</script>

</body>
</html>

NASA Boarding Pass

1
<iframe width="980" height="410" src="https://mars.nasa.gov/layout/embed/send-your-name/future/certificate/?cn=212795851015" frameborder="0"></iframe>

评论