这次的结对编程项目我选了我目前比较熟悉的html5编辑的一个网页五子棋小游戏。我跟我的同伴用了几周的时间完成了这个网页小游戏的开发。
一开始项目开发遇到了无从下手的境地,但是我们通过去网上找资料,经历了一周左右的熟悉,终于才把项目推上正规。
一开始先画出棋盘。
function drawRect() {//页面加载完毕调用函数,初始化棋盘 canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线 context.beginPath(); context.moveTo(0, i); context.lineTo(640, i); context.closePath(); context.stroke(); context.beginPath(); context.moveTo(i, 0); context.lineTo(i, 640); context.closePath(); context.stroke(); } }
通过论坛,贴吧学会了使用鼠标点击事件
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); } }
当然,最重要的判断输赢是一定要有的。
function judge(x, y, chess) {//判断该局棋盘是否赢了 var count1 = 0; var count2 = 0; var count3 = 0; var count4 = 0; //左右判断 for (var i = x; i >= 0; i--) { if (chessData[i][y] != chess) { break; } count1++; } for (var i = x + 1; i < 15; i++) { if (chessData[i][y] != chess) { break; } count1++; } //上下判断 for (var i = y; i >= 0; i--) { if (chessData[x][i] != chess) { break; } count2++; } for (var i = y + 1; i < 15; i++) { if (chessData[x][i] != chess) { break; } count2++; } //左上右下判断 for (var i = x, j = y; i >= 0, j >= 0; i--, j--) { if (chessData[i][j] != chess) { break; } count3++; } for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) { if (chessData[i][j] != chess) { break; } count3++; } //右上左下判断 for (var i = x, j = y; i >= 0, j < 15; i--, j++) { if (chessData[i][j] != chess) { break; } count4++; } for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) { if (chessData[i][j] != chess) { break; } count4++; } if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) { if (chess == 1) { alert("白棋赢了"); } else { alert("黑棋赢了"); } isWell = true;//设置该局棋盘已经赢了,不可以再走了 } }
通过这次的结队编程发现了自己在对代码的实际应用里有许多问题,对代码的理解还不够。思路不够清晰,经常要想很久再写下一步。通过这次我想以后更多机会尝试使用这些 代码,要很熟练的掌握它们。