​

//THINGS TO INCLUDE:

//volume slider

//instructions

​

​

//Don't just recreate an existing game, but add some unique aspect to it //etc. having 2 balls

//is there something about the content, is there a statement you want to make

​

//Parallax effect- if you have mutiple layers and make one layer move slower than the other, it can create a 3D effect

​

​

let RES_W = 800

let RES_H = 500

​

let disk_speed_x = 3.5

let disk_speed_y = 3.5

let disk_w = 30

let disk_h = 30

​

let disk_xc = RES_W/2

let disk_yc = RES_H/2

let BORDER=20

​

let score_player1 = 0

let score_player2 = 0

​

let game_over = true

let game_start = true

let switch_round = false

​

let winning_player = 0

let num_wins_player1 = 0

let num_wins_player2 = 0

​

let paddle_left_x = 40

let paddle_right_x = RES_W - 40

let paddle_left_y = RES_H/2

let paddle_right_y = RES_H/2

let paddle_width = 25

let paddle_height = 100

let paddle_vel = 7

​

​

​

​

class DiskAndPaddle{

    constructor(disk_xc, disk_yc, disk_w, disk_h, disk_speed_x, disk_speed_y, paddle_left_x, paddle_left_y, paddle_right_x, paddle_right_y, paddle_width, paddle_height){

        this.disk_xc = disk_xc

        this.disk_yc = disk_yc

        this.disk_w = disk_w

        this.disk_h = disk_h

        this.px = paddle_left_x

        this.pxr = paddle_right_x

        this.py = paddle_left_y

        this.pyr = paddle_right_y

        this.pw = paddle_width

        this.ph = paddle_height

        this.ps = paddle_vel

        this.disk_speed_x = disk_speed_x

        this.disk_speed_y = disk_speed_y

        this.key_handler = {"w": false, "s": false, UP: false, DOWN: false}

    }

//code for displaying the disk    

    Disk_display(){

        fill(255,255,255)

        ellipse(this.disk_xc, this.disk_yc, this.disk_w, this.disk_h)

    }

//code for displaying two paddles          

    Paddle_display(){

      //Modifies the location from which rectangles are drawn to the Center

        rectMode(CENTER)

        fill(0,0,243)

        rect(this.px, this.py, this.pw, this.ph)

        fill(214,0,0)

        rect(this.pxr, this.pyr, this.pw, this.ph) 

    }

//code for restricting paddle boundaries so that they don't go out of the table borders

    Paddle_boundaries(){

      //restricting lower boundary

        if(this.py + this.ph/2 > RES_H){

            this.py = this.py - this.ps

        }

        else if(this.py - this.ph/2 < 0){

          //restricting upper boundary

            this.py = this.py + this.ps

        }

        if(this.pyr + this.ph/2 > RES_H){

       //restricting lower boundary

            this.pyr = this.pyr - this.ps 

        }

        else if(this.pyr - this.ph/2 < 0){

          //restricting upper boundary

            this.pyr = this.pyr + this.ps

        }

    }

//Paddle movement is controlled through W, S and UP, DOWN keyboards

    Paddle_movement(){

        //if "w" is pressed, left paddle will move up

        if(this.key_handler["w"]){

            this.py = this.py - this.ps

        }

        //if "s" is pressed, left paddle will move down

        if(this.key_handler["s"]){

            this.py = this.py + this.ps

        }

        //if "UP" is pressed, right paddle will move up

        if(this.key_handler[UP_ARROW]){

            this.pyr = this.pyr - this.ps

        }

       //if "DOWN" is pressed, right paddle will move down

        if(this.key_handler[DOWN_ARROW]){

            this.pyr = this.pyr + this.ps

        }

    }

    //Code for managing Disk movement               

    Disk_movement(){ 

        this.disk_xc = this.disk_xc + this.disk_speed_x

        this.disk_yc = this.disk_yc + this.disk_speed_y

    }

​

    //Code for managing Disk bouncing when it touches boundaries 

     Disk_bouncing(){

​

        //Code for bouncing off if disk hits the boundaries

        //this if statement will be executed if the disk touches right-side boundaries of the table

        if(this.disk_xc + this.disk_w/2 > RES_W){

          // this.disk_speed_x = - this.disk_speed_x

          score_player1 += 1

          continueGame() 

        }

         //this if statement will be executed if the disk touches left-side boundaries of the table       

        else if(this.disk_xc - this.disk_w/2 < 0){

          // this.disk_speed_x = - this.disk_speed_x

           score_player2 += 1

           continueGame() 

        }

        //this if statement will be executed if the disk touches upper or lower boundaries of the table

        if(this.disk_yc + this.disk_h/2 > RES_H || this.disk_yc - this.disk_h/2 < 0){

            if(RES_H/2 + 100 < this.disk_yc  || this.disk_yc < RES_H/2 - 100){

                this.disk_speed_y = - this.disk_speed_y

            }

        }

        this.disk_xc = this.disk_xc + this.disk_speed_x

        this.disk_yc = this.disk_yc + this.disk_speed_y            

     }

