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