小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏

五子棋小游戏学习——

有一个问题是，棋盘线的颜色，在canvas中，明明设置了灰色，但在我的预览中还是黑色的，很重的颜色。

以下是复刻的源码：

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>五子棋游戏</title>
  7         <meta name="Description" content="git上看到的一个很值得学习练习的简易h5+js制作的小游戏，很久没有摸键盘码代码了，刚好拿来练练手。" />
  8         <style type="text/css">
  9             canvas {
 10                 display: block;
 11                 margin: 50px auto;
 12                 -webkit-box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
 13                 box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
 14                 cursor: pointer;
 15             }
 16             
 17             .btn_wrap {
 18                 display: flex;
 19                 flex-direction: row;
 20                 justify-content: center;
 21             }
 22             
 23             .btn_wrap div {
 24                 margin: 0 10px;
 25             }
 26             
 27             div>span {
 28                 display: inline-block;
 29                 padding: 10px 20px;
 30                 color: #FFF;
 31                 background: #ee82ee;
 32                 -webkit-border-radius: 5px;
 33                 -moz-border-radius: 5px;
 34                 border-radius: 5px;
 35                 cursor: pointer;
 36             }
 37             
 38             div.unable span {
 39                 background: #d6d6d4;
 40                 color: #adacaa;
 41             }
 42             
 43             #result-wrap {
 44                 text-align: center;
 45             }
 46         </style>
 47     </head>
 48 
 49     <body>
 50         <h3 id="result-wrap">--五子棋游戏--</h3>
 51         <canvas id="chess" width="450px" height="450px"></canvas>
 52         <div class="btn_wrap">
 53             <div id="restart" class="restart">
 54                 <span>重新开始</span>
 55             </div>
 56             <div id="goback" class="goback unable">
 57                 <span>悔棋</span>
 58             </div>
 59             <div id="return" class="return unable">
 60                 <span>
 61                     撤销悔棋
 62                 </span>
 63             </div>
 64         </div>
 65         <a href="https://github.com/wj704/wj704.github.io/blob/master/five_game.html">原文地址</a>
 66     </body>
 67     <script type="text/javascript">
 68         var over = false;
 69         var me = true; //我
 70         var _nowi = 0,
 71             _nowj = 0;
 72         var _compi = 0,
 73             _compj = 0;
 74         var _myWin = [],
 75             _compWin = [];
 76         var backAble = false,
 77             returnAble = false;
 78         var resultTxt = document.getElementById('result-wrap');
 79 
 80         var chressBord = [];
 81         for(var i = 0; i < 15; i++) {
 82             chressBord[i] = [];
 83             for(var j = 0; j < 15; j++) {
 84                 chressBord[i][j] = 0;
 85             }
 86         }
 87 
 88         //赢法的统计数组
 89         var myWin = [];
 90         var computerWin = [];
 91 
 92         //赢法数组
 93         var wins = [];
 94         for(var i = 0; i < 15; i++) {
 95             wins[i] = [];
 96             for(var j = 0; j < 15; j++) {
 97                 wins[i][j] = [];
 98             }
 99         }
