How do I find missing code to make the game Pong [closed]

  javascript, pong

I have an assignment where I have to fill in the missing code to make the game Pong in javascript. I am able to see what some of the functions in the code do, but I can’t figure out what to write in the blank spots. Everytime I try to fill in something that would make sense, it ends up identical to a function that is already in the code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Pong</title>

    <style>
        body{
            background: #666;
        }

        #canvas{
            margin-left: 20px;
            margin-top: 20px;
            background: #000;
        }
    </style>

    <script>

        var canvas, ctx;
        var player1 = new Player1();
        var player2 = new Player2();
        var ball = new Ball(200,300);


        // Setting up eventlisteners to see if a button is being pressed or released
        var keysDown = {};
        window.addEventListener("keydown", function(event){
            keysDown[event.keyCode] = true;
        });

        window.addEventListener("keyup",function(event){
            delete keysDown[event.keyCode];
        });


        // similar to setTimeout, except that it's only active when når you're in the right "tab" in the browser. It also runs 60fps
        var animate = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function(callback) { window.setTimeout(callback, 1000/60) };

    window.onload = function(){
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        animate(step);
    };

    // This function does 3 things: update, render the game and then call on itself again
    var step = function(){
        update();
        render();
        animate(step);
    };

    // Updates the players' and the ball's position
    var update = function(){
        player1.update();
        ball.update(player1.paddle,player2.paddle);

    };

    // Draws the player and ball
    var render = function(){
        ctx.fillStyle = "#000";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        player1.render();
        player2.render();
        ball.render();
    };



    // A way of making a constructor just as a function
    function Paddle(x, y, width, height){
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.x_speed = 0;
        this.y_speed = 0;
    }

    // Draw a player's racket
    Paddle.prototype.render = function(){
        ctx.fillStyle = "#fff";
        ctx.fillRect(this.x, this.y, this.width, this.height);
    };



    Paddle.prototype.move = function(x,y) {
        /*
            Here you have to write a code to make the player move
         */
    };


    //Player 1 + 2
    function Player1(){
        this.paddle = new Paddle(175, 580, 50, 10);
    }

    function Player2(){
        this.paddle = new Paddle(175, 10, 50, 10);
    }


    Player1.prototype.render = function(){
        this.paddle.render();
    };

    Player2.prototype.render = function(){
        this.paddle.render();
    };



    Player1.prototype.update = function(){
            /*
                Here you have to write code to actually move the player
                Tips: Make a loop that goes through keyDown and checks which button is bein presed, and then actually moves the piece to a side..
             */
    };


    // Ball
    function Ball(x, y){
        this.x = x;
        this.y = y;
        this.x_speed = 0;
        this.y_speed = 3;
        this.radius = 5;
    }

    // Draws the ball
    Ball.prototype.render = function(){
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius, 2 * Math.PI, false);
        ctx.fillStyle = "#fff";
        ctx.fill();
    };

    Ball.prototype.update = function(paddle1, paddle2){

        /*
            Here you have to write code to get the ball moving. You also use 2 paddles that you
            can use to get the ball to bounce back when the ball hits these. 

         */
    };


    /*
        You also have to add points and multiplayer/AI (play against computer)
     */

        </script>
    </head>
    <body>
        <canvas id="canvas" width="400" height="600"></canvas>
    </body>
</html>

Source: Ask Javascript Questions

LEAVE A COMMENT