    //function for displaying the scores of the players, along with the player name and round number     

    Score_display(){

        fill(255)

        textSize(20)

        textAlign(CENTER)

        text("Player 1", 100, 50)

        text(score_player1, 100, 80)

        text("Player 2", RES_W - 100, 50) 

        text(score_player2, RES_W - 100, 80) 

    }

​

​

    //Code for managing Disk bouncing when it touches paddles 

    Disk_Paddle_Contact(){

        //We manage the Disk and Paddle contact by looking into coordinates of Disk and Paddle and creating condition "if" which checks whether the disk contacted the paddle

        //check whether the disk contacted the left paddle

        if ((this.disk_xc - this.disk_w/2 < this.px + this.pw/2) && (this.disk_yc + this.disk_h/2 > this.py - this.ph/2) && (this.disk_yc - this.disk_h/2 < this.py + this.ph/2)){

            if(this.disk_speed_x < 0){

                print(this.px,this.py)

                print("contacted left paddle")

                this.disk_speed_x = - this.disk_speed_x

               //updating the score of player 2 if he/she hits the opponent's goal 

               score_player1 += 1

            }

        }

        //check whether the disk contacted the right paddle      

        else if ((this.disk_xc + this.disk_w/2 > this.pxr - this.pw/2) && (this.disk_yc + this.disk_h/2 > this.pyr - this.ph/2) && (this.disk_yc - this.disk_h/2 < this.pyr + this.ph/2)){

            if(this.disk_speed_x > 0){

                print(this.pxr,this.pyr)

                print("contacted right paddle")

                this.disk_speed_x = - this.disk_speed_x

               //updating the score of player 2 if he/she hits the opponent's goal 

              score_player2 += 1

            }

        }

    }

}

​

​

​

​

class Game{

    constructor(){

        this.disk = new DiskAndPaddle(disk_xc, disk_yc, disk_w, disk_h, disk_speed_x, disk_speed_y, paddle_left_x, paddle_left_y, paddle_right_x, paddle_right_y, paddle_width, paddle_height)

​

    }

    display(){

        background(0)

        //rectangle borders

        fill(194, 194, 194)

        rectMode(CENTER)

        rect(RES_W/2,RES_H/2,BORDER/4,RES_H*2)

        fill(194, 194, 194)

        rect(0,0,RES_W*2,BORDER)

        fill(194, 194, 194)

        rect(0,RES_H,RES_W*2,BORDER)

        fill(194, 194, 194)

        rect(RES_W,0,BORDER,RES_H*2)

        fill(194, 194, 194)

        rect(0,0,BORDER,RES_H*2)

​

        this.disk.Disk_display()

        this.disk.Disk_bouncing()

        this.disk.Disk_movement()

        this.disk.Disk_Paddle_Contact()

        this.disk.Paddle_display()

        this.disk.Paddle_movement()

        this.disk.Paddle_boundaries()

        this.disk.Score_display()

    }

}

​

game = new Game()    

​

function setup() {

  createCanvas(RES_W, RES_H);

  background(0);

}

​

​

​

function draw() {

   if(game_start == true){

        gameStartDisplay()

  }

​

  if(game_start == false){

        game.display()

    } 

}

​

​

//this function is used to update the disk to its initial location whenever someone scores a goal

function continueGame(){

    game.disk = new DiskAndPaddle(disk_xc, disk_yc, disk_w, disk_h, disk_speed_x, disk_speed_y, paddle_left_x, paddle_left_y, paddle_right_x, paddle_right_y, paddle_width, paddle_height)

}

​

​

//this display will be displayed when the game starts

function gameStartDisplay(){

    background(0)

    fill(255)

    textAlign(CENTER)

    textSize(30)

    text("Welcome to the Ping Pong game!", RES_W/2, RES_H/2)

    fill(255)

    textSize(15)

    text("Click anywhere to start", RES_W/2, RES_H/2 + 30)

}

​

​

​

function mouseClicked(){

    //when the mouse will be clicked while in a gameStartDisplay(), game_start will change to False, thus allowing us to display the actual game

    if(game_start == true){

        game_start = false

    }

}

​

function keyPressed(){

    if(key == "w" || key == "W"){

        game.disk.key_handler["w"] = true

    }

    else if(key == "s" || key == "S"){

        game.disk.key_handler["s"] = true

    }

    else if(keyCode == UP_ARROW){

        game.disk.key_handler[UP_ARROW] = true

    }

    else if(keyCode == DOWN_ARROW){

        game.disk.key_handler[DOWN_ARROW] = true 

    }

}

​

​

function keyReleased(){

    if(key == "w" || key == "W"){

        game.disk.key_handler["w"] = false

    }

    else if(key == "s" || key == "S"){

        game.disk.key_handler["s"] = false

    }

    else if(keyCode == UP_ARROW){

        game.disk.key_handler[UP_ARROW] = false

    }

    else if(keyCode == DOWN_ARROW){

        game.disk.key_handler[DOWN_ARROW] = false 

    }

}

​