// globals playarea_canvas = document.getElementById('tutorial'); playarea_canvas.resize(320,200); playarea = playarea_canvas.getContext('2d'); //p1_scr = document.getElementById('p1_scr'); //p2_scr = document.getElementById('p2_scr'); //status_msg = document.getElementById('status'); //debug = document.getElementById('debug'); ball_direction = 0; up = -1; down = 1; //key codes key_up = 38; key_down = 40; key_W = 87; key_S = 83; key_pause = 32; speed = 2; //controls the speed of the ball paddle_inc = 10; //how many pixels paddle can move in either direction pause = false; player_1 = 0; //player IDs player_2 = 1; player_1_scr = 0; //player scores player_2_scr = 0; player_1_direction = null; //null = no movement whatsoever player_2_direction = null; pa = new Array(); divider = new Array(); paddle_1 = new Array(); paddle_2 = new Array(); ball = new Array(); function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } } function init() { pa['width'] = 150; pa['height'] = 140; pa['player_margin'] = 10; //area behind player paddles pa['foreground'] = "#FFFFFF"; pa['background'] = "#000000"; divider['pos'] = pa['width']/2; divider['width'] = 4; paddle_1['width'] = 8; paddle_1['height'] = 64; paddle_1['x'] = pa['player_margin']; paddle_1['y'] = (pa['height'] /2 ) - (paddle_1['height'] / 2); paddle_2['width'] = 8; paddle_2['height'] = 64; paddle_2['x'] = (pa['width'] - pa['player_margin'] - paddle_2['width']); paddle_2['y'] = (pa['height'] /2 ) - (paddle_2['height'] / 2); ball['width'] = 10; ball['height'] = 10; ball['x'] = (pa['width']/2) - (ball['width'] / 2); ball['y'] = (pa['height']/2) - (ball['height'] / 2); ball_direction = Math.random() * 360; //initialize ball direction, which is determined by angle, at random speed = 2; } function renderPlayarea() { playarea.beginPath(); playarea.clearRect(0,0,pa['width'],pa['height']); playarea.fillStyle = pa['background']; playarea.strokeStyle = pa['foreground']; playarea.fillRect(0,0, pa['width'], pa['height']); //move paddles if(player_1_direction != null) { if(player_1_direction == up) paddle_1['y'] = paddle_1['y'] - paddle_inc; else paddle_1['y'] = paddle_1['y'] + paddle_inc; } if(player_2_direction != null) { if(player_2_direction == up) paddle_2['y'] = paddle_2['y'] - paddle_inc; else paddle_2['y'] = paddle_2['y'] + paddle_inc; } playarea.rect(paddle_1['x'],paddle_1['y'],paddle_1['width'],paddle_1['height']); playarea.rect(paddle_2['x'],paddle_2['y'],paddle_2['width'],paddle_2['height']); //move ball playarea.rect(ball['x'], ball['y'], ball['width'], ball['height']); ball['x'] = ball['x'] + Math.cos((ball_direction)*Math.PI/180) * speed; ball['y'] = ball['y'] + Math.sin((ball_direction)*Math.PI/180) * speed; playarea.fillStyle = pa['foreground']; playarea.fill(); playarea.beginPath(); //redraw divider playarea.lineWidth = divider['width']; playarea.lineTo(divider['pos'], 0); playarea.lineTo(divider['pos'], pa['height'] = 200); playarea.lineWidth = 1; playarea.stroke(); playarea.closePath(); } function testCollisions() { //make sure paddles don't go beyond play area if(((paddle_1['y'] <= 0) && (player_1_direction == up)) || ((paddle_1['y'] >= (pa['height'] - paddle_1['height'])) && (player_1_direction == down))) player_1_direction = null; if(((paddle_2['y'] <= 0) && (player_2_direction == up)) || ((paddle_2['y'] >= (pa['height'] - paddle_2['height'])) && (player_2_direction == down))) player_2_direction = null; //check to see if ball went beyond paddles, and if so, score accordingly and reset playarea if(ball['x'] <= 0) { setScore(player_2); init() sleep(1000); } if(ball['x'] >= (pa['width'] - ball['width'])) { setScore(player_1); init(); sleep(1000); } //check to see if ball hit top or bottom wall. if so, change direction if((ball['y'] >= (pa['height'] - ball['height'])) || ball['y'] <= 0) ball_direction = -ball_direction; //check to see if the ball hit a paddle, and if so, change ball angle dependant on where it hit the paddle if((ball['x'] <= (paddle_1['x'] + paddle_1['width'])) && (ball['y'] >= paddle_1['y']) && (ball['y'] <= (paddle_1['y'] + paddle_1['height']))) { ball_direction = -ball_direction/2; speed += .5; } if(((ball['x'] + ball['width']) >= paddle_2['x']) && (ball['y'] >= paddle_2['y']) && (ball['y'] <= (paddle_2['y'] + paddle_2['height']))) { ball_direction = (180+ball_direction)/2; speed += .5; } } function setScore(p) { if(p == player_1) { player_1_scr++; //p1_scr.firstChild.nodeValue = player_1_scr; } if(p == player_2) { player_2_scr++; //p2_scr.firstChild.nodeValue = player_2_scr; } } //handle input document.onkeydown = function(ev) { switch(ev.keyCode) { case key_W: player_1_direction = up; break; case key_S: player_1_direction = down; break; case key_up: player_2_direction = up; break; case key_down: player_2_direction = down; break; } } document.onkeyup = function(ev) { switch(ev.keyCode) { case key_W: case key_S: player_1_direction = null; break; case key_up: case key_down: player_2_direction = null; break; case key_pause: if(pause == false) { clearInterval(game); //status_msg.style.visibility = "visible"; pause = true; } else { game = setInterval(main, 25); //status_msg.style.visibility = "hidden"; pause = false; } break; } } function main() { testCollisions(); renderPlayarea(); } init(); game = setInterval(main, 25);