Develop a 2d HTML5 website video game with phaser

August 08, 2024

Develop a 2d HTML5 website video game with phaser

Creating a 2D HTML5 website video game can be an exciting and rewarding experience.

Enroll Now

With the right tools and a bit of coding knowledge, you can develop a game that can be played directly in web browsers. One of the most popular frameworks for this purpose is Phaser, a fast, robust, and versatile HTML5 game framework that makes it easier to develop 2D games. This guide will walk you through the process of developing a simple 2D game using Phaser.

Getting Started with Phaser

First, let's discuss the essentials you'll need to get started:

HTML and JavaScript Basics: You should be familiar with HTML and JavaScript, as Phaser uses these languages.
Phaser Framework: You need to download the Phaser framework from its official website or include it via a CDN in your HTML file.
Code Editor: Any text editor will do, but editors like Visual Studio Code or Sublime Text offer features that make coding easier.

Setting Up Your Project

Create a new directory for your project and set up the basic HTML structure. Your directory should look something like this:

bash
/my-phaser-game
    /assets
    index.html
    main.js

The assets folder will contain your game assets, such as images and sounds. The index.html file is your main HTML file, and main.js will contain your game logic.

index.html

Create an index.html file with the following content:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Phaser Game</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
    <script src="main.js" defer></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000;
        }
    </style>
</head>
<body>
</body>
</html>

This file sets up a basic HTML page and includes the Phaser library through a CDN. It also links to main.js where you’ll write your game code.

Creating the Game Scene

Phaser uses a concept called scenes to manage different parts of your game. You can think of a scene as a stage or a level in your game. Create a basic scene in main.js.

main.js

javascript
class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    preload() {
        // Load assets here
        this.load.image('player', 'assets/player.png');
    }

    create() {
        // Set up game objects here
        this.player = this.physics.add.sprite(400, 300, 'player');
    }

    update() {
        // Game logic goes here
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: MainScene
};

const game = new Phaser.Game(config);

In this code:

MainScene: A class that extends Phaser.Scene. It includes the preload, create, and update methods.
preload(): Used to load assets before the game starts.
create(): Used to create game objects and set up your game.
update(): Called once per frame, ideal for game logic and player input.
config: An object that defines the game configuration, including the game type, dimensions, background color, physics, and scene.

Loading Assets

In the preload method, you load game assets like images and sounds. For this example, create a simple player.png image and place it in the assets folder. The preload method uses this.load.image('key', 'path') to load an image.

Creating the Player

In the create method, you create the player sprite using this.physics.add.sprite(x, y, 'key'). This adds a sprite to the game world with physics enabled, allowing for collision detection and other physics interactions.

Game Logic and Player Movement

In the update method, you’ll implement the game logic and handle player input. Let's add simple keyboard controls to move the player sprite around the screen.

main.js (Updated)

javascript
class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    preload() {
        this.load.image('player', 'assets/player.png');
    }

    create() {
        this.player = this.physics.add.sprite(400, 300, 'player');

        this.cursors = this.input.keyboard.createCursorKeys();
    }

    update() {
        this.player.setVelocity(0);

        if (this.cursors.left.isDown) {
            this.player.setVelocityX(-160);
        } else if (this.cursors.right.isDown) {
            this.player.setVelocityX(160);
        }

        if (this.cursors.up.isDown) {
            this.player.setVelocityY(-160);
        } else if (this.cursors.down.isDown) {
            this.player.setVelocityY(160);
        }
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: MainScene
};

const game = new Phaser.Game(config);

In this code:

this.cursors: Holds the keyboard cursor keys.
setVelocity(0): Stops the player from moving when no key is pressed.
setVelocityX(-160/160) and setVelocityY(-160/160): Move the player left/right and up/down, respectively, when the corresponding keys are pressed.

Adding More Features

To make your game more interesting, you can add various features such as enemies, collectibles, and scoring. Here are a few examples:

Adding Enemies

You can add enemies using a similar approach to the player. Load enemy assets in the preload method, create enemy sprites in the create method, and update their behavior in the update method.

main.js (Enemies)

