Html5五子棋

时间 2021-01-08
1、效果图
2、代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        var maps = new Array(15);
        for (var i = 0; i < 15; i++) {
            maps[i] = new Array(15);
            for (var j = 0; j < 15; j++) {
                maps[i][j] = 0;
            }
        }

        var isBlack= true;
        // 初始化图片
        var black = new Image();
        var white = new Image();
        black.src = "htm5_canvas/img/black.png";
        white.src = "htm5_canvas/img/white.png";


        var can;
        var ctx;
        // 初始化棋盘
        function init() {
            can = document.getElementById("can");
            ctx = can.getContext("2d");

            ctx.strokeStyle = "#FFF";
            for (var i = 0; i < 15; i++) {
                for (var j = 0; j < 15; j++) {
                    ctx.strokeRect(j * 40, i * 40, 40, 40);
                }
            }
        }

        // 下子
        function play(e) {
            var leftOffset = 11;
            var x = e.clientX - leftOffset;
            var y = e.clientY - 11;

            var col = parseInt((e.clientX - 20) / 40) + 1;
            var row = parseInt((e.clientY - 20) / 40) + 1;


            if (isBlack) {
                ctx.drawImage(black, col * 40 - 20, row * 40 - 20);
                isBlack = false;
            }
            else {
                ctx.drawImage(white, col * 40 - 20, row * 40 - 20);
                isBlack = true
            }
        }

    </script>
</head>
<body onload="init();">
    

        <canvas id="can" width="600" height="600" onclick="play(event);" style="background:url(htm5_canvas/img/bak.jpg)"></canvas>
    
</body>
</html>
3、总结用到的知识点Canvas