使用纯js的小游戏，五子棋
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>五子棋</title>
6 <style type="text/css">
7 *{
8 padding:0;
9 margin:0;
10 }
11 canvas{
12 margin:10px;
13 border:2px solid #CCCCCC;
14
15 }
16 #box{
17 display:inline-block;
18 position:absolute;
19 margin-top: 200px;
20 margin-left: 100px;
21 }
22 span{
23 font :24px "微软雅黑";
24 display: inline-block;
25 height:50px;
26 }
27 input{
28 margin-top:30px;
29 display:block;
30 width:100px;
31 height: 50px;
32 font:16px "微软雅黑";
33 color:#fff;
34 background-color: #0099cc;
35 }
36
37 </style>
38
39 </head>
40 <body>
41 <canvas width="640" height="640" id="cas"></canvas>
42 <div id = "box">
43 <span id= "txt"></span>
44 <input type = "button" id = "btn" value="重新开始" />
45 </div>
46
47
48 <script type="text/javascript">
49
50 var flag = true;//true代表白棋下的棋子，false 代表黑棋子
51 var isWin = false;
52 var step = 40; //设置每个棋子的高度是40
53 var txt = document.getElementById("txt");
54
55 var btn = document.getElementById("btn");
56
57 var cas = document.getElementById("cas");//画布
58
59 var ctx = cas.getContext("2d");
60 cas.style.backgroundImage = "url(img/an.jpg)";
61 var img_b = new Image();
62 img_b.src = "img/red.png";
63 var img_w = new Image();
64 img_w.src = "img/bg.png";
65 //用二维数组来保存棋盘，0代表没有走过，1代表白棋走过。2代表黑气走过
66 var arr = new Array(16);//声明一个一维数组；
67 for(var i= 0;i<=15;i++){
68 arr[i] = new Array(16);
69 for(var j= 0;j<=15;j++){
70 arr[i][j] = 0;
71
72 }
73 }
74
75
76 //绘制棋盘
77 function drawLine(){
78
79 for(var i= 0;i<cas.width/step;i++){
80 //画竖线
81 ctx.moveTo((i+1)*step,0);
82 ctx.lineTo((i+1)*step,cas.height);
83 //画横线
84 ctx.moveTo(0,(i+1)*step);
85 ctx.lineTo(cas.width,(i+1)*step);
86 ctx.stroke();
87
88 }
89 }
90 //获取鼠标点击的位置。
91 cas.onclick = function(e){
92 //先判断游戏是否结束
93 if(isWin){
94 alert("游戏已经结束，请重新开始");
95 return 0;
96 }
97 //判断棋子显示的地方，四条边上不显示棋子。
98 //鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20）
99 // var x = (e.clientX-10-20)/40 +1;
100 // var y = (e.clientY-10-20)/40 +1;
101 var x = (e.pageX-10-20)/40 +1;
102 var y = (e.pageY-10-20)/40 +1;
103
104 //进行取整来确定棋子最终显示的位置。
105 x = parseInt(x);
106
107 y = parseInt(y);
108 //如果超出棋盘或者在棋盘的边界直接返回，边界上不能画棋子。
109 if(x<=0||x>15||y<=0||y>15){
110 alert("不可以在边界下棋子！");
111 return;
112 }
113
114 //判断这个位置是否已经显示过棋子
115 if(arr[x][y]!=0){
116 alert("这个地方已经有棋子了，不可以重复棋子");
117 return;
118 }
119 //判断显示黑棋还是白棋
120 if(flag){
121 flag= false;//将标志设置为false,表示下次为黑子。
122 drawChess(1,x,y);//调用函数画棋子
123 }else{
124 flag = true;//将标志改为true,表示下次为白棋。
125 drawChess(2,x,y);
126 }
127 }
128
129 //画棋子
130 function drawChess(num,x,y){
131 //根据x和y确定图片显示的位置，让图片显示在十字线的中间。
132 //一个格子为40，图片大小为30，所以40-30/2等于25，所以加上25
133 var x0 = x*step ;
134 var y0 = y*step ;
135 if(num ==1 ){
136
137 ctx.beginPath();
138 ctx.arc(x0,y0,15,0,2*Math.PI);
139 ctx.fillStyle ="#ff2233";
140 //ctx.fillStyle.backgroundImage = "url(img/red.png)";
141 ctx.fill();
142 ctx.closePath();
143 ctx.stroke();
144
145 //ctx.drawImage(img_w,x0,y0);
146 arr[x][y] = 1;//白子
147 }else if(num==2){
148 ctx.beginPath();
149 ctx.arc(x0,y0,15,0,2*Math.PI);
150 ctx.fillStyle ="#008000";
151 //ctx.fillStyle.backgroundImage ="url(img/f.png)";
152 ctx.fill();
153 ctx.closePath();
154 ctx.stroke();
155 //ctx.drawImage(img_b,x0,y0);
156 arr[x][y] = 2;//黑子
157 }
158
159 //调用函数判断输赢
160 judge(num,x,y);
161 }
162
163 function judge(num,x,y){
164 //左右方向，上下方向，左上右下，左下右上
165 var n1=0 , n2 = 0, n3= 0, n4 = 0;
166 //左右方向
167 for(var i=x ;i>0;i--){
168 if(arr[i][y]!=num){
169 break;
170 }
171 n1++;
172 }
173 for(var i= x+1;i<=15;i++){
174 if(arr[i][y]!=num){
175 break;
176 }
177 n1++;
178 }
179 //上下方向。
180 for(var j=y ;j>0;j--){
181 if(arr[x][j]==num){
182 n2++;
183 }else{
184 break;
185 }
186 }
187 for(var j= y+1;j<=15;j++){
188
189 if(arr[x][j]==num){
190 n2++;
191 }else{
192 break;
193 }
194 }
195 //左上到右下
196 for(var i= x,j= y;i>=0,j>=0;i--,j--){
197 if(i<0||j<0||arr[i][j]!=num){
198 break;
199 }
200 n3++;
201 }
202 for(var i= x+1,j=y+1;i<=15,j<=15;i++,j++){
203 if(i>15||j>15||arr[i][j]!=num){
204 break;
205 }
206 n3++;
207 }
208 //左下到右上
209 for(var i= x,j= y;i>0,j<=15;i--,j++){
210 if(i<0||j>=15||arr[i][j]!=num){
211 break;
212 }
213 n4++;
214 }
215 for(var i= x+1,j=y-1;i<=15,j>=0;i++,j--){
216 if(i>=15||j<0||arr[i][j]!=num){
217 break;
218 }
219 n4++;
220 }
221 //用一个定时器来延时，否则会显示对话框，然后才显示棋子。
222 //alert(n1+"--"+n2+"--"+n3+"--"+n4);
223 var str ;
224 if(n1>=5||n2>=5||n3>=5||n4>=5){
225 if(num==1){
226 alert("恭喜白棋夺冠！");
227 str = "白棋赢了，游戏结束";
228 }else if(num ==2){
229 alert("恭喜黑棋夺冠！");
230 str = "黑棋赢了，游戏结束";
231 }
232 txt.innerHTML = str;
233 isWin = true;
234 }
235 }
236
237 //重新开始
238 btn.onclick = function(){
239 falg = true;
240 isWin = false;
241
242 for(var i= 0 ;i<=15;i++){
243 for(var j= 0;j<=15;j++){
244 arr[i][j] =0;
245 }
246 }
247 ctx.clearRect(0,0,640,640);
248 txt.innerHTML = "";
249 drawLine();
250 }
251 drawLine();
252 </script>
253 </body>
254 </html>
现在可以开始玩喽！