单机双人五子棋canvas版

废话少人，直接贴代码了，在线浏览地址 

http://i.irenren.net/wuziqi.html

转载请注明原文地址

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>双人五子棋游戏</title>
  6     <style>
  7         *{
  8             padding:0;
  9             margin:0
 10         }
 11         body {
 12             background: #dddddd;
 13         }
 14 
 15 
 16 
 17 
 18     </style>
 19 </head>
 20 <body>
 21 
 22 <div style="background:url(bg.jpg); width:650px;">
 23     <div style="line-height:46px;font-size:26px;margin-left:25px;">
 24         <span>双人五子棋游戏</span>
 25         <button style="width:120px;margin-left:10px;" onclick="initGame()">重新开始</button>
 26         <button style="width:120px;"  onclick="undo()">悔棋</button>
 27     </div>
 28 
 29     <canvas id="canvas" style="cursor: pointer;" onclick="play(event)" onmousemove="mouse(event)" width="640" height="640"></canvas>
 30 </div>
 31 
 32 
 33 
 34 <script>
 35     var canvas        = document.getElementById('canvas'),
 36         context       = canvas.getContext('2d'),gridWidth,img_b,img_a,isWhite, isWell, gameDatas, gameQueue,
 37         limit         = 15,
 38         length        = 600,
 39         margin        = 16;
 40 
 41     init();
 42 
 43 
 44     function init(){
 45         img_a = new Image();
 46         img_a.src = 'white.png';
 47         img_b = new Image();
 48         img_b.src = "black.png";
 49         initGame();
 50     }
 51 
 52     function initGame(){
 53         isWhite       = false;
 54         isWell        = false;
 55         gameDatas     = [];
 56         gameQueue     = [];
 57         gridWidth     = parseInt(length / limit) ;
 58         drawRect();
 59         for(var i=0; i< limit; i++){
 60             gameDatas[i] = [];
 61             for(var j=0; j< limit; j++){
 62                 gameDatas[i][j] = 0;
 63             }
 64         }
 65     }
 66 
 67     function getOffset(event){
 68         var evt =event||window.event;
 69         var srcObj = evt.target || evt.srcElement;
 70         if (evt.offsetX){
 71             return {x:evt.offsetX,y: evt.offsetY};
 72         }else{
 73             var rect = srcObj.getBoundingClientRect();
 74             var clientx = evt.clientX;
 75             var clienty = evt.clientY;
 76             return {x: clientx - rect.left, y: clienty - rect.top};
 77         }
 78     }
 79 
 80     function mouse(e){
 81         var xy = getOffset(e);
 82         var x = getLocation(xy.x - margin);
 83         var y = getLocation(xy.y - margin);
 84         if(x === false || y === false){
 85             canvas.style.cursor = "auto";
 86         }else{
 87             canvas.style.cursor = 'pointer';
 88         }
 89     }
 90 
 91     function play(e) {
 92 
 93         if(isWell){
 94             alert('游戏已结束');
 95             return;
 96         }
 97 
 98         if ( e && e.preventDefault )
 99             e.preventDefault();
100         else
101             window.event.returnValue = false;
102 
103         var xy = getOffset(e);
104 
105         var x = getLocation(xy.x - margin);
106         var y = getLocation(xy.y - margin);
107         if( x === false || y === false){
108             return;
109         }
110         if (isWhite) {
111             isWhite = false;
112             drawChess(1, x, y);
113         }
114         else {
115             isWhite = true;
116             drawChess(2, x, y);
117         }
118 
119     }
120 
121     function getLocation(x){
122         var num,index;
123         x = num = (x-margin)/gridWidth + "";
124         index = x.indexOf(".");
125         if(index === -1){
126             return false;
127         }
128         x = x.substr(index+1, 1);
129         if(x < 4){
130             return false;
131         }
132 
133         return parseInt(num);
134     }
135 
136     //获得五子棋坐标值
137     function getCoor(x){
138         var width = 22;
139         return x * gridWidth + margin + width;
140     }
141 
142 
143 
144     function drawChess(chess, x, y) {
145         if(gameDatas[x][y] != 0){
146             return;
147         }else if (x >= 0 && x < limit && y >= 0 && y < limit){
148             gameQueue.push([x, y, chess]);
149             gameDatas[x][y] = chess;
150             refresh();
151         }
152         judge(x, y , chess);
153     }
154 
155     function refresh(){
156         drawRect();
157         for(var i=0; i< limit; i++){
158             for(var j=0; j<limit; j++){
159                 if(gameDatas[i][j] == 1){
160                     context.drawImage(img_a, getCoor(i), getCoor(j));
161                 }else if(gameDatas[i][j] == 2){
162                     context.drawImage(img_b, getCoor(i), getCoor(j));
163                 }
164             }
165         }
166 
167     }
168 
169     function judge(x, y, chess) {//判断该局棋盘是否赢了
170         var count1 = 0;
171         var count2 = 0;
172         var count3 = 0;
173         var count4 = 0;
174 
175         //左右判断
176         for (var i = x; i >= 0; i--) {
177             if (gameDatas[i][y] != chess) {
178                 break;
179             }
180             count1++;
181         }
182         for (var i = x + 1; i < 15; i++) {
183             if (gameDatas[i][y] != chess) {
184                 break;
185             }
186             count1++;
187         }
188         //上下判断
189         for (var i = y; i >= 0; i--) {
190             if (gameDatas[x][i] != chess) {
191                 break;
192             }
193             count2++;
194         }
195         for (var i = y + 1; i < 15; i++) {
196             if (gameDatas[x][i] != chess) {
197                 break;
198             }
199             count2++;
200         }
201         //左上右下判断
202         for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
203             if (gameDatas[i][j] != chess) {
204                 break;
205             }
206             count3++;
207         }
208         for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
209             if (gameDatas[i][j] != chess) {
210                 break;
211             }
212             count3++;
213         }
214         //右上左下判断
215         for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
216             if (gameDatas[i][j] != chess) {
217                 break;
218             }
219             count4++;
220         }
221         for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
222             if (gameDatas[i][j] != chess) {
223                 break;
224             }
225             count4++;
226         }
227 
228         if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
229             if (chess == 1) {
230                 alert("白棋赢了");
231             }
232             else {
233                 alert("黑棋赢了");
234             }
235             isWell = true;//设置该局棋盘已经赢了，不可以再走了
236         }
237     }
238 
239     function undo(){
240         if(gameQueue.length > 0){
241             isWhite = !isWhite;
242             var obj = gameQueue.pop();
243             gameDatas[obj[0]][obj[1]] = 0;
244             refresh();
245         }
246     }
247 
248     function drawRect() {
249         var width = limit * gridWidth + margin;
250         var q = 0;
251         context.clearRect(0,0, width, width);
252         for (var i = margin; i <=width; i += gridWidth) {
253             if(q > limit){
254                 break;
255             }
256 
257             q++;
258             context.strokeStyle = '#eee';
259             context.beginPath();
260             context.moveTo(margin, i);
261             context.lineTo(width, i);
262             context.closePath();
263             context.stroke();
264 
265             context.beginPath();
266             context.moveTo(i, margin);
267             context.lineTo(i, width);
268             context.closePath();
269             context.stroke();
270         }
271 
272 
273 
274     }
275 
276 
277 
278 </script>
279 </body>
280 </html>

 

posted @ 2016-04-19 14:29  Sean丶  阅读(710)  评论(0)  编辑  收藏  举报