本学期软件工程的做业是做一个项目,因为自己相对来说比较熟练使用h5,所以选择了比较简单的五子棋游戏来开发,经历了几周的开发,这个简易的五子棋终于开发完成。
开发过程中,由于h5的画板技术是在之前的学习中没有深入研究,具体的用法都快忘了,所以我和队友用了几天的时间通过w3school,菜鸟教程,和一些博客网站,来进一步学习这方面知识。差不多了之后才开始编写代码。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
鼠标点击事件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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); } }
输赢判断:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
完成图:
通过完成这个项目,发现自己还有很多的不足,对于前端还有好多东西需要去学习,对于js的掌握也不是特别熟练,日后还需要努力很多!