100 
101         var count = 0; //赢法总数
102         //横线赢法
103         for(var i = 0; i < 15; i++) {
104             for(var j = 0; j < 11; j++) {
105                 for(var k = 0; k < 5; k++) {
106                     wins[i][j + k][count] = true;
107                 }
108                 count++;
109             }
110         }
111 
112         //竖线赢法
113         for(var i = 0; i < 15; i++) {
114             for(var j = 0; j < 11; j++) {
115                 for(var k = 0; k < 5; k++) {
116                     wins[j + k][i][count] = true;
117                 }
118                 count++;
119             }
120         }
121 
122         //正斜线赢法
123         for(var i = 0; i < 11; i++) {
124             for(var j = 0; j < 11; j++) {
125                 for(var k = 0; k < 5; k++) {
126                     wins[i + k][j + k][count] = true;
127                 }
128                 count++;
129             }
130         }
131 
132         //反斜线赢法
133         for(var i = 0; i < 11; i++) {
134             for(var j = 14; j > 3; j--) {
135                 for(var k = 0; k < 5; k++) {
136                     wins[i + k][j - k][count] = true;
137                 }
138                 count++;
139             }
140         }
141 
142         //debugger
143         for(var i = 0; i < count; i++) {
144             myWin[i] = 0;
145             _myWin[i] = 0;
146             computerWin[i] = 0;
147             _compWin[i] = 0;
148         }
149         var chess = document.getElementById('chess');
150         var context = chess.getContext('2d')
151         context.storkeStyle = '#bfbfbf'; //边框颜色
152         var backbtn = document.getElementById('goback');
153         var returnbtn = document.getElementById('return');
154         window.onload = function() {
155             drawChessBoard();
156         }
157 
158         document.getElementById('restart').onclick = function() {
159             window.location.reload();
160         }
161         //我，下棋
162         chess.onclick = function(e) {
163             if(over) {
164                 return;
165             }
166             if(!me) {
167                 return;
168             }
169             //悔棋功能可用
170             backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
171             var x = e.offsetX;
172             var y = e.offsetY;
173             var i = Math.floor(x / 30);
174             var j = Math.floor(y / 30);
175             _nowi = i;
176             _nowj = j;
177             if(chressBord[i][j] == 0) {
178                 oneStep(i, j, me);
179                 chressBord[i][j] = 1; //我，已占位置
180                 for(var k = 0; k < count; k++) { //将可能赢的情况都加1
181                     if(wins[i][j][k]) {
182                         //debugger
183                         myWin[k]++;
184                         _compWin[k] = computerWin[k];
185                         computerWin[k] = 6; //这个位置对方不可能赢了
186                         if(myWin[k] == 5) {
187                             //window.alert('你赢了');
188                             resultTxt.innerHTML = '恭喜，你赢了！';
189                             over = true;
190                         }
191                     }
192                 }
193                 if(!over) {
194                     me = !me;
195                     computerAI();
196                 }
197             }
198         }
199 
200         //悔棋
201         backbtn.onclick = function(e) {
202             if(!backAble) {
203                 return;
204             }
205             over = false;
206             me = true;
207             //resultTxt.innerHTMl = "(⊙o⊙)，悔棋中";
208             //撤销悔棋功能可用
209             returnbtn.className = returnbtn.className.replace(new RgeExp("(\\s|^)unable(\\s|$)"), " ");
210             //我，悔棋
211             chressBord[_nowi][_nowj] = 0; //我，已占位置 还原
212             minusStep(_nowi, _nowj); //销毁棋子
213             for(var k = 0; k < count; k++) { //将可能赢得情况都减1
214                 if(wins[_nowi][_nowj][k]) {
215                     myWin[k]--;
216                     computerWin[k] = _compWin[k]; //这个位置对方可能赢
217                 }
218             }
219 
220             //计算机相应的悔棋
221             chressBord[_compi][_compj] = 0; //计算机，已占位置 还原
222             minusStep(_compi, _compj); //销毁棋子
223             for(var k = 0; k < count; k++) {
224                 if(wins[_compi][_compj][k]) {
225                     computerWin[k]--;
226                     myWin[k] = _myWin[i]; //这个位置对方可能赢
227                 }
228             }
229             resultTxt.innerHTML = "--益智五子棋--";
230             returnAble = true;
231             backAble = false;
232         }
233 
234         //撤销悔棋
235         returnbtn.onclick = function(e) {
236             if(!returnAble) {
237                 return;
238             }
239             //我，撤销悔棋
240             chressBord[_nowi][_nowj] = 1; //我，已占位置
241             oneStep(_nowi, _nowj, me);
242             for(var k = 0; k < count; k++) {
243 
244                 if(wins[_nowi][_nowj][k]) {
245                     myWin[k]++;
246                     _compWin[k] = computerWin[k];
247                     computerWin[k] = 6; //这个位置对方不可能赢
248                 }
249                 if(myWin[k] == 5) {
250                     resultTxt.innerHTML = '恭喜，你赢了！';
251                     over = true;
252                 }
253             }
254 
255             //计算机撤销相应的悔棋
256             chressBord[_compi][_compj] = 2; //计算机，已占位置
257             oneStep(_compi, _compj, false);
258             for(var k = 0; k < count; k++) { //将可能赢得情况减一
259                 if(wins[_compi][_compj][k]) {
260                     computerWin[k]++;
261                     _myWin[k] = myWin[k];
262                     myWin[k] = 6; //这个位置对方不可能赢
263                 }
264                 if(computerWin[k] == 5) {
265                     resultTxt.innerHTML = "┗|｀O′|┛ 嗷~~，计算机赢了，继续加油！";
266                     over = true;
267                 }
268             }
269             returnbtn.className += " " + "unable";
270             returnAble = false;
271             backAble = true;
272         }
273 
274         //计算机下棋
275         var computerAI = function() {
276             var myScore = [];
277             var computerScore = [];
278             var max = 0;
279             var u = 0,
280                 v = 0;
281             for(var i = 0; i < 15; i++) {
282                 myScore[i] = [];
283                 computerScore[i] = [];
284                 for(var j = 0; j < 15; j++) {
285                     myScore[i][j] = 0;
286                     computerScore[i][j] = 0;
287                 }
288             }
289             for(var i = 0; i < 15; i++) {
290                 for(var j = 0; j < 15; j++) {
291                     if(chressBord[i][j] == 0) {
292                         for(var k = 0; k < count; k++) {
293                             if(wins[i][j][k]) {
294 
295                                 if(myWin[k] == 1) {
296                                     myScore[i][j] += 200;
297                                 } else if(myWin[k] == 2) {
298                                     myScore[i][j] += 400;
299                                 } else if(myWin[k] == 3) {
300                                     myScore[i][j] += 2000;
301                                 } else if(myWin[k] == 4) {
302                                     myScore[i][j] += 10000;
303                                 }
304 
305                                 if(computerWin[k] == 1) {
306                                     computerScore[i][j] += 220;
307                                 } else if(computerWin[k] == 2) {
308                                     computerScore[i][j] += 420;
309                                 } else if(computerWin[k] == 3) {
310                                     computerScore[i][j] += 2100;
311                                 } else if(computerWin[k] == 4) {
312                                     computerScore[i][j] += 20000;
313                                 }
314                             }
315                         }
316                         if(myScore[i][j] > max) {
317                             max = myScore[i][j];
318                             u = i;
319                             v = j;
320                         } else if(myScore[i][j] == max) {
321                             if(computerScore[i][j] > computerScore[u][v]) {
322                                 u = i;
323                                 v = j;
324                             }
325                         }
326                         if(computerScore[i][j] > max) {
327                             max = computerScore[i][j];
328                             u = i;
329                             v = j;　
330                         } else if(computerScore[i][j] == max) {
331                             if(myScore[i][j] > myScore[u][v]) {
332                                 u = i;
333                                 v = j;
334                             }
335                         }
336 
337                     }
338                 }
339             }
340 
341             _compi = u;
342             _compj = v;
343             oneStep(u, v, false);
344             chressBord[u][v] = 2; //计算机占据位置
345             for(var k = 0; k < count; k++) {
346                 if(wins[u][v][k]) {
347                     computerWin[k]++;
348                     _myWin[k] = myWin[k];
349                     myWin[k] = 6; //这个位置对方不可能赢了；
350                     if(computerWin[k] == 5) {
351                         resultTxt.innerHTML = "┗|｀O′|┛ 嗷~~，计算机赢了，继续加油！";
352                         over = true;
353                     }
354                 }
355             }
356             if(!over) {
357                 me = !me;
358             }
359             backAble = true;
360             returnAble = false;
361             var hasClass = new RegExp('unable').test("" + returnbtn.className + "");
362             if(!hasClass) {
363                 returnbtn.className += " " + "unable";
364             }
365         }
366 
367         //绘画键盘；
368         var drawChessBoard = function() {
369             for(var i = 0; i < 15; i++) {
370                 context.moveTo(15 + i * 30, 15);
371                 context.lineTo(15 + i * 30, 435);
372                 context.stroke();
373                 context.moveTo(15, 15 + i * 30);
374                 context.lineTo(435, 15 + i * 30);
375                 context.stroke();
376             }
377         }
378 
379         //画棋子
380         var oneStep = function(i, j, me) {
381             context.beginPath();
382             context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI); //画圆
383             context.closePath();
384             //渐变
385             var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
386 
387             if(me) {
388                 gradient.addColorStop(0, '#0a0a0a');
389                 gradient.addColorStop(1, '#636766');
390             } else {
391                 gradient.addColorStop(0, '#d1d1d1');
392                 gradient.addColorStop(1, '#f9f9f9');
393             }
394             context.fillStyle = gradient;
395             context.fill();
396         }
397 
398         //销毁棋子
399         var minusStep = function(i, j) {
400             //擦除该圆
401             context.clearRect((i) * 30, (j) * 30, 30, 30);
402 
403             //重画该圆周围的格子
404             context.beginPath();
405             context.moveTo(15 + i * 30, j * 30);
406             context.lineTo(15 + i * 30, j * 30 + 30);
407             context.moveTo(i * 30, j * 30 + 15);
408             context.lineTo((i + 1) * 30, j * 30 + 15);
409             context.stroke();
410         }
411     </script>
412 
413 </html>
五子棋小游戏

 

