Build a Space Shooter with Phaser3 and JavaScript(Tutorial2)

In this blog post series, I want to unpack building a 2D shooter game using Phaser3.js. Phaser3 provides a robust and fast game framework for early-stage JavaScript developers. In this post, we’ll focus on enabling our ship to fire lasers.

Space shooter

Please make sure to check out Tutorial 1 to get started with this project. You’ll need to build upon the code and ideas from the previous blog post.

Let’s start by creating a game object to represent a laser. (see code below) We’ll model this object using the ShipLaser class that extends Phaser.GameObjects.Sprite. In general, a class connects data stuff and related functions(or methods) in a nice little package. In this case, the laser has data properties like location(x,y), a texture, speed, and a scene. This code snippet has two methods: constructor and preUpdate.

class ShipLaser extends Phaser.GameObjects.Sprite {

	constructor(scene, x, y) {
    	super(scene, x, y);
    	this.setTexture('laser');
    	this.setPosition(x, y);
    	this.speed = 10;
    	this.scene = scene;
    	scene.physics.world.enable(this);
	}

	preUpdate(time, delta) {
    	if(this.active == false){return;}
    	super.preUpdate(time, delta);
    	this.y -= this.speed;
	}
}

The constructor method enables us to set up the ShipLaser class. We’ll initialize properties like texture, position, speed, and physics.
In Phaser 3, the preUpdate method of a sprite enables us to describe behavior or movement of the sprite. The framework requires that we call “super.preUpdate.” On the next line, we move the sprite upward on the screen by subtracting from the y property.

Let’s make some edits to our Ship class. We’re going to store a reference of the scene. To describe how fast the ship moves over the game space, we initial deltaX and deltaY to 5. In this current design, we’re going to store the list of lasers from the ship in an array. We also need to store some information related to when the last shot was executed.

class Ship extends Phaser.GameObjects.Sprite  {

	constructor(scene, x , y) {
    	// ... other setup stuff

    	this.scene = scene;
    	this.deltaX = 5;
    	this.deltaY = 5;
    	this.lasers = new Array();
    	this.lastShot = new Date().getTime();
    	this.shotFrequency = 250;
	}

It’s time to shoot stuff! Let’s define a method to fireLasers from the ship. When my kids play this game, they just keep their fingers down on the space bar the whole time. 🙂 By design, we want to control how often the laser gets shot. We start by checking the current time. The quantity of currentTime – lastShot returns the number of milliseconds since the last shot. If this value is greater than 250, we allow the ship to fire.

When we fire, we create an instance of the ShipLaser we defined. Notice that the ship laser will be created with the same scene and location as the ship. Once we have an instance, we add the laser instance to the scene. We finish up by storing the laser in our lasers list and updating the “lastShot” time.

	fireLasers() {
    	var currentTime = new Date().getTime();
    	if (currentTime - this.lastShot > this.shotFrequency) {
        	var shipLaser = new ShipLaser(this.scene, this.x, this.y);
        	this.scene.add.existing(shipLaser);
        	this.lasers.push(shipLaser);
        	this.lastShot = currentTime;
    	}
	}

We have to make one more edit to our Ship class to make the lasers function properly. The “preUpdate” javascript function enables us to describe behavior associated with our sprite. The game framework calls this function on every game tick. In the following code snippet, we’re going to remove laser objects that have reached the top of the screen. We start by building an array of lasers to remove from the scene. In the first loop, we search for lasers that have reached the top of the screen. (i.e. lasers[i].y <= 0) In the second loop, we remove the laser objects from the ship and destroy them. If you create game objects, it’s important to clean them up if you’re not using them.

