Create a huge portfolio of both mobile and desktop games with “HTML5 Game Development Mini-Degree” course, now in early access
Talking about Game development, HTML5, Javascript, Monetize and Phaser.
Do you like my tutorials?
Then consider supporting me on Ko-fi.
The course consist in several videos which will explain you how to build HTML5 Phaser games step by step, from the game design document to the coding itself.
To help people like me who are not native English speakers, english subtitles are provided to ensure you can’t miss a single word.
Back to the course, it will teach you how to:
* Create cross-platform games with Phaser 3
* Craft worlds with physics, sprites and tilemaps
* Use animations and impactful camera effects
* Publish to mobile platforms using PhoneGap
Obviously while you learn these concepts, you will be building actual games like a road crossing game, a virtual pet game, a platformer and a top down action RPG.
Each step of the course has its source code available for you to play and experiment, and it’s really clean and easy to modify, as you can see from this excerpt:
// this is called up to 60 times per second
gameScene.update = function(){
// don't execute if we are terminating
if(this.isTerminating) return;
// check for active input (left click / touch)
if(this.input.activePointer.isDown) {
// player walks
this.player.x += this.playerSpeed;
}
// treasure overlap check
let playerRect = this.player.getBounds();
let treasureRect = this.goal.getBounds();
if(Phaser.Geom.Intersects.RectangleToRectangle(playerRect, treasureRect)) {
console.log('reached goal!');
// end game
return this.gameOver();
}
// get enemies
let enemies = this.enemies.getChildren();
let numEnemies = enemies.length;
for(let i = 0; i< numEnemies; i++) {
// enemy movement
enemies[i].y += enemies[i].speed;
// check we haven't passed min or max Y
let conditionUp = enemies[i].speed < 0 && enemies[i].y <= this.enemyMinY;
let conditionDown = enemies[i].speed > 0 && enemies[i].y >= this.enemyMaxY;
// if we passed the upper or lower limit, reverse
if(conditionUp || conditionDown) {
enemies[i].speed *= -1;
}
// check enemy overlap
let enemyRect = enemies[i].getBounds();
if(Phaser.Geom.Intersects.RectangleToRectangle(playerRect, enemyRect)) {
console.log('Game over!');
// end game
return this.gameOver();
}
}
};
It’s a fantasy-themed Road Crossing Game with cool camera effects, collision detection, and everything you need to create a game like Frogger.
Phaser 3 was released only a few weeks ago, so you will understand the importance of being among the first to learn it: you will forerun other developers if you master the framework before they do.
That’s why I recommend you to get HTML5 Game Development Mini-Degree while it’s in early access, you will build a great portfolio of games and you will also get a certification to show on your curriculum or on your LinkedIn profile. Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.