JS——五子棋小游戏

JS——五子棋小游戏

可以在这里玩哦http://wuhlan3.gitee.io/web/

  1. 使用canvas绘制棋盘
  2. 使棋子可以显示
  3. 使棋子可以落在棋盘交点上
  4. 防止棋子落在已有位置
  5. 判断游戏输赢
  6. 重置棋盘
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS 五子棋</title>
    <script >window.onload = function() {
        //1.拿到画布
        var board = document.getElementById("board");
        //2.得到画笔
        var pen = board.getContext("2d");
        //3.绘制棋盘
        for(var i = 0; i < 15; i++){
            pen.beginPath();//落笔
            pen.moveTo(15,15 + i*30); // 起始点
            pen.lineTo(435,15 + i*30); // 结束点
            pen.closePath(); //提笔
            pen.stroke(); //真正的实现绘制
        }
        for(var i = 0; i < 15; i++){
            pen.beginPath();//落笔
            pen.moveTo(15+ i*30,15 ); // 起始点
            pen.lineTo(15 + i*30,435); // 结束点
            pen.closePath(); //提笔
            pen.stroke(); //真正的实现绘制
        }
        //4.准备好棋子
        var black_chess = new Image(15,15);
        black_chess.src = "img/黑子.png";
        black_chess.onload = function(){
            black_chess.width = 15;
            
        }
        var white_chess = new Image(15,15);
        white_chess.src = "img/白子.png";
        
        board.onclick = function(event){
    
            if(flag == 1){
                alert("已经结束，棋盘将会重置");
                window.location.reload();
            }
            //获取坐标
            var x = event.clientX;
            var y = event.clientY;
            //使落在交点上
            var xx = parseInt(x / 30);
            var yy = parseInt(y / 30);
            //在此位置上显示棋子
            drawChess(xx,yy);
        }
        //5.实现交替下棋
        var isBlack = true;
        var flag = 0;
        function drawChess(xx,yy){
            if(arr[xx][yy])return;
            if(isBlack){
                pen.drawImage(black_chess,xx*30,yy*30,30,30);
                isBlack = false;
                arr[xx][yy] = 1;
                if(isBlack == false && isWin(xx,yy)){
                    setTimeout(function() {alert("黑方胜利！");},0.1);
                    flag = 1;
                }
            }else{
                pen.drawImage(white_chess,xx*30,yy*30,30,30);
                isBlack = true;
                arr[xx][yy] = 2;
                if(isWin(xx,yy)){
                    setTimeout(function() {alert("白方胜利！");},0.1);
                    flag = 1;
                }
            }
        }
        
        //6.防止棋子下到同一个地方
        var arr = new Array();
        for(var i = 0; i < 15; i ++){
            arr[i] = new Array();
            for(var j = 0; j < 15; j ++ ){
                arr[i][j] = 0;//黑子为 1， 白子为 2
            }
        }
        //7.判断输赢
        function isWin(xx,yy){
            var sum = 1;
            //判断左右
            for(var i = 1; i <= 4 ; i++){
                if(xx + i == 15)break;
                if(arr[xx][yy] == arr[xx+i][yy]){
                    sum++;
                }else{
                    break;
                }
            }
            for(var i = 1; i <= 4 ; i++){
                if(xx - i == -1)break;
                if(arr[xx][yy] == arr[xx-i][yy]){
                    sum++;
                }else{
                    break;
                }
            }
            if(sum >= 5)return true;
            sum = 1;
            //判断上下  
            for(var i = 1; i <= 4 ; i++){
                if(yy + i == 15)break;
                if(arr[xx][yy] == arr[xx][yy+i]){
                    sum++;
                }else{
                    break;
                }
            }
            for(var i = 1; i <= 4 ; i++){
                if(yy - i == -1)break;
                if(arr[xx][yy] == arr[xx][yy-i]){
                    sum++;
                }else{
                    break;
                }
            }
            if(sum >= 5)return true;
            sum = 1;
            //判断左斜线
            for(var i = 1; i <= 4 ; i++){
                if(xx + i == 15 || yy + i == 15)break;
                if(arr[xx][yy] == arr[xx+i][yy+i]){
                    sum++;
                }else{
                    break;
                }
            }
            for(var i = 1; i <= 4 ; i++){
                if(xx - i == -1 || yy - i == -1)break;
                if(arr[xx][yy] == arr[xx-i][yy-i]){
                    sum++;
                }else{
                    break;
                }
            }
            if(sum >= 5)return true;
            sum = 1;
            //判断右斜线
            for(var i = 1; i <= 4 ; i++){
                if(xx - i == -1 || yy + i == 15)break;
                if(arr[xx][yy] == arr[xx-i][yy+i]){
                    sum++;
                }else{
                    break;
                }
            }
            for(var i = 1; i <= 4 ; i++){
                if(xx + i == 15 || yy - i == -1)break;
                if(arr[xx][yy] == arr[xx+i][yy-i]){
                    sum++;
                }else{
                    break;
                }
            }
            if(sum >= 5)return true;
            return false;
        }
    }
    </script>
</head>
<body>
    <canvas id = "board" width = "450px" height = "450px" style = "background: url(img/board.jpg) repeat" >

    </canvas>
</body>
</html>
#Web
JS——五子棋小游戏
https://wuhlan3.github.io/2021/02/20/JS——五子棋小游戏/
Author
Wuhlan3
Posted on
February 20, 2021
Licensed under