pong.js Example Filescript/context2d/scripts/pong.js
// 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);
Publicité
Best Of
Actualités les plus lues
Le blog Digia au hasard
Le blog Digia est l'endroit privilégié pour la communication sur l'édition commerciale de Qt, où des réponses publiques sont apportées aux questions les plus posées au support.
Lire l'article.
Communauté
Ressources
Liens utiles
Contact
Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).
Qt dans le magazine