javascript
class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    preload() {
        this.load.image('player', 'assets/player.png');
        this.load.image('enemy', 'assets/enemy.png');
    }

    create() {
        this.player = this.physics.add.sprite(400, 300, 'player');

        this.enemies = this.physics.add.group({
            key: 'enemy',
            repeat: 5,
            setXY: { x: 100, y: 100, stepX: 100 }
        });

        this.cursors = this.input.keyboard.createCursorKeys();
    }

    update() {
        this.player.setVelocity(0);

        if (this.cursors.left.isDown) {
            this.player.setVelocityX(-160);
        } else if (this.cursors.right.isDown) {
            this.player.setVelocityX(160);
        }

        if (this.cursors.up.isDown) {
            this.player.setVelocityY(-160);
        } else if (this.cursors.down.isDown) {
            this.player.setVelocityY(160);
        }

        Phaser.Actions.Call(this.enemies.getChildren(), function(enemy) {
            enemy.y += 1;
            if (enemy.y > 600) {
                enemy.y = 0;
                enemy.x = Phaser.Math.Between(0, 800);
            }
        }, this);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: MainScene
};

const game = new Phaser.Game(config);

In this code:

this.enemies: Creates a group of enemies.
Phaser.Actions.Call: Updates the position of each enemy to move them down the screen, resetting their position when they go off-screen.

Adding Collectibles and Scoring

To add collectibles and a scoring system, follow these steps:

Load collectible assets in the preload method.
Create collectible sprites and a score text in the create method.
Check for collisions between the player and collectibles in the update method.

main.js (Collectibles and Scoring)

javascript
class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    preload() {
        this.load.image('player', 'assets/player.png');
        this.load.image('enemy', 'assets/enemy.png');
        this.load.image('collectible', 'assets/collectible.png');
    }

    create() {
        this.player = this.physics.add.sprite(400, 300, 'player');

        this.enemies = this.physics.add.group({
            key: 'enemy',
            repeat: 5,
            setXY: { x: 100, y: 100, stepX: 100 }
        });

        this.collectibles = this.physics.add.group({
            key: 'collectible',
            repeat: 10,
            setXY: { x: 50, y: 50, stepX: 75 }
        });

        this.score = 0;
        this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#fff' });

        this.physics.add.overlap(this.player, this.collectibles, this.collectItem, null, this);

        this.cursors = this.input.keyboard.createCursorKeys();
    }

    update() {
        this.player.setVelocity(0);

        if (this.cursors.left.isDown) {
            this.player.setVelocityX(-160);
        } else if (this.cursors.right.isDown) {
            this.player.setVelocityX(160);
        }

        if (this.cursors.up.isDown) {
            this.player.setVelocityY(-160);
        } else if (this.cursors.down.isDown) {
            this.player.setVelocityY(160);
        }

        Phaser.Actions.Call(this.enemies.getChildren(), function(enemy) {
            enemy.y += 1;
            if (enemy.y > 600) {
                enemy.y = 0;
                enemy.x = Phaser.Math.Between(0, 800);
            }
        }, this);
    }

    collectItem(player, collectible) {
        collectible.disableBody(true, true);
        this.score += 10;
        this.scoreText.setText('Score: ' + this.score);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: MainScene
};

const game = new Phaser.Game(config);

In this code:

this.collectibles: Creates a group of collectible items.
this.score: Keeps track of the player’s score.
this.scoreText: Displays the score on the screen.
this.physics.add.overlap: Checks for collisions between the player and collectibles, calling collectItem when they collide.
collectItem: Disables the collectible, updates the score, and updates the score text.

Conclusion

Developing a 2D HTML5 game with Phaser involves setting up the project structure, creating scenes, loading assets, creating game objects, and implementing game logic. This guide has covered the basics, including player movement, enemies, collectibles, and scoring. With these foundations, you can expand and customize your game by adding new features, levels, and mechanics.

Phaser is a powerful framework that simplifies many aspects of game development, allowing you to focus on creativity and gameplay. As you become more comfortable with Phaser, you can explore advanced features like animations, tilemaps, and custom shaders to enhance your game. Happy coding!

vingers

Widget Atas Posting

Develop a 2d HTML5 website video game with phaser