html5五子棋

测试地址：开始
思路：1，绘制棋盘；2，初始化存储数据 --存储走过的坐标；3，开始游戏–>计算坐标；4，绘制棋子或添加棋子图片；5，判断输赢

绘制15*15的方格子 初始化存储位置

function init() {//初始化画布  建立15*15 的方格
        txt.strokeStyle="#fff";
        for(var i = 0; i < 15; i ++){
            for(var j = 0; j < 15; j ++){
                txt.strokeRect(j*40+10,i*40+10,40,40)
            }
        }

        for (var x = 0; x <= 15; x++) {//矩阵初始化  存储走过的位置  包括 0 和 15
            check[x] = [];
            for (var y = 0; y <= 15; y++) {
                check[x][y] = 0;
            }
        }

    }

计算点击的坐标

function playGame(e){   //开始
        if(isWin){
            $(".wrap").show(200);
            return;
        }

        var x = ((e.clientX-((winWidth-myCanvas.width)/2)) / 40).toFixed(0);//计算鼠标点击位置  四舍五入 取整数
        var y = ((e.clientY-10) / 40).toFixed(0);
        if(check[x][y]!==0){
            alert("不能在此位置下");
            return;
        }

        drawImg(x,y);

    }

绘制棋子

 function drawImg(x,y) {//绘棋
        // console.log(x,y)
        var num;
        if(x>=0 && x<=15 && y>=0 && y<=15){//判断鼠标在区域内点击
            if(whiteGo){//白棋走
                // txt.drawImage(white,x * 40 + 30,y * 40 + 30,20,20);//加白棋图片
                //绘制白棋
                txt.beginPath();
                txt.fillStyle = "white";//填充白色
                txt.arc(x*40+10,y*40+10,10,0,Math.PI*2,false);
                txt.fill();
                whiteGo = false;
                check[x][y] = 1;
                num = 1;
            }else{
                //img,0,0,100,90,50,10,100,90
                // txt.arc(x*40+20,y*40+20,20,0,Math.PI*2,false)
                // txt.drawImage(black,x * 40 + 30,y * 40 + 30,20,20);//加黑棋图片
                //绘制黑棋
                txt.beginPath();
                txt.fillStyle = "black";//填充黑色
                txt.arc(x*40+10,y*40+10,10,0,Math.PI*2,false);
                txt.stroke();
                txt.fill();
                check[x][y] = 2;
                whiteGo = true;
                num = 2;
            }
        }
        isGameOver(num,x,y);
    }

计算结果

function isGameOver(checkNum,x,y) {//判断游戏结束
        var r1 = 0;
        var r2 = 0;
        var r3 = 0;
        var r4 = 0;
        var x = parseInt(x);
        var y = parseInt(y);

        //x,y
        //x,y  x,y-1,y+1,y-2,y+2,y-3,y+3
//y 5  4 3 2 1 0
        //竖直方向  递减
        for(var i = y; i >= 0; i --){
            // console.log(y,i);
            // console.log(checkNum,check[x][i]);
            if(checkNum!==check[x][i]){
                break;
            }else{
                r1 ++;
            }
        }
        //5 5 4 3
        //y 5 5 6 7 8 9 10 11 12 13 14
        //y 15 15
        //竖直方向  递增
        for(var i = y+1; i < check.length; i ++){
            if(checkNum!==check[x][i]){
                break;
            }else{
                r1 ++;
            }
        }
        //水平方向  递减
        //x 5  y 0
        for(var i = x; i >= 0; i --){
            // console.log(checkNum,check[i][y]);
            if(checkNum!==check[i][y]){
                break;
            }else{
                r2 ++;
            }
        }
        //5  6 7 8 9
        //水平方向  递增
        for(var i = x+1; i < check.length; i ++){
            if(checkNum!==check[i][y]){
                break;
            }else{
                r2 ++;
            }
        }

        //交叉方向  左上右下
        //x,y  5,4  5,4  4,3  3,2  2,1  1,0

        for(var i = x, j = y; i >= 0 & j >= 0; i --, j --){
            if(checkNum!==check[i][j]){
                break;
            }else{
                r3++;
            }
        }
//x,y  5,4   6,5  7,6  8,7  9,8 ...
        for(var i = x+1, j = y+1; i < check.length & j < 15; i ++, j ++){
            if(checkNum!==check[i][j]){
                break;
            }else{
                r3++;
            }
        }
//
//        交叉  左下右上
//x,y  5,4  5，4  6,3  7,2  8,1  9,0  x 15
        for(var i = x,j = y; i < check.length & j >= 0; i ++, j--){
            if(checkNum!==check[i][j]){
                break;
            }else{
                r4++;
            }
        }

        //x,y  5,4  4,5  3,6  2,7  1,8  0,9
        for(var i = x-1,j = y+1; i >= 0 & j < check.length; i --, j ++){
            if(checkNum!==check[i][j]){
                break;
            }else{
                r4++;
            }
        }


        if(r1>=5 || r2>=5 || r3>=5 || r4>=5){
            var color = "白棋";
            if(checkNum==2){
                color = "黑棋"
            }
            // alert(color+"胜利");
            $(".wrap").css("left",winWidth/2-100+"px");//左右剧中展示
            $(".wrap span").text(color+"获胜");
            $(".wrap").show(200);
            isWin = true;
        }

    }

源码：https://gitee.com/Cool_Easy/css3/blob/master/goBangPlay.html#