标签：小游戏 使用 pat div raw 经历 结对编程 net htm
这次的结对编程项目我选了我目前比较熟悉的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;//设置该局棋盘已经赢了，不可以再走了
}
}
通过这次的结队编程发现了自己在对代码的实际应用里有许多问题，对代码的理解还不够。思路不够清晰，经常要想很久再写下一步。通过这次我想以后更多机会尝试使用这些 代码，要很熟练的掌握它们。
标签：小游戏 使用 pat div raw 经历 结对编程 net htm
原文地址：http://www.cnblogs.com/guo961231/p/7773844.html