以下是对源码的分析与学习笔记：

 

五子棋小游戏代码详解：

结构上：

一个h3用来放标题，给了个id同时为了后期就可以更改提示信息放进去。

放一块画布

放三个按钮，分别是重来，悔棋，放弃悔棋。

 

样式中：

一：box-shadow

Box-shadow值得注意：一个box同时用了两个box-shadow;如下：

box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;

 

做一个案例彻底分析下：

box-shadow: -2px -2px 2px #f00, 5px 5px 5px #164A84;

为了看着明白，特地弄了对比明显的颜色。

色值说明：#f00【红色】, #164A84【蓝色】

X，y值得说明：-2px -2px, 5px 5px；【这么写,阴影是在是坐上和右下】

 

角度和x,y取值的关系表：

x,y的取值 阴影所在的角度 有阴影的两条边是 总结：
+x,+y 右下角 右边和下边 从左上角开始想象：
+x,-y 右上角 右边和上边 X负责左右，正右负左；
-x,+y 左下角 左边和下边 Y负责上下，正下负上；
-x,-y 左上角 左边和上边  

 

       
       
     
     
     

二、display：flex；

Flex浏览器支持情况很差，仅火狐和谷歌通用。Ie10还不支持，手机上的浏览器全军覆没。

兼容写法：

display：-webkit-flex；

display： -moz-flex；

一个flexbox布局是有一个伸缩容器（flex containers）和这个容器里的伸缩内容（flex items）组成。

伸缩容器（flex containers）是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目（flex items）。

三、Flex-direction：row（默认值）；

 

四、Justify-content： center；

 

 

 

 

 

 

注：

本代码纯属学习与练习之用

源代码及博文见掘金地址：https://juejin.im/post/594669d461ff4b006cf132ff

git地址：https://github.com/wj704/wj704.github.io/blob/master/five_game.html

posted @ 2017-06-19 11:56  xing.org1^  阅读(567)  评论(0)  编辑  收藏  举报