js实现简易五子棋游戏

发表于   |   分类于   |   阅读次数

js实现简易五子棋游戏。

一.源码

1.html文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <button id="btn">新游戏</button>
    <canvas id="chessboard" width="450" height="450"></canvas>
    <script src="js/main.js"></script>
</body>
</html>
2.css样式表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body{
    margin: 0;
    background-color: #ccc;
}

#btn{
    display:block;
    margin:20px auto;
    width:100px;
    padding:10px 10px;
    background-color:#8f7a66;
    font-family:Arial;
    color:white;
    outline: none;
    border-radius:10px;
    text-decoration:none;
}

canvas{
    /* width:450px;
    height:450px;  */  /*canvas标签类似图片，需要修改尺寸，而不是设置样式*/
    display: block;
    margin: 30px auto;
    background-color: #8f7a66;
    /* box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9; */
}
3.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
var btn = document.getElementById("btn");
var canvas = document.getElementById("chessboard");
//var canvas = document.querySelector(".an");
var context = canvas.getContext("2d");
var chessMapArr = [];//记录棋盘落子情况
var chessColor = ["black", "white"];//棋子颜色
var step = 0;//记录当前步数
var flag = false;//判断游戏是否结束
//输赢检查方向模式
var checkMode = [
    [1,0],//水平
    [0,1],//竖直
    [1,1],//左斜线
    [1,-1],//右斜线
];


//新游戏按钮响应函数
btn.addEventListener("click",function(){
    startGame();//开始新游戏
})

//开始新游戏
function startGame() {
    //初始化棋盘数组
    for(var i=0; i<14; i++){
       chessMapArr[i] = [];
       for(var j=0; j<14; j++){
          chessMapArr[i][j] = 0;
        }    
    }
    //清空棋盘
    cleanChessBoard();
    //绘制棋盘
    drawChessBoard();
    //重置游戏是否结束标志
    over = false;
}

//绘制棋盘
function drawChessBoard() {
    for (var i = 0; i < 14; i++) {
        //context.strokeStyle = "#BFBFBF";
        context.beginPath();
        context.moveTo((i+1) * 30, 30);
        context.lineTo((i+1) * 30, canvas.height - 30);
        context.closePath();
        context.stroke();
        context.beginPath();
        context.moveTo(30, (i+1) * 30);
        context.lineTo(canvas.width - 30, (i+1) * 30);
        context.closePath();
        context.stroke();
    }
}

//清除棋盘
function cleanChessBoard() {
    context.fillStyle = "#8f7a66";
    context.fillRect(0, 0, canvas.width, canvas.height);
}


//绘制棋子
function drawChess(x,y,color) {
    context.beginPath();
    context.arc(x,y,15,0,Math.PI*2,false);
    context.closePath();
    context.fillStyle = color;
    context.fill();
    //context.stroke();
}

//下棋落子(canvas点击响应函数)
canvas.addEventListener("click",function(e){
    //判断游戏是否结束
    if (flag) {
        alert("Game Over~");
        return;
    }

    //判断点击范围是否越出棋盘
    if(e.offsetX < 30 || e.offsetX > 420 || e.offsetY < 30 || e.offsetY > 420){
       return;
    }
    var dx = Math.floor((e.offsetX + 15) / 30 ) * 30;
    var dy = Math.floor((e.offsetY + 15) / 30 ) * 30;
    if(chessMapArr[dx/30-1][dy/30-1] == 0){
        drawChess(dx,dy,chessColor[step % 2]);//落下棋子
        chessMapArr[dx/30-1][dy/30-1]= chessColor[step % 2];
        //console.log(dx/30-1,dy/30-1, chessColor[step % 2]);//打印当前棋子位置与颜色
        //检查当前玩家是否赢了游戏
        for(var i=0;i<4;i++){
            checkWin(dx/30-1,dy/30-1, chessColor[step % 2],checkMode[i]);
        }
        step++;
    } 
});


//胜负判断函数
function checkWin(x,y,color,mode)
{
    var count = 1;//记录分数
    for(var i=1;i<5;i++){
        if(chessMapArr[x + i * mode[0]]){
            if(chessMapArr[x + i * mode[0]][y + i * mode[1]] == color){
                count++;
            }else{
                break;
            }
        }
    }
    
    for(var j=1;j<5;j++){
        if(chessMapArr[x - j * mode[0]]){
            if(chessMapArr[x - j * mode[0]][y - j * mode[1]] == color){
                count++;
            }else{
                break;
            }
        }
    }
    if(mode == checkMode[0])
    { console.log("水平方向有： " + count + "个" + color);}
    if(mode == checkMode[1])
    { console.log("竖直方向有： " + count + "个" + color);}
    if(mode == checkMode[2])
    { console.log("左斜方向有： " + count + "个" + color);}
    if(mode == checkMode[3])
    { console.log("右斜方向有： " + count + "个" + color);}
   
    if(count >= 5){
        alert(color + " you habe win!" + "帅~");
        // 游戏结束
        flag = true;
    }
}

二.效果展示

五子棋实现效果展示1
五子棋实现效果展示

三.参考

b站五指棋小游戏

-------------本文结束感谢您的阅读-------------