Glitch.com & Phaser.js

Back Story

glitch.com is a code playground a good place to learn to code. Phaser is an open source project which allows you to make code based games. To get started we will try to play a half-finished game and then click the Fish and then Remix on Glitch to improve it. �→ https://grid-game-template.glitch.me/

Change Gravity

Starting Level

Make your player jump for longer by changing the gravity of the player. Keep this variable positive or you’ll float up!

var gravity = 500;

​

​

If 500 the starting value for gravity will you need to increase it or decrease it to jump higher?

​

​

Change the code and click Show to see the result

Change Colour

Starting Level

Find the number code which sets the background colour.

game.stage.backgroundColor = "#5699ab";

Change the number code to the colour code you want.

blue = "#5699ab"; black = "#000000";

green = #00c934; purple = "#ff33c3";

​

.

Movement Speed

Starting Level

Make your player move faster or slower by changing how value of this code variable

var velocity_x = 100;

velocity_x is the left and right speed

velocity_x = 50 is too slow probably

velocity_x = 1000 is too fast so find a good value somewhere in the middle

​

​

​

​

Change Game Layout

Next Level

Change the the code that looks like this.

​

Inside You can add or move platforms, hazards and coins.�x = platform, o = coin, h = hazard.�Be sure to keep the “” speech marks and end commas in place!

Change Player Look

Boss Level

Change the look of your player by changing this code (it’s near the top).

Replace highlighted link code with a new image link. Images live in the assets area.

Click on new image, then copy button to get a new link

Paste it game.js file - keep the speech marks!

To draw your own image see this help file.

Change Hazard Look

Boss Level

Change the look of your enemy by changing this code (it’s near the top).

Replace highlighted link code with a new image. Images live in the assets directory.

Click on new image, then copy button to get a new link

Paste it game.js file - keep the speech marks!

To draw your own image see this help file.

Change Sound Effects

Boss Level

Change sound made when collect by changing this code (it’s near the top).

Replace highlighted link code with a new sound file from the assets area.

Click on name of a new sound, then Copy button to get a new link.

Paste it game.js file - keep the speech marks! To create and add your own sounds see this

Balance your Game

Boss Level

Make sure your game is not too hard and not too easy. You have three minutes to get your game ready for someone else to play. They should be able to complete it but not on the first attempt.

​

Game Making using Design Patterns

#missions

A menu of game patterns you can add to your game - game mechanics, space, polish and challenge.

​

#maps

A map of the learning dimensions you can learn by making your game - coding concepts, design and systems patterns.

​

#methods

A guide to for learner and facilitators to help navigate your learning and reflect on what you are learning.

​

These resources are designed to help you support your game making journey in a playful way.

Icons by freepik