Phaser Pong

,

Building ‘Pong’ with Phaser

The digital realm is abundant with high-octane games featuring intricate mechanics, breathtaking visuals, and expansive universes. Yet, there’s an undeniable charm in the classics. One such game, both in its simplicity and depth, is ‘Pong’. Today, we embark on a journey to recreate this timeless classic using Phaser, a powerful framework for game development.

Before diving into the code, it’s crucial to set up our development environment. Phaser requires a web server to run. You can use tools like http-server or any local server setup to serve your game.

Dependencies: Ensure you have Phaser linked in your HTML. For our example, we’ll use Phaser 3.

1
<script src="https://cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser.min.js"></script>

Dependencies: You also need an image to represent your paddle and ball. Place them alongside your JS, or in the appropriatly referenced directory.

Initiating the Game Field

With Phaser, initiating a game instance is straightforward:

1
2
3
4
5
6
7
8
9
10
11
12
let config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

let game = new Phaser.Game(config);

Here, we set our game’s dimensions and specify the lifecycle methods: preload, create, and update.

Preload
In ‘Pong’, we don’t have intricate assets, but for more complex games, you’d load assets here.

1
2
3
function preload() {
    // Load assets if any.
}

Create
Instantiate and setup the paddles and ball. Phaser provides several functions to handle world bounds, collisions, physics and many other elements. Far cry from my Blitz Basic days :]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let ball;
let leftPaddle;
let rightPaddle;

function create() {
    // Create ball in the center
    ball = this.physics.add.sprite(400, 300, 'ball');
    ball.setCollideWorldBounds(true);
    ball.setBounce(1);
    ball.setVelocityX(150);  // Initial velocity

    // Create paddles
    leftPaddle = this.physics.add.sprite(50, 300, 'paddle');
    rightPaddle = this.physics.add.sprite(750, 300, 'paddle');

    leftPaddle.setImmovable(true);
    rightPaddle.setImmovable(true);

    // Collision
    this.physics.add.collider(ball, leftPaddle, hitPaddle, null, this);
    this.physics.add.collider(ball, rightPaddle, hitPaddle, null, this);
}

Update
In a simple version of Pong the update function would mainly handle paddle movements based on user input and checking if the ball goes out of bounds to determine scoring. For my implementation left paddle moves with the W and S keys, the right paddle moves with the UP and DOWN arrow keys, and the ball resets to the center and starts moving in a random direction when it goes out of bounds on the left or right.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function update() {
    // Move left paddle up
    if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.W)) {
        leftPaddle.setVelocityY(-200);
    }
    // Move left paddle down
    else if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.S)) {
        leftPaddle.setVelocityY(200);
    }
    // Stop left paddle movement when no key is pressed
    else {
        leftPaddle.setVelocityY(0);
    }

    // Move right paddle up
    if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.UP)) {
        rightPaddle.setVelocityY(-200);
    }
    // Move right paddle down
    else if (this.input.keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.DOWN)) {
        rightPaddle.setVelocityY(200);
    }
    // Stop right paddle movement when no key is pressed
    else {
        rightPaddle.setVelocityY(0);
    }

    // Check if the ball goes out of bounds on the left side
    if (ball.x < 0) {
        resetBall(); // Right player scores a point
    }
    // Check if the ball goes out of bounds on the right side
    else if (ball.x > 800) {
        resetBall(); // Left player scores a point
    }
}

function resetBall() {
    ball.setPosition(400, 300); // Reset to center
    ball.setVelocity(Phaser.Math.Between(-150, 150), Phaser.Math.Between(-50, 50)); // Random direction
}

Serving It Up

With the primary elements in place, the core mechanics of ‘Pong’ are set. From here, one can expand by adding scores, refining the graphics, or even introducing power-ups and levels. ‘Pong’ serves as a testament to the beauty of simplicity in game design. With Phaser replicating this classic becomes an enlightening experience, blending the charm of yesteryears with today’s advanced frameworks.