js小游戏：五子棋

使用纯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>

现在可以开始玩喽！

 

posted @ 2017-09-11 21:06  溪山晴雪  阅读(349)  评论(0)  编辑  收藏  举报