HTML5 canvas五子棋游戏

1.五子棋规则
无禁手玩法：黑先白后，谁先连五谁胜
禁手玩法：黑先行棋，黑棋只能走冲四活三胜，黑双活三禁手 双冲四禁手 四三三禁手 四四三禁手 六连长连禁手；白后手，白棋无任何禁手，还可以抓黑棋的禁手点取胜 
职业规则玩法：三手交换五手两打，黑棋有禁手，意思是下到第三手棋执白方有权选择交换下黑棋或者继续行棋，下到第五手时执黑方给出两个打点让执白方选择去掉一个打点下剩下的打点。
五子棋 第一子下天元 第三手确定一个开局，正规开局26种 直指13种 斜指13种，有些开局即便在职业规则下已经必胜了，或者必败了，还有一些平衡局 黑优局 白优局，职业规则的交换就限制了开局方（一开始执黑方）开必胜或着开黑优会被另一方交换掉，所以职业规则下 大家基本都选择平衡局来行棋
2五子棋游戏编程思想
基于本五子棋游戏无人机对抗，只是简单的模拟了两个玩家之间的游戏过程。在实际程序中维护了一张关于五子棋黑色棋子和白色棋子状态的地图，用2维数组表示，在每次玩家点击web界面时，判断是否可以落棋，已经判断是否已经有五子连星的状态，如果有，则游戏结束，没有则换对手下棋。
因为只是满足以上需求，所以整个游戏实现起来没有很多技术上的难点，之所以做这个游戏，无非是为了学习html5技术的同时带来一点乐趣而已~
3.源代码
说了以上那么几点，最后还是不例外的把源代码贴出来给大家吧，必然是有不足之处，有幸得到客官您的关注，还请多多交流，板砖别往脸上拍就好~
1. <p id="title" style="background-color: blue; color: white"> 
2. <h2>GOBANG Chess</h2> 
3. </p> 
4. <input type="radio" name="cur_player" id="black_player" onclick=set_current_player() />Black  
5. <input type="radio" name="cur_player" id="white_player" onclick=set_current_player() />White 
6. <img src="black.jpg" /> 
7. <p id="canvas_p"> 
8. <canvas id="c" width="600" height="600"></canvas> 
9. </p> 
10.  
11. <script> 
12.   var canvas = document.getElementById("c") 
13.   var context = canvas.getContext("2d") 
14.  
15.   var radio_black = document.getElementById("black_player") 
16.   var radio_white = document.getElementById("white_player") 
17.  
18.   radio_black.checked = true 
19.  
20.   // player status: 0 black; 1 white 
21.   player_status = 0 
22.   // draw map 
23.   var margin = 30 
24.  
25.   function Cell(x, y) 
26.   { 
27.     this.x = x 
28.     this.y = y 
29.     this.draw = function(){ 
30.       var cat = new Image() 
31.       if (player_status == 0) 
32.         cat.src = "black.jpg" 
33.       else 
34.         cat.src = "white.jpg" 
35.         
36.       var x_line = parseInt(String(this.x / margin)) 
37.       var y_line = parseInt(String(this.y / margin)) 
38.       x_pos = x_line * margin 
39.       y_pos = y_line * margin 
40.       context.drawImage(cat, x_pos, y_pos) 
41.     } 
42.   } 
43. </script> 
44. <script> 
45.   var x_lines = canvas.width / margin 
46.   var y_lines = canvas.height / margin 
47.   // store the status of the chesses 
48.   var gobang_table = new Array(y_lines) 
49.   for (var index = 0; index < y_lines; index++) 
50.     gobang_table[index] = new Array(x_lines) 
51.  
52.   for (var index = 0; index < y_lines; index++) 
53.     for(var x_index = 0; x_index < x_lines; x_index++) 
54.       gobang_table[index][x_index] = 0 
55.  
56.  
57.   // draw the map 
58.   for (var index = 0; index <= x_lines; index++) 
59.   { 
60.     context.moveTo(index*margin, 0) 
61.     context.lineTo(index*margin, canvas.height) 
62.   } 
63.  
64.   for (var index = 0; index <= y_lines; index++) 
65.   { 
66.     context.moveTo(0, index*margin) 
67.     context.lineTo(canvas.width, index*margin) 
68.   } 
69.  
70.   context.strokeStyle = "#0000ff" 
71.   context.lineWidth = 2 
72.   context.stroke() 
73.  
74.   //set click event handle 
75.   canvas.addEventListener("click", click_event_handle, false) 
76.  
77.   function click_event_handle(e) 
78.   { 
79.     var cell = get_cur_position(e) 
80.  
81.     // whether can fall the chess 
82.     var x_line = parseInt(String(cell.x / margin)) 
83.     var y_line = parseInt(String(cell.y / margin)) 
84.  
85.     if (gobang_table[y_line][x_line] != 0) 
86.     { 
87.       alert(y_line) 
88.       alert(x_line) 
89.       alert("exist") 
90.       return 
91.     } 
92.     else 
93.     { 
94.       if (player_status == 0) 
95.       { 
96.         gobang_table[y_line][x_line] = 1 
97.         cell.draw() 
98.       } 
99.       else 
100.       { 
101.         gobang_table[y_line][x_line] = 2 
102.         cell.draw() 
103.       } 
104.  
105.       // is game over 
106.       fresh_game_status() 
107.  
108.       // change user to play 
109.       player_status = 1 - player_status 
110.     } 
111.   } 
112.    
113.   function get_cur_position(e) 
114.   { 
115.     var x 
116.     var y 
117.     if (e.pageX != undefined && e.pageY != undefined) 
118.     { 
119.       x = e.pageX 
120.       y = e.pageY 
121.     } 
122.     else 
123.     { 
124.       x = e.clientX + document.body.scrollLeft + 
125.           document.documentElement.scrollLeft 
126.       y = e.clientY + document.body.scrollTop + 
127.           document.documentElement.scrollTop 
128.     } 
129.  
130.  
131.     x -= canvas.offsetLeft 
132.     y -= canvas.offsetTop 
133.  
134.     var cell = new Cell(x, y) 
135.     return cell 
136.   } 
137.  
138.   function fresh_game_status() 
139.   { 
140.     if (player_status == 0) 
141.       target_occu = 1 
142.     else 
143.       target_occu = 2 
144.     // horizone 
145.     for(var i = 0; i < y_lines; i++) 
146.     { 
147.       var count = 0 
148.       for (var j = 0; j < x_lines; j++) 
149.       { 
150.         if (gobang_table[i][j] == target_occu) 
151.         { 
152.           count++ 
153.           if (count >= 5) 
154.           { 
155.             notification = (target_occu == 1)?"black win":"white win" 
156.             alert(notification) 
157.             return 
158.           } 
159.         } 
160.       } 
161.     } 
162.  
163.     // vertical 
164.     for(var i = 0; i < x_lines; i++) 
165.     { 
166.       var count = 0 
167.       for (var j = 0; j < y_lines; j++) 
168.       { 
169.         if (gobang_table[j][i] == target_occu) 
170.         { 
171.           count++ 
172.           if (count >= 5) 
173.           { 
174.             notification = (target_occu == 1)?"black win":"white win" 
175.             alert(notification) 
176.             return 
177.           } 
178.         } 
179.       } 
180.     } 
181.  
182.     // left oblique 
183.     for(var i = 0; i < y_lines; i++) 
184.     { 
185.       var count = 0 
186.       for(var j = 0, k = i; j < x_lines; j++) 
187.       { 
188.         if (gobang_table[k][j] == target_occu) 
189.         { 
190.           count++ 
191.           k++ 
192.           if (count >= 5) 
193.           { 
194.             notification = (target_occu == 1)?"black win":"white win" 
195.             alert(notification) 
196.             return 
197.           } 
198.         } 
199.       } 
200.     }   
201.  
202.     // right oblique 
203.     for(var j = 0; j < x_lines; j++) 
204.     { 
205.       var count = 0 
206.       for(var i = 0, k  = j; i < y_lines; i++) 
207.       { 
208.         if (gobang_table[i][k] == target_occu) 
209.         { 
210.           count++ 
211.           k-- 
212.           if (count >= 5) 
213.           { 
214.             notification = (target_occu == 1)?"black win":"white win" 
215.             alert(notification) 
216.             return 
217.           } 
218.         } 
219.       } 
220.     }   
221.  
222.   }// end of function 
223.  
224.   function set_current_player() 
225.   { 
226.     if (radio_black.checked == true) 
227.       player_status = 0 
228.     else 
229.       player_status = 1   
230.   } 
231.  
232.  
233. </script> 

 

作者:woods2001