arozos/legacy/offline/pong.js

/*
    pong.js
    Author: tobychui

*/

function newPongGame(targetDom, width=200, height=400) {
    console.log("Pong Loaded")
    const game = {};
    game.dom = targetDom;
    
    //Initiate the DOM element css
    $(game.dom).css({
        "backdrop-filter":"blur(5px)",
        "background-color":"rgba(26, 26, 26, 0.7)",
        "width": width,
        "height":height
    });

    //Inject the main canvas
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    canvas.style.position = "absolute";
    canvas.style.top = "0px";
    canvas.style.left = "0px";
    $(canvas).css("border", "1px solid black");
    targetDom.appendChild(canvas);
    var ctx = canvas.getContext("2d");

    game.canvas = canvas;
    game.ctx = ctx;
    game.pause = false;

    //Create game state
    game.state = {
        player: {
            x: width/2, 
            y: height - 30
        },
        cpu: {
            x: width/2,
            y: 30
        },
        ball: {
            x: width/2,
            y: height/2,
            dx: 1,
            dy: 1
        }
    }

    function drawCenterLine(){
        ctx.beginPath();
        ctx.setLineDash([4, 8]);
        ctx.moveTo(0, height/2);
        ctx.lineTo(width, height/2);
        ctx.strokeStyle = '#ffffff';
        ctx.stroke();
    }

    function drawPlate(x,y){
        var width = 40;
        var height = 6;

        x = x - width / 2;
        y = y - height / 2;


        game.ctx.beginPath();
        game.ctx.moveTo(x, y);
        game.ctx.lineTo(x + width, y);
        game.ctx.lineTo(x + width, y + height);
        game.ctx.lineTo(x, y + height);
        game.ctx.closePath();

        // the outline
        game.ctx.lineWidth = 1;
        game.ctx.strokeStyle = '#666666';
        game.ctx.stroke();

        // the fill color
        game.ctx.fillStyle = "#ffffff";
        game.ctx.fill();
    }

    function drwaBall(x,y){
        game.ctx.beginPath();
        game.ctx.arc(x, y, 8, 0, 2 * Math.PI);
        game.ctx.stroke(); 

        game.ctx.fillStyle = "#ffffff";
        game.ctx.fill();
    }

    function clearScreen(){
        game.ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function resetGame(){
        var dx = 1;
        if (Math.random() < 0.5){
            dx = -1;
        }
        game.state.ball = {
            x: width/2,
            y: height/2,
            dx: dx,
            dy: game.state.ball.dy * -1
        }
    }


    //Register functions on that DOM
    game.render = function() {
            clearScreen();
            drawCenterLine();

            //Move the ball
            game.state.ball.x += game.state.ball.dx;
            game.state.ball.y += game.state.ball.dy;

            if (game.state.ball.x < 8){
                game.state.ball.x = 8;
                game.state.ball.dx = -1 * game.state.ball.dx;
            }else if (game.state.ball.x > width - 8){
                game.state.ball.x = width - 8;
                game.state.ball.dx = -1 * game.state.ball.dx;
            }

            if (game.state.ball.y < 0){
                //Player win
                resetGame();
            }else if (game.state.ball.y > height){
                //CPU win
                resetGame();
            }

            //Move the CPU plate position
            if (game.state.cpu.x > game.state.ball.x){
                game.state.cpu.x -= 0.6;
            }else if (game.state.cpu.x < game.state.ball.x){
                game.state.cpu.x += 0.6;
            }

            drawPlate(game.state.player.x, game.state.player.y);
            drawPlate(game.state.cpu.x, game.state.cpu.y);
            drwaBall(game.state.ball.x, game.state.ball.y);

            if (game.paused != true){
                window.requestAnimationFrame(game.render);
            }
            
    };

    window.requestAnimationFrame(game.render);
    return game;
  }