Repository

What Will I Learn?

You will learn how to make a game using the phaser 3 library.
You will learn to play music in the background while make a game in phaser 3.
You will learn how to add a picture in phaser 3.
You will learn how to move pictures in phaser 3 .
You will learn how to change the movement speed of pictures.
You will learn Game() function in phaser 3.
You will learn load.image() and add.image() functions in phaser 3.
You will learn load.audio() and sound.add() functions in phaser 3.
You will learn setLoop() and play() functions in phaser 3.
You will learn sprite() function in phaser 3 physics.
You will learn setVelocityX() in phaser 3

Requirements

Have basic html5 and javascript knowledge.
Visual Studio Code

Difficulty

Basic

Tutorial Contents

In this article, we begin to make game with html5 and javascript from the beginning using the phaser3 library. In the game you will pass the battle ships ahead of us and we will try to shoot them.

We will start creating the game. Then we will set up a music playing in the background of the game with phaser 3. We will see how to adjust this music and how to play it continuously in this article.

Then we will learn how to build ships and how to move this ship. We will also learn how to create and position multiple ships randomly.

Before creating the game you can get the phaser3 library and the pictures and music used in the game in my githup repo.

Create A Game

We need html page for html5 game. We create the page where the game will work with this page.

Let's create a page named index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <script src="phaser.js"></script>
    
    <script src="script.js"></script>
    <title>Ship Hitting Game</title>
    
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>
    
</body>
</html>

We've written basic html codes in the index.html page. We called phaser.js in the file's directory to use the phaser3 library.

We also created the script.js file and we called to use it on the index page. In script.js, we'll create javascript codes to create the game.

To prevent any gaps in the page, we did the margin adjustment in style tags.

We use the Game() function in the Phaser library to create a game with phaser. In the Game() function, it takes an object that we define the game's settings as a parameter and creates the game in html5 according to those settings.

var config = {
    type: Phaser.AUTO,//oyun tipi
    width: 800,//width of play ground
    height: 600,//height of play ground
    physics: {
        default: 'arcade'
    },
    scene: {//game algorithm
        preload: preloadGame,
        create: createGame,
        update: updateGame
    }
};

//The game field is created according to the config information.
var game = new Phaser.Game(config);

In the config settings, we can determine the dimensions of the game field and the mechanism that will run the game. In addition, we defined the functions to be used in the game algorithm in scene attribute.

Thus, the game screen will be created within the html page.

Screenshot 1

Create Background

We will place a background image on the playing field. We will use the background.png file as a background image so there will be a sandy beach in the background.

To upload a picture to the playground with the phaser library, we need to preload this image first.

To preload we have defined the preloadGame() function in the config object.

Let's make our background image available in the preloadGame() function.

function preloadGame ()
 {
    //With the background name we can access this image.
    this.load.image('background','assets/background.png');
 }

We load the image we want to use using the load.image() function. We can access background.png using background name.

Of course we need to create this picture after booting.

In the config we will use createGame() to create objects that are preload with phaser.

function createGame ()
{
    //location of center point
    this.add.image(400, 300, 'background');
}

We use the add.image () function to load the picture that is preload.

When using phaser, it is processed based on the center points due to the canvas feature. We've created a 800x600 playing field and we've got a 800x600 background image, so we've got a 400x300 center location.

Screenshot 2

Play Background Music

To play music in the background with phaser3, we need to enable disableWebAudio in the audio feature in the config object.

//for music
    audio: {
        disableWebAudio: true
    },

We can now play music by making such a setting in game.

After configuring music with config, we must define the audio file in the game's preloadGame() function.

With the load.audio() function, we can make the audio file usable.

function preloadGame ()
 {
//We are loading the audio file to be used.
  this.load.audio('backgroundSound', 'assets/audio/backgroundsound.mp3', {
         instances: 1
 });

We can now access the background audio file with the name backgroundSound.

We can create the audio file after making it available. If you want to play the sound file continuously loop should be taken.

function createGame ()
{
//create sound
var music = this.sound.add('backgroundSound');
//set loop
music.setLoop(true)
//play sound
music.play()

}

We can create the sound file using sound.add().We created a sound file that we created that we can use later. With the play() function, we can play the audio file during the game.

If you create the sound file this way, it will play once and then stop. we can play continuously with setLoop() function because we want a sound that will play continuously in the background.

Create Ship

We cannot load the background image as we loaded ship because we will move the ship.

We have enabled physics in the config object. Thanks to physics we can move the pictures we uploaded to the playground.

We should first load the ship image in the preloadGame () function.

function preloadGame ()
 {
    //With the ship name we can access this image.
    this.load.image('ship','assets/ship.png');
 }

We'll create a moving image and add it as a sprite using physics.

function createGame ()
{

  //We have defined such for moving.
  this.physics.add.sprite(200, 200, 'ship')

}

So we create the ship at 200x200 position on the screen.

Screenshot 3

Move Ship

With the phaser 3 you are creating a valid game of arcade physics rules.

When we create a sprite with physics, the speed is created as the default 0. We need to change the speed if we want to bring the ship into action.

Then we create the ship variable to access the ship and keep the speed information in the variable speed.

var ship;
var speed=5;

With the setVelocityX and setVelocityY functions, we can change the speed of an object.

Now we can adjust the speed within the createGame() function because we haven't changed the speed of the ship.

//We have defined such for moving.
ship=this.physics.add.sprite(200, 200, 'ship')

//We adjust the speed in the x direction.
ship.setVelocityX(speed);

Screenshot 4

If we want, we can change the speed at the beginning and move it faster.

var speed=100;

Screenshot 5

If we enter a positive value in the setVelocityX() function, the object moves to the right. we can move the object to the left by entering a negative value.

var speed=-10;

Screenshot 6

See you in the next article.

Proof of Work Done

Making Ship Hitting Game With Phaser3 Using Html5 And Javascript (Part 1)