js 五子棋_js实现m*n棋盘上不相邻放棋子-CSDN博客

js 小游戏----五子棋
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: 1px solid lightcoral;
            margin: 50px;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="450" height="450"></canvas>
<script>
    var num = 0;
    var cxt = canvas.getContext("2d");
    var arr = [];
    for (var j = 0; j < 15; j++) {
        arr[j] = [];
        for (var p = 0; p < 15; p++) {
            arr[j][p] = 0;
        }
    }
//    console.log(arr);
    cxt.lineWidth = 1;
    cxt.strokeStyle = "blue";

    /*棋盘横竖线*/
    for (var i = 0; i < 15; i++) {
        cxt.moveTo(15, 15 + i * 30);
        cxt.lineTo(435, 15 + i * 30);
        cxt.stroke();
    }//横线完
    for (var k = 0; k < 15; k++) {
        cxt.moveTo(15 + k * 30, 15);
        cxt.lineTo(15 + k * 30, 435);
        cxt.stroke();
    }//竖线完

    /*棋子制作*/
    function circleH(x, y) {
        cxt.beginPath();
        var grd = cxt.createRadialGradient(15 + x * 30, 15 + y * 30, 0, 15 + x * 30, 15 + y * 30, 12);
        grd.addColorStop(0, "gray");
        grd.addColorStop(1, "black");
        cxt.fillStyle = grd;
        cxt.arc(15 + x * 30, 15 + y * 30, 12, 0, 2 * Math.PI);
        cxt.fill();
    }//第二个下棋的子
    function circleW(x, y) {
        cxt.beginPath();
        var grd = cxt.createRadialGradient(15 + x * 30, 15 + y * 30, 0, 15 + x * 30, 15 + y * 30, 12);
        grd.addColorStop(0, "white");
        grd.addColorStop(1, "gray");
        cxt.fillStyle = grd;
        cxt.arc(15 + x * 30, 15 + y * 30, 12, 0, 2 * Math.PI);
        cxt.fill();
    }//第一个下棋的子

    canvas.onclick = function (e) {
        num++;
        var e2 = e || event;
        var x = Math.round((e2.offsetX - 15) / 30);
        var y = Math.round((e2.offsetY - 15) / 30);
//        console.log(X,Y);
        /*已有棋子的位置不能放棋子*/

        if (arr[x][y] == 0) {
            if (num % 2 == 0) {
                circleH(x,y);
            }
            else {
                circleW(x,y);
            }
            arr[x][y] = 1;
        } else {
            num--;
            alert("这里已经有棋子了");
        }

    };//点击的位置是棋子落下的位置

</script>
</body>
</html>