课后作业-结对编程项目总结

Posted 2020-10-13

这次的结对编程项目我选了我目前比较熟悉的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;//设置该局棋盘已经赢了，不可以再走了 
            } 
        }

　　

通过这次的结队编程发现了自己在对代码的实际应用里有许多问题，对代码的理解还不够。思路不够清晰，经常要想很久再写下一步。通过这次我想以后更多机会尝试使用这些 代码，要很熟练的掌握它们。