Pong Example

sketch.js

//create global variables

var player1;

var player2;

var b;

var p1_score=0;

var p2_score=0;

function preload(){

    fireSound = loadSound('fire.wav');

    fireSound.setVolume(0.5); 

    bg = loadSound('background.wav');

}

function setup() {

    createCanvas(640, 360); // set canvas size    

    player1 = new paddle(10, 1);

    player2 = new paddle(620, 2);

    b = new ball();

    bg.play(0);

    ellipseMode(RADIUS);

    // Set the starting position of the shape

}

function draw() {

    background(0); //draw background black  

    player1.display();

    player1.move();

    player2.display();

    player2.move();

    b.move();

    scoreCheck();

    score();

    //collision detection for player 1 paddles

    if (collideRectCircle(player1.x, player1.y, player1.w, player1.h, b.xpos, b.ypos, b.rad)) {

        b.xdirection *= -1; //change dir of ball

    }

    //colllision detection for player 2 paddles

    if (collideRectCircle(player2.x, player2.y, player2.w, player2.h, b.xpos, b.ypos, b.rad * 2)) {

        b.xdirection *= -1; //change dir of ball        

    }

    //draw centre net using a loop

    for(var i=0; i<15;i++){

        stroke(255);

        rect(width/2, i*25, 10, 10); //draw half way on canvas

    }          

}

//Check to see if ball has missed player on x axis and update score

function scoreCheck(){

    //ball off right hand side of canvas

    if (b.xpos > width - b.rad ) {

        p1_score++; //increase player 1 score

        b.reset(); //reset pos of ball

        fireSound.play();

    }

    //ball off left hand side of canvas        

    if(b.xpos < b.rad){

        p2_score++; //increase player 1 score

        b.reset(); //reset pos of ball

        fireSound.play();

    } 

}

//draw player scores

function score(){

    textSize(32);

    text(p1_score, width/4, 30); //update player 1 score

    textSize(32);

    text(p2_score, (width/4)*3, 30); //update player 2 score

}

Paddle.js

class paddle {

    constructor(x, player) {

        //set up class properties

        this.x = x; //xpos

        this.y = height / 2; //ypos

        this.h = 50; //height

        this.w = 10; //width

        this.speed = 10; // speed to move

        this.side = player; // set side of player in constructor

    }

    //update the colour and draw on canvas

    display() {

        fill(255, 255, 255); //set colour

        rect(this.x, this.y, this.w, this.h); //draw the rect

    }

    //player controls for movement for two players

    move() {

        //player on the left - W and Z

        if (this.side == 1) {

            //w key pressed

            if (keyIsDown(87) && this.y>0) {

                this.y -= this.speed;        

              //z key pressed  

            } else if (keyIsDown(90)&& this.y<height-this.h) {

                this.y += this.speed;

            }

        //Player on the right - Up and Down

        } else if (this.side == 2) {

            //Up arrow key pressed

            if (keyIsDown(38)&& this.y>0) {

                this.y -= this.speed;

            //Down arrow key pressed

            } else if (keyIsDown(40)&& this.y<height-this.h) {

                this.y += this.speed;

            }

        }

    }

}

ball.js

class ball {

    constructor() {

        //set up class properties

        this.rad = 10; // Width of the shape

        this.xpos = width / 2;

        this.ypos = height / 2; // Starting position of shape

        this.xspeed = 5; // Speed of the shape

        this.yspeed = 6; // Speed of the shape

        this.xdirection = 1; // Left or Right

        this.ydirection = 1; // Top to Bottom

    }

    move() {

        // Update the position of the shape

        this.xpos = this.xpos + this.xspeed * this.xdirection;

        this.ypos = this.ypos + this.yspeed * this.ydirection;

        if (this.ypos > height - this.rad || this.ypos < this.rad) {

            this.ydirection *= -1;

        }

        // Draw the ball shape

        stroke(255);

        ellipse(this.xpos, this.ypos, this.rad, this.rad);

    }   

    reset(){

        this.xpos = width / 2;

        this.ypos = height / 2;

        this.xdirection *= -1;

    }

}