JavaScript+canvas实现五子棋游戏

本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下

效果截图：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>五子棋</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            position: relative;
            background-color: #336;
            width: 100%;
            height: 100%;
        }
        p{
            font-size: 20px;
            color: #fff;
            text-align: center;
            padding-top: 20px;
        }
        #canvas{
            position: absolute;
            display: block;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: #fff;
            width: 480px;
            height: 480px;
        }
    </style>
</head>
<body>
    <p id="order">该黑棋落子了！</p>
    <canvas id="canvas" width="480" height="480"></canvas>
</body>
<script>
    var p = document.getElementById("order");
    var canvas = document.querySelector("#canvas");
    var context = canvas.getContext('2d');
    var cw,ch,count=0,
        t = canvas.offsetTop,
        l = canvas.offsetLeft;
    var state = new Array();
    ~~function setSize(){
        window.onresize = arguments.callee;
        cw = window.innerWidth;
        ch = window.innerHeight;
        canvas.width = cw;
        canvas.height = ch;
    }
 
    function initArray(state){ 
        for(var i=0;i<15;i++){
            state[i] = new Array();
            for(var j=0;j<15;j++){
                state[i][j] = -1;
            }
        }
    }
 
    function init(){
        //画棋盘
        context.beginPath();
        for(var i=1;i<16;i++){
            context.moveTo(30*i,30);
            context.lineTo(30*i,450);
        }
        for(var i=1;i<16;i++){
            context.moveTo(30,30*i);
            context.lineTo(450,30*i);
        }
        context.stroke();
        //画棋点
        draw(240,240,3);
        draw(120,120,3);
        draw(360,120,3);
        draw(120,360,3);
        draw(360,360,3);    
    }
 
    //画空心圆
    function draw(x,y,r){
        context.beginPath();
        context.arc(x,y,r,0,Math.PI*2);
        context.stroke();
    }
 
    function Chess(){};
 
    Chess.prototype = {
        //画棋子
        drawChess: function(x,y,r){
            this.x = x;
            this.y = y;
            this.r = r;
            if(count == 0){
                context.fillStyle = "black";
                count = 1;
            }
            else{
                context.fillStyle = "white";
                count = 0;
            }
            context.beginPath();
            context.arc(x,y,r,0,Math.PI*2);
            context.fill();
        },
        //判断胜负
        rule: function(ix,iy,s){
            var hc=0,vc=0,rdc=0,luc=0;
 
            //horizontal
            for(var i=ix;i<15;i++){
                if(state[i][iy] != s){
                    break;
                }
                hc++;
            }
            for(var i=ix-1;i>=0;i--){
                if(state[i][iy] != s){
                    break;
                }
                hc++;
            }
            //vertical
            for(var j=iy;j<15;j++){
                if(state[ix][j] != s){
                    break;
                }
                vc++;
            }
            for(var j=iy-1;j>=0;j--){
                if(state[ix][j] != s){
                    break;
                }
                vc++;
            }
        
            //rightdown
            for(var i=ix,j=iy;i<15 && j<15;i++,j++){
                if(state[i][j] != s){
                    break;
                }
                rdc++;
            }
            for(var i=ix-1,j=iy-1;i>=0 && j>=0;i--,j--){
                if(state[i][j] != s){
                    break;
                }
                rdc++;
            }
 
            //leftup
            for(var i=ix,j=iy;i<15 && j>=0;i++,j--){
                if(state[i][j] != s){
                        break;
                    }
                luc++;
            }
            for(var i=ix-1,j=iy+1;i>=0 && j<15;i--,j++){
                if(state[i][j] != s){
                    break;
                }
                luc++;
            }
 
            if(hc == 5 || vc == 5 || rdc == 5 || luc == 5){
                if(s == 0){
                    alert("Black Win!");
                }
                else{
                    alert("White Win!");
                }
 
                //清空画布并初始化画布和棋子状态
                context.clearRect(0,0,480,480);
                p.innerText = "该黑棋落子了！";
                init();
                initArray(state);
            }
        }
 
    }
 
    //点击事件
    canvas.onclick = function(e){
        var w,h;
        w = e.pageX - l;
        h = e.pageY - t;
        w = parseInt((w+15)/30) * 30;
        h = parseInt((h+15)/30) * 30;
        var i = w/30-1;
        var j = h/30-1;
        //棋子冲突检查
        if(state[i][j] == -1){
            var s = count;   
            state[i][j] = count;
            var chess = new Chess();
            chess.drawChess(w,h,14);
            draw(w,h,14);
            if(s == 0){
                p.innerText = "该白棋落子了！";
            }
            else{
                p.innerText = "该黑棋落子了！";
            }
            chess.rule(i,j,s);
        }
    }
    init();
    initArray(state);
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。