pong.js

奇趣公司比较新的qt/emd版本

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