Talking about Bouncing Ball game, Game development, HTML5, Javascript and Phaser.
Did you already play Bouncing Ball? It’s available for both iOS and Android.
In this simple but fun Ketchapp studio game, you have to bounce the ball and avoid touching the obstacles.
You can’t control the ball, as it bounces on its own, you can just speed up its speed during descent by tapping the screen, in a way which remindes a bit Tiny Wings.
Have a look:
The only chance you have to survive is by tapping the game and increase ball speed at the right time.
The whole source code is less than 100 lines of code, thanks to the power of Phaser 3 and Arcade physics, there is also high score management and room for customization.
The only tricky part was the one where ball speed is increased avoiding the ball to bounce higher.
This is made by resetting ball speed at each floor collision.
Since I am not that much into physics formula, the proper speed is calculated at the first bounce.
Look at the source code:
var game;
var gameOptions = {
bounceHeight: 300,
ballGravity: 1200,
ballPower: 1200,
obstacleSpeed: 250,
obstacleDistanceRange: [100, 250],
localStorageName: 'bestballscore'
}
window.onload = function() {
let gameConfig = {
type: Phaser.AUTO,
backgroundColor:0x87ceeb,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
parent: 'thegame',
width: 750,
height: 500
},
physics: {
default: 'arcade'
},
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('ball', 'ball.png');
this.load.image('obstacle', 'obstacle.png');
}
create(){
this.obstacleGroup = this.physics.add.group();
this.firstBounce = 0;
this.ground = this.physics.add.sprite(game.config.width / 2, game.config.height / 4 * 3, 'ground');
this.ground.setImmovable(true);
this.ball = this.physics.add.sprite(game.config.width / 10 * 2, game.config.height / 4 * 3 - gameOptions.bounceHeight, 'ball');
this.ball.body.gravity.y = gameOptions.ballGravity;
this.ball.setBounce(1);
this.ball.setCircle(25);
let obstacleX = game.config.width;
for(let i = 0; i < 10; i++){
let obstacle = this.obstacleGroup.create(obstacleX, this.ground.getBounds().top, 'obstacle');
obstacle.setOrigin(0.5, 1);
obstacle.setImmovable(true);
obstacleX += Phaser.Math.Between(gameOptions.obstacleDistanceRange[0], gameOptions.obstacleDistanceRange[1])
}
this.obstacleGroup.setVelocityX(-gameOptions.obstacleSpeed);
this.input.on('pointerdown', this.boost, this);
this.score = 0;
this.topScore = localStorage.getItem(gameOptions.localStorageName) == null ? 0 : localStorage.getItem(gameOptions.localStorageName);
this.scoreText = this.add.text(10, 10, '');
this.updateScore(this.score);
}
updateScore(inc){
this.score += inc;
this.scoreText.text = 'Score: ' + this.score + '\nBest: ' + this.topScore;
}
boost(){
if(this.firstBounce != 0){
this.ball.body.velocity.y = gameOptions.ballPower;
}
}
getRightmostObstacle(){
let rightmostObstacle = 0;
this.obstacleGroup.getChildren().forEach(function(obstacle){
rightmostObstacle = Math.max(rightmostObstacle, obstacle.x);
});
return rightmostObstacle;
}
update(){
this.physics.world.collide(this.ground, this.ball, function(){
if(this.firstBounce == 0){
this.firstBounce = this.ball.body.velocity.y;
}
else{
this.ball.body.velocity.y = this.firstBounce;
}
}, null, this);
this.physics.world.collide(this.ball, this.obstacleGroup, function(){
localStorage.setItem(gameOptions.localStorageName, Math.max(this.score, this.topScore));
this.scene.start('PlayGame');
}, null, this);
this.obstacleGroup.getChildren().forEach(function(obstacle){
if(obstacle.getBounds().right < 0){
this.updateScore(1);
obstacle.x = this.getRightmostObstacle() + Phaser.Math.Between(gameOptions.obstacleDistanceRange[0], gameOptions.obstacleDistanceRange[1]);
}
}, this)
}
}
It’s still uncommented because I need to add coins to collect, then the final version will be commented. Meanwhile download the source code and look how another fun game has been built in a few lines thanks to Phaser 3.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.