用js实现五子棋

来源：互联网发布：淘宝企业店铺的要求编辑：程序博客网时间：2024/06/06 06:41
思路：
1、先用canvas画五子棋的棋盘
2、获取鼠标点击的位置
3、根据鼠标点击的位置判断，并画棋子
4、根据下的棋子判断是否赢了
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            padding: 0;            margin: 0;        }        canvas {            margin: 10px;            border: 2px solid #000;        }        #box {            display: inline-block;            position: absolute;            margin-top: 200px;            margin-left: 100px;        }        span {            font: 24px "微软雅黑";            display: inline-block;            height: 50px;        }        input {            margin-top: 30px;            display: block;            width: 100px;            height: 50px;            font: 16px "微软雅黑";            color: #fff;            background-color: #0099cc;        }    </style></head><body><canvas width="640" height="640" id="cas">    您的浏览器不支持canvas，请升级到最新的浏览器</canvas><div id="box">    <span id="txt"></span>    <input type="button" id="btn" value="重新开始"/></div><script>    var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子    var isWin = false; //判断是否结束，true结束，false没有结束    var step = 40;  //设置每个格子的宽高都是40    var txt = document.getElementById("txt");    var btn = document.getElementById("btn");    var cas = document.getElementById("cas");// 获取画布对象    var ctx = cas.getContext("2d");    //画布上下文//    创建图片对象    var img_b = new Image();    img_b.src = "imgs/b.png";//设置黑棋图片路径    var img_w = new Image();    img_w.src = "imgs/w.png";//设置白棋图片路径//    用二维数组来保存棋盘，0代表没有走过，1为白棋走过，2为黑棋走过    var arr = new Array(15);    //声明一个一维数组    for (var i = 0; i < 15; i++) {        arr[i] = new Array(15); //每个值再声明一个一维数组，这样就组成了一个二维数组        for (var j = 0; j < 15; j++) {            arr[i][j] = 0;        }    }    //绘制棋盘    function drawLine() {        for (var i = 0; i < cas.width / step; i++) {            // 画竖线            ctx.moveTo((i + 1) * step, 0);            ctx.lineTo((i + 1) * step, cas.height);            // 画横线            ctx.moveTo(0, (i + 1) * step);            ctx.lineTo(cas.width, (i + 1) * step);            ctx.stroke();        }    }    //获取鼠标点击的位置    cas.onclick = function (e) {        // 先判断游戏是否结束        if (isWin) {            alert("游戏已经结束，请刷新重新开始！");            return 0;        }        //判断棋子显示的地方，四条边上不显示棋子，        //鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20）        var x = (e.clientX - 10 - 20) / 40;        var y = (e.clientY - 10 - 20) / 40;        //进行取整来确定棋子最终显示的区域        x = parseInt(x);        y = parseInt(y);        //如果超出棋盘或者在棋盘边界直接返回，边界上不能画棋子        if(x < 0 || x >= 15 || y < 0 || y >= 15) {            return;        }        //进行判断该位置是否已经显示过棋子        if (arr[x][y] != 0) {            alert("你不能在这个位置下棋");            return;        }        // 判断是显示黑子还是白子        if (flag) {//白子            flag = false; //将标志置为false,表示下次为黑子            drawChess(1, x, y); //调用函数来画棋子        } else {//黑子            flag = true; //将标志置为true,表示下次为白子            drawChess(2, x, y); //调用函数来画棋子        }    }    //画棋子    function drawChess(num, x, y) {        //根据x和y确定图片显示位置,让图片显示在十字线中间，因为一个格子为40，图片大小为30，所以40-30/2等于25，所以需要加上25        var x0 = x * step + 25;        var y0 = y * step + 25;        if (num == 1) {            //绘制白棋            ctx.drawImage(img_w, x0, y0);            arr[x][y] = 1;  //白子        } else if (num == 2) {            // 绘制黑棋            ctx.drawImage(img_b, x0, y0);            arr[x][y] = 2;  //黑子        }        //调用函数判断输赢        judge(num, x, y);    }    //判断输赢    function judge(num, x, y) {        var n1 = 0, //左右方向                n2 = 0, //上下方向                n3 = 0, //左上到右下方向                n4 = 0; // 右上到左下方向        //***************左右方向**********************************        //先从点击的位置向左寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环        for (var i = x; i >= 0; i--) {            if (arr[i][y] != num) {                break;            }            n1++;        }        //然后从点击的位置向右下一个位置寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环        for (var i = x + 1; i < 15; i++) {            if (arr[i][y] != num) {                break;            }            n1++;        }        //****************上下方向******************************        for (var i = y; i >= 0; i--) {            if (arr[x][i] != num) {                break;            }            n2++;        }        for (var i = y + 1; i < 15; i++) {            if (arr[x][i] != num) {                break;            }            n2++;        }        //****************左上到右下斜方向******************************        for(var i = x, j = y; i >=0, j >= 0; i--, j--) {            if (i < 0 || j < 0 || arr[i][j] != num) {                break;            }            n3++;        }        for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) {            if (i >= 15 || j >= 15 || arr[i][j] != num) {                break;            }            n3++;        }        //****************右上到左下斜方向******************************        for(var i = x, j = y; i >= 0, j < 15; i--, j++) {            if (i < 0 || j >= 15 || arr[i][j] != num) {                break;            }            n4++;        }        for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) {            if (i >= 15 || j < 0 || arr[i][j] != num) {                break;            }            n4++;        }        //用一个定时器来延时，否则会先弹出对话框，然后才显示棋子        var str;        if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) {            if (num == 1) {//白棋                str = "白棋赢了，游戏结束！"            } else if (num == 2) {//黑棋                str = "黑棋赢了，游戏结束！"            }            txt.innerHTML = str;            isWin = true;        }    }    //重新开始    btn.onclick = function() {        flag = true;        isWin = false;        for (var i = 0; i < 15; i++) {            for (var j = 0; j < 15; j++) {                arr[i][j] = 0;            }        }        ctx.clearRect(0, 0, 640, 640);        txt.innerHTML = "";        drawLine();    }    drawLine();</script></body></html>
代码链接地址五子棋demo
0 0