Create a huge portfolio of both mobile and desktop games with “HTML5 Game Development Mini-...

Ever wanted to build a portfolio of mobile and desktop HTML5 games? Of course you do, since mot of my blog readers.

I am showing you a course which will guide you through the creation of HTML5 games with the awesome Phaser framework, which are completely cross-platform, and can run both on desktop computers and mobile phones from day one.

In addition to building the games, you’ll also learn how to build your games as native applications using PhoneGap Build, to publish them on Apple App Store or Google Play.

I am talking about HTML5 Game Development Mini-Degree published by Zenva , the e-learning company which taught game development to over 250,000 students from all over the world.

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();

And this is a screenshot of the first game you will be able to build:

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.

關鍵詞:HTML5 移動開發 遊戲開發


Progressive Web Games

10 JavaScript Engines To Develop Your Own Mobile And Web Games

Super Mario who? HTML5 platformer prototype inspired by iOS hit “Yeah Bunny” thanks to Phas...

How to integrate Facebook Instant Games API in your Phaser game – saving game information

90% Off: Get The Complete VR Development Bundle for Only $34

Create Native HTML5 Games with Phaser and Capacitor

Developing Cobalt Dungeon using Phaser and Cordova

How to integrate Facebook Instant Games API in your Phaser game

HTML5 “Flappy Bird” prototype updated to Phaser 2.10.1 with more room for customization

Phaser HTML5 game framework 3.0 ships