“Dashy Panda” tutorial series gets a new update with coins to collect.
Since we care to reuse objects and sprites as much as we can, there is only one coin which is placed some pixels away from the right edge of the screen, then moves towards the player – remember: in endless runners the player does not run, it’s the whole environment which moves towards the player – just to be placed once more some pixels away from the right edge of the screen if the player collects it or if the coin leaves the screen to the left side, because the player failed to collect it.
To add some difficulty to the game, coins are moved up and down with a tween, so you will need some timing skill to collect them if they are close to a spike.
Have a look at the game:
Tap/click and hold to move the panda, avoid spiked and collect coins.
If you touch a spike, it’s game over and you will restart the game.
The lack of background graphics does not help you understanding how fast the panda is moving, I am going to add environment graphics in next step.
Have a look at the completely commented source code:
let game;
let gameOptions = {
// ground height, in pixels
groundHeight: 40,
// panda movement range, in pixels
pandaMovement: [40, 160],
// panda speed, in pixels per second
pandaSpeed: 200,
// pixels distance range between spikes
spikeGap: [50, 140],
// spike speed, in milliseconds to complete the tween
spikeSpeed: [350, 700],
// spike loop delay, in milliseconds
spikeDelay: [300, 700],
// height of the spike, in pixels
spikeHeight: [20, 55],
// distance range from the right edge of the game and the coin, in pixels
coinRange: [50, 150]
}
window.onload = function() {
let gameConfig = {
type: Phaser.AUTO,
backgroundColor:0x6cc9bf,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
parent: "thegame",
width: 480,
height: 320
},
physics: {
default: "arcade",
arcade: {
// debug: true
}
},
scene: playGame
}
game = new Phaser.Game(gameConfig);
window.focus();
}
class playGame extends Phaser.Scene{
constructor(){
super("PlayGame");
}
preload(){
this.load.image("ground", "ground.png");
this.load.image("panda", "panda.png");
this.load.image("spike", "spike.png");
this.load.image("coin", "coin.png");
}
create(){
// physics group which contains all spikes
this.spikeGroup = this.physics.add.group();
// first spike position is in the horizontal center of the canvas
let spikeX = game.config.width / 2;
// we place 10 spikes. 10 are more than enough to give the feeling of an endless runner
for(let i = 0; i < 10; i++){
// spike creation
let spike = this.spikeGroup.create(spikeX, game.config.height - gameOptions.groundHeight, "spike");
// spike registration point is center / bottom
spike.setOrigin(0.5, 0);
// immovable - won't move if something collides with it
spike.setImmovable(true);
// set the physics body size smaller than the spike itself, so the game will sometimes forgive the player
spike.setSize(12, 40, true);
// method to create a tween and attach it to the spike
this.createTween(spike);
// determine next spike position
spikeX += Phaser.Math.Between(gameOptions.spikeGap[0], gameOptions.spikeGap[1]);
}
// add the panda to the game
this.panda = this.physics.add.sprite(gameOptions.pandaMovement[0], game.config.height - gameOptions.groundHeight, "panda");
this.panda.setOrigin(0.5, 1);
this.panda.setSize(24, 30, true);
// the panda can move only until it reaches pandaXLimit. Then the
// whole game will move towards the panda
this.panda.canMove = true;
// isMoving tells if the panda or the whole game are moving. In other
// words if the player wants to move the panda, no matter what is
// actually being moved
this.panda.isMoving = false;
// add the coin to the game
this.coin = this.physics.add.sprite(game.config.width + Phaser.Math.Between(gameOptions.coinRange[0], gameOptions.coinRange[1]), this.panda.y - this.panda.getBounds().height / 2, "coin");
this.coin.setCircle(10);
// tween to move the coin up and down
this.tweens.add({
targets: this.coin,
y: game.config.height / 2,
duration: 1000,
repeat: -1,
yoyo: true,
ease: "Cubic.easeOut"
})
// add the ground to the game
let ground = this.add.sprite(0, game.config.height - gameOptions.groundHeight, "ground");
ground.setOrigin(0, 0);
// move the panda when an input is pressed
this.input.on("pointerdown", this.movePanda, this);
// stop the panda when an input is released
this.input.on("pointerup", this.stopPanda, this);
}
createTween(object){
this.tweens.add({
// object affected by the tween
targets: object,
// y position to tween
y: game.config.height - gameOptions.groundHeight - Phaser.Math.Between(gameOptions.spikeHeight[0], gameOptions.spikeHeight[1]),
// tween duration
duration: Phaser.Math.Between(gameOptions.spikeSpeed[0], gameOptions.spikeSpeed[1]),
// play the tween forever
repeat: -1,
// playing the tween back and forth
yoyo: true,
// tween easing
ease: "Quint.easeIn"
})
}
movePanda(){
// the idea is: if the panda can move, then move the panda, else
// move all spikes and the coin towards the panda. Then set isMoving to true
if(this.panda.canMove){
this.panda.body.velocity.x = gameOptions.pandaSpeed;
}
else{
this.spikeGroup.setVelocityX(-gameOptions.pandaSpeed);
this.coin.setVelocityX(-gameOptions.pandaSpeed);
}
this.panda.isMoving = true;
}
stopPanda(){
// the idea is: stop the panda and all spikes as well as the coin, set isMoving to false
this.panda.setVelocityX(0);
this.spikeGroup.setVelocityX(0);
this.coin.setVelocityX(0);
this.panda.isMoving = false;
}
getRightmostSpike(){
// getting rightmost spike
let rightmostSpike = 0;
this.spikeGroup.getChildren().forEach(function(spike){
rightmostSpike = Math.max(rightmostSpike, spike.x);
});
return rightmostSpike;
}
update(){
// this is how I make the panda stop when it reaches its maximum
// horizontal position and start moving the environment instead
if(this.panda.canMove && this.panda.x > gameOptions.pandaMovement[1]){
this.panda.canMove = false;
this.panda.body.velocity.x = 0;
this.movePanda();
}
// recycle the coin if it leaves the screen to the left
if(this.coin.getBounds().right < 0){
this.coin.x = game.config.width + Phaser.Math.Between(gameOptions.coinRange[0], gameOptions.coinRange[1]);
}
// recycle spikes when they leave the screen
this.spikeGroup.getChildren().forEach(function(spike){
if(spike.getBounds().right < 0){
spike.x = this.getRightmostSpike() + Phaser.Math.Between(gameOptions.spikeGap[0], gameOptions.spikeGap[1]);
spike.y = game.config.height - gameOptions.groundHeight;
this.tweens.killTweensOf(spike);
this.createTween(spike);
}
}, this);
// restart the game if the panda hits the spikes
this.physics.world.collide(this.panda, this.spikeGroup, function(){
this.scene.start("PlayGame");
}, null, this)
// recycle the coin if the panda hits it
this.physics.world.overlap(this.panda, this.coin, function(){
this.coin.x = game.config.width + Phaser.Math.Between(gameOptions.coinRange[0], gameOptions.coinRange[1]);
}, null, this)
}
}
Now the panda must survive and collect coins, how about keeping track of the best distance travelled? Stay tuned, meanwhile download the source code.