	preUpdate(time, delta) {
    	super.preUpdate(time, delta);

    	var i = 0;
    	var j = 0;
    	var lasersToRemove = new Array();

    	for (i = 0; i < this.lasers.length; i++) {
        	if (this.lasers[i].y <= 0) {
            	lasersToRemove.push(this.lasers[i]);
        	}
    	}

    	for (j = 0; j < lasersToRemove.length; j++) {
        	var laserIndex = this.lasers.indexOf(lasersToRemove[j]);
        	this.lasers.splice(laserIndex, 1);
        	lasersToRemove[j].destroy();
    	}
	}

In the scene1 class, we need to add one more detail. The laser should fire when the user presses the space bar. Let’s edit the update method to fire the lasers.

```javascript
    update() {
        if (this.cursors.space.isDown) {
            this.myShip.fireLasers();
        }
        
```

If you’re interested in reviewing the completed code tutorial, feel free to visit my GitHub tutorial link.

In the next post, we’ll add some alien targets for our game. We’ll see you next time!

Space shooter graphic

If you’re really excited to learn more, I have found the learning from the examples very helpful.

Phaser Labs Examples

JavaScript Posts from InspiredToEducate.NET



Combating Summertime Boredom

As a college professor I have the option to take off about 8 weeks during the summer. I look forward every year to spending this time with my kiddos. During the school year we are constantly running from one activity to the next. It is so nice to be able to relax and have some space in our schedule. That said, I get bored easily. By this point in the summer my kiddos are really starting to pick at each other. This is often a recipe for disaster. In this post I want to share some of my strategies to combat summer boredom and to keep those young minds nimble.

If it were up to my kids, they would watch TV/play video games all day long. Honestly, that would make my life so easy! I could get so much done while they were complete zombies. However, I don’t want to melt their little brains so we try to limit the screen time in our house to two hours per day. The american average is greater than 7 hours.

Activity Books

A couple of the workbooks we use.

When I get up in the morning I need time to drink my coffee and get myself psyched up for the day. The kids often get up and immediately want to turn on the devices. One way that I manage to limit screen time is that I require my kids to eat breakfast, get dressed and spend sometime completing activities in summer bridge workbooks before they turn anything on. These can be found at your local bookstore or on Amazon. There are lots of options. I have one from Kumon, another from Sylvan Learning Centers and one from Brain Quest. I picked ones that corresponded to grade level and offered a variety of activities.

Visit the Local Library
I must admit, I do not use the library much at all during the school year. It is just too much for me to keep track of all the books checked out and stay on top of due dates. In the summer, on the other hand, I make a point to visit the library at least once a week. Most public libraries offer free summer activities for kids and my kids love to bring home new books to read. The variety helps us to keep reading all through the summer! One way to stay on top of the chaos is to have a designated place in the house for the library books. We have a crate where we keep all of our books so it is easy to grab on the way out of the house on library day.

Our library crate.

Play to Your Strengths!
I am a microbiologist and I teach general biology classes. I purchased a small digital microscope that we have been playing with this summer, exploring stuff that we can find in/around our homes. I have also adapted some of the labs that I use with my college kids for home use. I’ll save the details of those experiments for a later blog post, but here are some of the things we found in the backyard yesterday.

Check out the Local Attractions
We are very fortunate to live in Central Florida. We have lots of things that we can do outside the house. Some are free and others are incredibly expensive (I’m looking at you Mickey). We have memberships to the local zoo and to the science center. We also try to visit some of the lesser known attractions. Last summer we went to Gatorland. That place is so awesome! It is a look into what we would call “Old Florida” complete with gator wrestling!

Gator wrestling

Documentaries/Online Learning Programs
21st century kids are constantly exposed to electronic media. I try to be intentional about the type of media that my kids consume. Sometimes I let them choose a cartoon or show from the offerings on Netflix or Amazon Prime Video, but there is so much crap out there! I prefer that they choose shows/activities that are learning centered. For my pre-Kindergartner I like StoryBots (Netflix). She has learned so much from it! The older kids will even watch it wither her.

My fifth grader loves Jonathan Bird. He makes documentaries about sea life that are freely available through his website or through YouTube. Here is our favorite episode:

We also subscribe to the Smithsonian Channel and there are tons of great documentaries available for streaming through Netflix, Amazon and YouTube.

For learning games my kids enjoy the Prodigy math game and learning to program using Scratch ( https://scratch.mit.edu/ )

What sort of activities do you do in the summertime? I would love to know!

-Sarah

Build a Space Shooter with Phaser3 and JavaScript(Tutorial1)

Like many computer enthusiasts, I grew up playing video games on the classic Nintendo entertainment system. Some of my favorite games included Super Mario brothers, Legend of Zelda, Tetris, and Star Force. It’s been fun to share these game classics with my kids. They still find them fun. In this blog post series, I want to unpack building a 2D shooter game using Phaser3.js. Phaser3 provides a robust and fast game framework for early stage JavaScript developers.

From exploring the options in 2D game creation using Javascript, Phaser has grown an impressive community of game makers. Here are a few game samples that you would want to explore.

Space shooter assets from www.kenney.nl

In this post series, I wanted to collect a few resources, tools, and links to help you get started building a space shooter game with Phaser 3. We’ll be drawing from the inspiration of classic games like Space Invaders.

In terms of JavaScript writing style, we’re going to keep the code samples as simple as possible to express core concepts. If you need to get started with JavaScript, I recommend checking out the free sources at CodeAcademy to start exploring the language. We’ll be drawing inspiration from classic games like Galaga and Star Force. Even though I’m trying to unpack these ideas for early stage JavaScript coders, I also want to provide examples that leverage ES6 coding structures. The Phaser3 documentation does not focus on this style of code organization. In general, I want to explore programming concepts that provide nice encapsulation and readability. We also want to make sure we can extend these coding patterns well.

The game we’re building may feel similar to this work here:
http://users.aber.ac.uk/eds/CS252_games/mwg2/JSGame/

In this tutorial, we want to encourage you to setup your work environment with Visual Studio code. You can also inspect the tutorial code in the following glitch sample.

https://glitch.com/edit/#!/awg-tutorial?path=shooter.js:1:0

Setting up Visual Studio Code

In this series, I recommend setting up Visual Studio Code on your computer. It’s a robust tool for web development and works well for JavaScript projects. You can find instructions to install VS Code using this link. I also recommend using the Visual Studio Code Live server extension to make it easier to hot re-load your code changes. Please refer to the following video for details.

Downloading some boilerplate code

To save some time, I have organized a ZIP file with a collection of code and graphics that you can leverage in building your own shooter game. You’re encouraged to play and build with these assets, sounds, and code samples to elaborate on your own game. For this first exercise, we just want to get a ship displayed to the screen and move it around using arrow keys.

  • Download the boilerplate code from here.
  • Extract the ZIP file to a location on your computer. We’ll call this your working directory. For me, I might store my files in “c:\alienWarGame-tutorial1.”

Let’s explore the contents of this boilerplate code

  • shooter.js: This JavaScript file will contain our game objects and behavior code.
  • shooter.html: This HTML file provides a home for our JavaScript game code. (see the code below) Please note that we’re downloading phaser.js (version 3.11) from a content delivery network. In the body of the HTML file, we import our shooter.js. Remember to install “Live server” extension for Visual Studio. You will be able to right click on the code HTML file and select “open with Live server.” This will load the file on a small HTTP server on your computer. All phaser games need to be hosted on a web server.



    
    Space Shooter Tutorial 1
        
    


        

Breaking Down Shooter.js

All Phaser games start with a little bit of configuration. In this “config” object below, we establish a screen size of 800 pixels by 600 pixels. This will be our drawing surface for the game. To help detect if objects bump into each other, we will be leveraging the ‘arcade’ physics engine included in Phaser3.

var SCREEN_WIDTH = 800;
var SCREEN_HEIGHT = 600;
var config = {
    type: Phaser.AUTO,
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    physics: {
        default: 'arcade'
    }
};

Ok. Let’s build our Space ship player object. In Phaser 3, they have been working to improve the framework to leverage modern JavaScript features like Es6 classes. The class will help us store the properties of the ship. Properties will include stuff like the location of the ship on the screen, object state, and texture. The class will also include several methods for moving the ship around. In the constructor method, we accept a scene object and location on the screen. (x,y). The call to “super” and “setPosition” helps associate the sprite with the parent scene and location. We call “setTexture” using the parameter of ‘ship’ to associate the ship graphic with the sprite. Finally, we set some variables(deltaX, deltaY) to configure how much the ship will move when we press keys.

class Ship extends Phaser.GameObjects.Sprite  {

    constructor(scene, x , y) {
        super(scene, x, y);
        this.setTexture('ship');
        this.setPosition(x, y);
        this.deltaX = 5;
        this.deltaY = 5;
    }

    moveLeft() {
        if (this.x > 0) {
            this.x -= this.deltaX;
        }
    }

    moveRight() {
        if (this.x < SCREEN_WIDTH) {
            this.x += this.deltaX;
        }
    }

    moveUp() {
        if (this.y > 0) {
            this.y -= this.deltaY;
        }
    }

    moveDown() {

        if (this.y < SCREEN_HEIGHT) {
            this.y += this.deltaY;
        }
    }

    preUpdate(time, delta) {
        super.preUpdate(time, delta);
    }
}

In the following method called ‘moveLeft’, we implement the math to move the sprite to the left. Since we’re moving left, we subtract 5 pixels from the current x position. We only execute this code if x is greater than zero. Most of the other movement methods operate in a similar manner.

    moveLeft() {
        if (this.x > 0) {
            this.x -= this.deltaX;
        }
    }

Let’s make a scene!

In the following class, we have to establish a Phaser scene object. It has a few simple tasks. In the “preload” method, need we load the ship sprite graphic from our assets folder.

class Scene1 extends Phaser.Scene {

    constructor(config) {
        super(config);
    }

    preload() {
        this.load.image('ship', 'assets/SpaceShooterRedux/PNG/playerShip1_orange.png');
    }

    create() {
        this.cursors = this.input.keyboard.createCursorKeys();
        this.myShip = new Ship(this, 400, 500);
        this.add.existing(this.myShip);
    }

    update() {
        if (this.cursors.left.isDown) {
            this.myShip.moveLeft();
        }

        if (this.cursors.right.isDown) {
            this.myShip.moveRight();
        }

        if (this.cursors.up.isDown) {
            this.myShip.moveUp();
        }

        if (this.cursors.down.isDown) {
            this.myShip.moveDown();
        }

        if (this.cursors.space.isDown) {
            // shooting guns goes here
        }
    }
}

The create method has does additional setup for our scene. We establish a property called cursors that will be used for detecting keyboard input like the arrow keys. We also create a ship instance at (400,500) and add it to the scene.

    create() {
        this.cursors = this.input.keyboard.createCursorKeys();
        this.myShip = new Ship(this, 400, 500);
        this.add.existing(this.myShip);
    }

We now can start moving the ship around using the update method. The if statements in update help us detect the various arrow keys. We call the appropriate method on the ship. In other words, if we press the LEFT button, we should call this.myShip.moveLeft().

    update() {
        if (this.cursors.left.isDown) {
            this.myShip.moveLeft();
        }

        if (this.cursors.right.isDown) {
            this.myShip.moveRight();
        }

        if (this.cursors.up.isDown) {
            this.myShip.moveUp();
        }

        if (this.cursors.down.isDown) {
            this.myShip.moveDown();
        }

        if (this.cursors.space.isDown) {
            // shooting guns goes here
        }
    }

Here’s the final step, we associate our game configuration information to a new game. We then add our scene.

var game = new Phaser.Game(config);
game.scene.add('scene1', Scene1, true, { x: 400, y: 300 });

If you're really excited to learn more, I have found the learning from the examples very helpful.

Phaser Labs Examples

Play Time With Angular 15 and PhaserJS

Curious about building 2D games with web skills? In this online meetup, we'll explore tools and patterns to use PhaserJs and JavaScript to make engaging 2D games. We'll cover tools to make experiences with our favorite language: TypeScript. We'll also cover some cool updates from the latest release of Angular. Come join us to learn about the latest innovations from our Angular community. Look forward to connecting with like-minded Orlando developers and designers. Hope you can join us! Make sure to bring a friend too!