Add score to the pong game

Phaser 3
1

Hello,
My first game application is a classical table tennis game!!
I do all from the tutorial but i like to add score and text score on the screen.So who has an idea about this and how to add score for each pallette ;i looked everywhere but i can’t found the solution

phaser1
phaser1782×519 33.9 KB

So this is my final result but what is wrong in my code???

ph2
ph2912×578 11.6 KB

Updeted code:

import Palas from '../gameObjects/palas.js';

class Scene_play extends Phaser.Scene {
    constructor () {
      super({ key: 'Scene_play' });
      this.score1;
      this.score2;
     this.scoreText1;
     this.scoreText2;
    
      
    }
 
    create () {
      let centerwidth = this.sys.game.config.width/2;
      let centerheight = this.sys.game.config.height/2;
      let sx = this.sys.game.config.width - 30;
    
      
    
      //this.add.image(200, 100, 'ball');
      this.left = new Palas(this,30,centerheight, 'left_pallete');
      this.right = new Palas(this,sx, centerheight, 'right_pallete');
      this.add.image(centerwidth,centerheight, 'separator');

      //Add a text score for each pallete
      this.scoreText1  = this.add.text(20,20, 'score: ',{ fontFamily: 'Verdana, "Times New Roman", Tahoma, serif' });
      this.scoreText2   = this.add.text(400,20, 'score: ',{ fontFamily: 'Verdana, "Times New Roman", Tahoma, serif' });
      
      this.physics.world.setBoundsCollision(false,false,true,true);
      this.ball = this.physics.add.image(centerwidth, centerheight, 'ball');
      this.ball.setVelocityX(-120);
      this.ball.setCollideWorldBounds(true);
      this.ball.setBounce(1);

      this.physics.add.collider(this.ball,this.left,this.hitPallete,null,this);
      this.physics.add.collider(this.ball,this.right,this.hitPallete,null,this);

    //Controller pallete directions
    this.cursor = this.input.keyboard.createCursorKeys();

    this.cursor_W = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
    this.cursor_S = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);

      
    }

    update(){
      //Check if ball is blocked by left and right pallete and update the score
    if(this.ball.body.blocked.left){
       this.score2 += 1;
       this.scoreText2.setText('score: ' + this.score2);
       this.scoreText1.setVisible(true);
     }else if(this.ball.body.blocked.right){
       this.score1 += 1;
       this.scoreText1.setText('score: ' + this.score1);
     }
      if(this.ball.x < 0 || this.ball.x > this.sys.game.config.width){
        this.ball.setPosition(this.sys.game.config.width/2,this.sys.game.config.height/2);
      }
      //Controll of palletes
      if(this.cursor.down.isDown){
        this.left.body.setVelocityY(300);
      }else if(this.cursor.up.isDown){
        this.left.body.setVelocityY(-300);

      }else{
        this.left.body.setVelocity(0);
      }

      if(this.cursor_S.isDown){
        this.right.body.setVelocityY(300);
      }else if(this.cursor_W.isDown){
        this.right.body.setVelocityY(-300);
      }else{
        this.right.body.setVelocity(0);
      }
    

    }
   

    hitPallete() {
      
      this.ball.setVelocityY(Phaser.Math.Between(-120,120));
   
   }

  }
  export default Scene_play
2

Maybe your score increase cases are never realized. Can you try console.log in the score variables to see if the case realizes and if the score variables change when it does. Your cases may not true too. You can consider increasing the score with a pair of collisions with ball and the palette and their collision callbacks in create scene function if it is appropriate for your game logic.

Also not sure but adding a fill color for the score texts can be a good idea too. I do not know the default fill color value.
scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

1 Like
3

Thank i use console and the result is undefined as you said but how to reuse this variables outside their scope ?

4

If the result of the variable is undefined even your functions supposed to update it runs then there may be something wrong updating it. Even your functions may not be running when you are expecting them to run. Also make sure they runs wehn you want them to.

About scope, Your class and initializing of the score related variables seems fine. this.score1 and others will be all in scope of the methods defined in that class, like create and can be accessed as you do, this.score1. They are also available outside, since they are public members, like:

var scene_play = new Scene_play(); // instantiate your class ie. create an object that is an instance of the class 
var score = scene_play.score1; // access public member of the object

This is JavaScript, not specific to Phaser.

If you really want to, need to make them available outside the class then define a global variable instead of these and use them in the class though that seems like a little bit unnecessary or anti-pattern depending on your needs.

Why do you want to reach these variables outside of the class?

1 Like
5

Ok thanks, i found that i can use collider methode and create a new function within the collideCallback parameter, I also initialiazed the scores variable in create function and that works fine!!!

6

Great. You can still initialize your score or other game variables in this class and an in constructor like you do above:

...
constructor() {
this.score = 0;
}
...

then you can use a collider in create and define another method in same class for your collision handler, below onBallHitPalette, and in it access this.score1 and similar ones you have defined in constructor() or init() method since the handler method is still a member of the same class and this is bound to the class in the last argument to the collision definition function above, like:

create () {
this.physics.add.collider(ball, palette, onBallHitPalette, null, this);
}

onBallHitPalette () {
this.score1 = this.score1 + 1;
}
1 Like
7

Great thanks, but no need anymore to initialize variables outside functions,
and i discovre the other parameter of collider methode which is very helpfull in my case