Home / javascript / How to Make a Pong Game in JavaScript

How to Make a Pong Game in JavaScript

September 05, 2019 - javascript

Making a video game is easier than you think, you will see that with knowing the basics of a language and good knowledge of maths and physics you will be able to create cool games.
in this tutorial, I will show you how to make a simple pong game using HTML, CSS, and JavaScript.

I- make the game canvas

to make this game we will need a cool object called " canvas " , a canvas allows you to draw some shape, text, and images using javascript and manipulate these objects using animation and event listeners.

 <!DOCTYPE HTML>


<html>
    <head>
        <link rel="stylesheet" href="main.css">
    </head>
    
    <body>
       <h1>Pong Game</h1>
        <div class="container">
            <canvas id="pong" width="600" height="400"></canvas>
        </div>
        
        <script src="app.js" type="text/javascript"></script>
    </body>
    
</html>

II-Add some style to the game

let's add some CSS style to our game.

 *{
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    background-color: #f0db4f;
}
.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /*border: 2px solid #212121;*/
    padding: 15px;
    background-color: #fafafa;
    border-radius: 8px;
    box-shadow: 0 8px 8px rgba(0,0,0,.1);
}

h1{
    text-align: center;
    font-size: 3rem;
    text-transform: uppercase;
    margin-top: 50px;
}

III- the game code

for this tutorial, it's important to have solid knowledge in JavaScript especially in oop because we will need to use objects to simplify the program.

the full source code is here:

 class Vec
{
    
    constructor(x = 0, y = 0){
        this.x = x;
        this.y = y;
    }
}

class Rect
    {
        constructor(w,h){
            this.pos = new Vec;
            this.size = new Vec(w,h);
        }
    }

class Ball extends Rect
{
    constructor(){
        super(20,20);
        this.Vel = new Vec;
    }
}


class Player extends Rect
    {
        constructor(){
            super(20,100);
            this.score = 0;
        }
    }

const Canvas = document.getElementById('pong');
const context = Canvas.getContext("2d");

const ball = new Ball();
console.log(ball);

var velocity =200;

ball.Vel.x = velocity;
ball.Vel.y = velocity;


const ennemy = new Player();
ennemy.pos.x = Canvas.width - 40;
ennemy.pos.y = Canvas.height/2 - 50;

const player = new Player();
player.pos.x = 20;
player.pos.y = Canvas.height/2 - 50;

let LastTime;
function CallBack(millis){
    if(LastTime){
        update((millis - LastTime) /1000);
    }
    LastTime = millis;
    requestAnimationFrame(CallBack);
}


function update(dt){
    ball.pos.x += ball.Vel.x * dt;
    ball.pos.y += ball.Vel.y * dt;
   
    
   

    // we will start by adding the background
    context.fillStyle = "#000";
    context.fillRect(0,0,Canvas.width,Canvas.height);
    
     // let's add the center line
    context.fillStyle = "#fff";
    context.fillRect((Canvas.width)/2,0,4,Canvas.height);
    
    // let's add some text
    context.fillStyle = "#fff";
    context.font = "80px Arial";
    context.fillText(player.score,Canvas.width/4 - 30,80);

    
    context.fillStyle = "#fff";
    context.font = "80px Arial";
    context.fillText(ennemy.score,Canvas.width*0.75 - 30,80);
    
    // we will make a ball
    context.fillStyle = "#fff";
    context.fillRect(ball.pos.x,ball.pos.y,ball.size.x,ball.size.y);
    // we will make the player
    context.fillStyle = "#fff";
    context.fillRect(player.pos.x,player.pos.y,player.size.x,player.size.y);
    
    // we will make the ennemi
    context.fillStyle = "#fff";
    context.fillRect(ennemy.pos.x,ennemy.pos.y,ennemy.size.x,ennemy.size.y);
    
     
    if((ball.pos.y + ball.size.y) > Canvas.height || ball.pos.y < 0){
        ball.Vel.y = - ball.Vel.y;
    }
    
    if((ball.pos.x + ball.size.x) > Canvas.width || ball.pos.x < 0){
        ball.Vel.x = - ball.Vel.x;
    }
    
    
    // set enemy score
    if(ball.pos.x <= 0){
        ennemy.score++;
    }
    //set player score
    if(ball.pos.x + 20 >= Canvas.width){
        player.score++;
    }
    
    
    if(ball.pos.x >= Canvas.width/2){
         if(ball.pos.y <= ennemy.pos.y ){
             ennemy.pos.y -=2;
         }else if(ball.pos.y >= ennemy.pos.y+100){
             ennemy.pos.y +=2;
         }
    }
   
    
    
    // now we will make the collistion between player and ball
    
    
    if((ball.pos.x + 20 ) >= (ennemy.pos.x) &&  (ball.pos.y >= ennemy.pos.y && ball.pos.y <= ennemy.pos.y + 100)){
        ball.Vel.x = - ball.Vel.x;
    }
    
    if((ball.pos.x ) <= (player.pos.x + 20) &&  (ball.pos.y >= player.pos.y && ball.pos.y <= player.pos.y + 100)  ){
        ball.Vel.x = - ball.Vel.x;
    }
  
    Canvas.addEventListener("mousemove", event => {
        player.pos.y = event.offsetY;
    });
      
    
    
    
}

CallBack();

i hope that you liked this tutorial.

How to Make a Pong Game in JavaScript

How to Make a Pong Game in JavaScript

Reviewed by Medics on September 05, 2019 Rating: 5

2 comments:

Artur macenciniDecember 20, 2019 at 11:00 AM
Very nice Project!! Helped me a lot to understand the applicability of classes.
ReplyDelete
Replies

Subscribe to: Post Comments ( Atom )

Web Analytics Made Easy - StatCounter