pong.js Example File

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

© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.