HTML5 canvas game

1. Rules of wuziqi
Unbanned gameplay: After black and white, Whoever connects to five wins
No-manual gameplay: Black game first, black game can only win three victories, black, double, active, trigger, force, and force, you can also win a bid from the black game
How to play professional rules: Three-handed exchange of Five-handed and two-playing games, black games are banned, meaning that the white-performing parties in the third-hand game have the right to switch to black games or continue playing games, when I went down to the fifth hand, the hacker gave two hitting points for the white-enforcement Party to choose to remove the remaining hitting points.
Wuziqi's first sub-player sets a start for the third player in the next day. The regular start starts with 26 direct fingers, 13 oblique fingers, and 13 types. Some start times will win or lose even if they win under the professional rules, in addition, the trade-offs of the black and white bureaus of the balance Bureau restrict the start parties (the black ones at the beginning) from winning the game or the other party from switching the black ones, therefore, under the professional rules, everyone basically chooses the Balance Board to play games.
2. wuziqi game programming ideology
Based on this wuziqi game drone confrontation, it simply simulates the game process between two players. The actual program maintains a map of the status of the black and white pawns of the Wuzi game, represented in a two-dimensional array. Each time a player clicks the web interface, it determines whether the game can be played, you have determined whether there are five sub-stars. If there are any sub-stars, the game is over. If not, you can play the game again.
Because it only meets the above requirements, there are not many technical difficulties in implementing the entire game. The reason for this game is nothing more than learning html5 technology and bringing a little fun ~
3. Source Code
After talking about the above points, I finally paste the source code to everyone without exception. There must be some shortcomings. I am lucky to receive your attention from our guest. Please talk about them more, don't pat the bricks on your face ~
1. <div id = "title" style = "background-color: blue; color: white">
2. 3. </div>
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.
7. <div id = "canvas_div">
8. <canvas id = "c" width = "600" height = "600"> </canvas>
9. </div>
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.doc umentElement. scrollLeft
126. y = e. clientY + document. body. scrollTop +
127. document.doc umentElement. 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>

 

Author: woods2001