|
1 // globals |
|
2 playarea_canvas = document.getElementById('tutorial'); |
|
3 playarea_canvas.resize(320,200); |
|
4 playarea = playarea_canvas.getContext('2d'); |
|
5 //p1_scr = document.getElementById('p1_scr'); |
|
6 //p2_scr = document.getElementById('p2_scr'); |
|
7 //status_msg = document.getElementById('status'); |
|
8 //debug = document.getElementById('debug'); |
|
9 ball_direction = 0; |
|
10 up = -1; |
|
11 down = 1; |
|
12 |
|
13 //key codes |
|
14 key_up = 38; |
|
15 key_down = 40; |
|
16 key_W = 87; |
|
17 key_S = 83; |
|
18 key_pause = 32; |
|
19 |
|
20 speed = 2; //controls the speed of the ball |
|
21 paddle_inc = 10; //how many pixels paddle can move in either direction |
|
22 pause = false; |
|
23 |
|
24 player_1 = 0; //player IDs |
|
25 player_2 = 1; |
|
26 player_1_scr = 0; //player scores |
|
27 player_2_scr = 0; |
|
28 player_1_direction = null; //null = no movement whatsoever |
|
29 player_2_direction = null; |
|
30 |
|
31 pa = new Array(); |
|
32 divider = new Array(); |
|
33 paddle_1 = new Array(); |
|
34 paddle_2 = new Array(); |
|
35 ball = new Array(); |
|
36 |
|
37 |
|
38 function sleep(numberMillis) |
|
39 { |
|
40 var now = new Date(); |
|
41 var exitTime = now.getTime() + numberMillis; |
|
42 while (true) { |
|
43 now = new Date(); |
|
44 if (now.getTime() > exitTime) |
|
45 return; |
|
46 } |
|
47 } |
|
48 |
|
49 function init() |
|
50 { |
|
51 pa['width'] = 150; |
|
52 pa['height'] = 140; |
|
53 pa['player_margin'] = 10; //area behind player paddles |
|
54 pa['foreground'] = "#FFFFFF"; |
|
55 pa['background'] = "#000000"; |
|
56 |
|
57 divider['pos'] = pa['width']/2; |
|
58 divider['width'] = 4; |
|
59 |
|
60 paddle_1['width'] = 8; |
|
61 paddle_1['height'] = 64; |
|
62 paddle_1['x'] = pa['player_margin']; |
|
63 paddle_1['y'] = (pa['height'] /2 ) - (paddle_1['height'] / 2); |
|
64 |
|
65 paddle_2['width'] = 8; |
|
66 paddle_2['height'] = 64; |
|
67 paddle_2['x'] = (pa['width'] - pa['player_margin'] - paddle_2['width']); |
|
68 paddle_2['y'] = (pa['height'] /2 ) - (paddle_2['height'] / 2); |
|
69 |
|
70 ball['width'] = 10; |
|
71 ball['height'] = 10; |
|
72 ball['x'] = (pa['width']/2) - (ball['width'] / 2); |
|
73 ball['y'] = (pa['height']/2) - (ball['height'] / 2); |
|
74 |
|
75 ball_direction = Math.random() * 360; //initialize ball direction, which is determined by angle, at random |
|
76 speed = 2; |
|
77 } |
|
78 |
|
79 function renderPlayarea() |
|
80 { |
|
81 playarea.beginPath(); |
|
82 |
|
83 playarea.clearRect(0,0,pa['width'],pa['height']); |
|
84 playarea.fillStyle = pa['background']; |
|
85 playarea.strokeStyle = pa['foreground']; |
|
86 playarea.fillRect(0,0, pa['width'], pa['height']); |
|
87 |
|
88 //move paddles |
|
89 if(player_1_direction != null) |
|
90 { |
|
91 if(player_1_direction == up) |
|
92 paddle_1['y'] = paddle_1['y'] - paddle_inc; |
|
93 else |
|
94 paddle_1['y'] = paddle_1['y'] + paddle_inc; |
|
95 } |
|
96 if(player_2_direction != null) |
|
97 { |
|
98 if(player_2_direction == up) |
|
99 paddle_2['y'] = paddle_2['y'] - paddle_inc; |
|
100 else |
|
101 paddle_2['y'] = paddle_2['y'] + paddle_inc; |
|
102 } |
|
103 playarea.rect(paddle_1['x'],paddle_1['y'],paddle_1['width'],paddle_1['height']); |
|
104 playarea.rect(paddle_2['x'],paddle_2['y'],paddle_2['width'],paddle_2['height']); |
|
105 |
|
106 //move ball |
|
107 playarea.rect(ball['x'], ball['y'], ball['width'], ball['height']); |
|
108 ball['x'] = ball['x'] + Math.cos((ball_direction)*Math.PI/180) * speed; |
|
109 ball['y'] = ball['y'] + Math.sin((ball_direction)*Math.PI/180) * speed; |
|
110 |
|
111 playarea.fillStyle = pa['foreground']; |
|
112 playarea.fill(); |
|
113 |
|
114 playarea.beginPath(); |
|
115 //redraw divider |
|
116 playarea.lineWidth = divider['width']; |
|
117 playarea.lineTo(divider['pos'], 0); |
|
118 playarea.lineTo(divider['pos'], pa['height'] = 200); |
|
119 playarea.lineWidth = 1; |
|
120 |
|
121 playarea.stroke(); |
|
122 playarea.closePath(); |
|
123 } |
|
124 |
|
125 function testCollisions() |
|
126 { |
|
127 //make sure paddles don't go beyond play area |
|
128 if(((paddle_1['y'] <= 0) && (player_1_direction == up)) || ((paddle_1['y'] >= (pa['height'] - paddle_1['height'])) && (player_1_direction == down))) |
|
129 player_1_direction = null; |
|
130 if(((paddle_2['y'] <= 0) && (player_2_direction == up)) || ((paddle_2['y'] >= (pa['height'] - paddle_2['height'])) && (player_2_direction == down))) |
|
131 player_2_direction = null; |
|
132 |
|
133 //check to see if ball went beyond paddles, and if so, score accordingly and reset playarea |
|
134 if(ball['x'] <= 0) |
|
135 { |
|
136 setScore(player_2); |
|
137 init() |
|
138 sleep(1000); |
|
139 } |
|
140 if(ball['x'] >= (pa['width'] - ball['width'])) |
|
141 { |
|
142 setScore(player_1); |
|
143 init(); |
|
144 sleep(1000); |
|
145 } |
|
146 |
|
147 //check to see if ball hit top or bottom wall. if so, change direction |
|
148 if((ball['y'] >= (pa['height'] - ball['height'])) || ball['y'] <= 0) |
|
149 ball_direction = -ball_direction; |
|
150 |
|
151 //check to see if the ball hit a paddle, and if so, change ball angle dependant on where it hit the paddle |
|
152 if((ball['x'] <= (paddle_1['x'] + paddle_1['width'])) && (ball['y'] >= paddle_1['y']) && (ball['y'] <= (paddle_1['y'] + paddle_1['height']))) |
|
153 { |
|
154 ball_direction = -ball_direction/2; |
|
155 speed += .5; |
|
156 } |
|
157 if(((ball['x'] + ball['width']) >= paddle_2['x']) && (ball['y'] >= paddle_2['y']) && (ball['y'] <= (paddle_2['y'] + paddle_2['height']))) |
|
158 { |
|
159 ball_direction = (180+ball_direction)/2; |
|
160 speed += .5; |
|
161 } |
|
162 } |
|
163 |
|
164 function setScore(p) |
|
165 { |
|
166 if(p == player_1) |
|
167 { |
|
168 player_1_scr++; |
|
169 //p1_scr.firstChild.nodeValue = player_1_scr; |
|
170 } |
|
171 if(p == player_2) |
|
172 { |
|
173 player_2_scr++; |
|
174 //p2_scr.firstChild.nodeValue = player_2_scr; |
|
175 } |
|
176 } |
|
177 |
|
178 |
|
179 //handle input |
|
180 document.onkeydown = function(ev) |
|
181 { |
|
182 switch(ev.keyCode) |
|
183 { |
|
184 case key_W: |
|
185 player_1_direction = up; |
|
186 break; |
|
187 case key_S: |
|
188 player_1_direction = down; |
|
189 break; |
|
190 case key_up: |
|
191 player_2_direction = up; |
|
192 break; |
|
193 case key_down: |
|
194 player_2_direction = down; |
|
195 break; |
|
196 } |
|
197 } |
|
198 |
|
199 document.onkeyup = function(ev) |
|
200 { |
|
201 switch(ev.keyCode) |
|
202 { |
|
203 case key_W: |
|
204 case key_S: |
|
205 player_1_direction = null; |
|
206 break; |
|
207 case key_up: |
|
208 case key_down: |
|
209 player_2_direction = null; |
|
210 break; |
|
211 case key_pause: |
|
212 if(pause == false) |
|
213 { |
|
214 clearInterval(game); |
|
215 //status_msg.style.visibility = "visible"; |
|
216 pause = true; |
|
217 } |
|
218 else |
|
219 { |
|
220 game = setInterval(main, 25); |
|
221 //status_msg.style.visibility = "hidden"; |
|
222 pause = false; |
|
223 } |
|
224 break; |
|
225 } |
|
226 } |
|
227 |
|
228 function main() |
|
229 { |
|
230 testCollisions(); |
|
231 renderPlayarea(); |
|
232 } |
|
233 |
|
234 init(); |
|
235 game = setInterval(main, 25); |