pong.js Example File | Qt Script

- Qt 5.5
- Qt Script
- Context2D Example
- pong.js Example File
- Qt 5.5.1 Reference Documentation

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