0
|
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);
|