本学期软件工程的做业是做一个项目，因为自己相对来说比较熟练使用h5，所以选择了比较简单的五子棋游戏来开发，经历了几周的开发，这个简易的五子棋终于开发完成。

开发过程中，由于h5的画板技术是在之前的学习中没有深入研究，具体的用法都快忘了，所以我和队友用了几天的时间通过w3school，菜鸟教程，和一些博客网站，来进一步学习这方面知识。差不多了之后才开始编写代码。

 1 function drawRect() {//页面加载完毕调用函数，初始化棋盘 
 2             canvas = document.getElementById("canvas"); 
 3             context = canvas.getContext("2d"); 
 4   
 5             for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线 
 6                 context.beginPath(); 
 7                 context.moveTo(0, i); 
 8                 context.lineTo(640, i); 
 9                 context.closePath(); 
10                 context.stroke(); 
11   
12                 context.beginPath(); 
13                 context.moveTo(i, 0); 
14                 context.lineTo(i, 640); 
15                 context.closePath(); 
16                 context.stroke(); 
17             } 
18         }
View Code

 

鼠标点击事件：

function play(e) {//鼠标点击时发生 
            var x = parseInt((e.clientX - 20) / 40);
            var y = parseInt((e.clientY - 20) / 40); 
  
            if (chessData[x][y] != 0) {//判断该位置是否被下过了 
                alert("你不能在这个位置下棋"); 
                return; 
            } 
  
            if (isWhite) { 
                isWhite = false; 
                drawChess(1, x, y); 
            } 
            else { 
                isWhite = true; 
                drawChess(2, x, y); 
            } 
  
        }
View Code

输赢判断：

 1 function judge(x, y, chess) {//判断该局棋盘是否赢了 
 2             var count1 = 0; 
 3             var count2 = 0; 
 4             var count3 = 0; 
 5             var count4 = 0; 
 6   
 7             //左右判断 
 8             for (var i = x; i >= 0; i--) { 
 9                 if (chessData[i][y] != chess) { 
10                     break; 
11                 } 
12                 count1++; 
13             } 
14             for (var i = x + 1; i < 15; i++) { 
15                 if (chessData[i][y] != chess) { 
16                     break; 
17                 } 
18                 count1++; 
19             } 
20             //上下判断 
21             for (var i = y; i >= 0; i--) { 
22                 if (chessData[x][i] != chess) { 
23                     break; 
24                 } 
25                 count2++; 
26             } 
27             for (var i = y + 1; i < 15; i++) { 
28                 if (chessData[x][i] != chess) { 
29                     break; 
30                 } 
31                 count2++; 
32             } 
33             //左上右下判断 
34             for (var i = x, j = y; i >= 0, j >= 0; i--, j--) { 
35                 if (chessData[i][j] != chess) { 
36                     break; 
37                 } 
38                 count3++; 
39             } 
40             for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) { 
41                 if (chessData[i][j] != chess) { 
42                     break; 
43                 } 
44                 count3++; 
45             } 
46             //右上左下判断 
47             for (var i = x, j = y; i >= 0, j < 15; i--, j++) { 
48                 if (chessData[i][j] != chess) { 
49                     break; 
50                 } 
51                 count4++; 
52             } 
53             for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) { 
54                 if (chessData[i][j] != chess) { 
55                     break; 
56                 } 
57                 count4++; 
58             } 
59   
60             if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) { 
61                 if (chess == 1) { 
62                     alert("白棋赢了"); 
63                 } 
64                 else { 
65                     alert("黑棋赢了"); 
66                 } 
67                 isWell = true;//设置该局棋盘已经赢了，不可以再走了 
68             } 
69         }
View Code

完成图：

通过完成这个项目，发现自己还有很多的不足，对于前端还有好多东西需要去学习，对于js的掌握也不是特别熟练，日后还需要努力很多！