In this tutorial, we will be creating two popular mobile games, Flappy Bird and Doodle Jump, using JavaScript. We will be using the Phaser game engine for this tutorial.
Flappy Bird is a simple, but addictive game where you navigate a bird through a series of pipes. Doodle Jump is a more complex game where you navigate a character up a series of platforms.
We will start by creating the basic structure of the game. This includes the game canvas, the game state, and the player object.
Next, we will add the code to make the player jump. We will also add code to make the player move left and right.
Finally, we will add the code to make the bird fly and the obstacles move. We will also add code to make the game more challenging.
Here is the complete code for the Flappy Bird game:
var game = new Phaser.Game(640, 480, Phaser.AUTO, ‘game’); // create game canvas game.add.sprite(0, 0, ‘bird’); // create bird sprite game.add.sprite(100, 100, ‘pipe’); // create pipe sprite game.state.start(‘Main’); // start game state function Main() { // initialize player object player = { x: 100, y: 100 }; // move player left and right player.x -= 3; player.y -= 3; // make player jump if (player.y > 400) { player.y = 400; } // make bird fly if (player.x > 640) { player.x = 640; } // make obstacles move if (Math.random() > 0.5) { // create new pipe at random position pipe = game.add.sprite(Math.random() * game.width, Math.random() * game.height, ‘pipe’); } else { // remove existing pipe if it exists pipe = game.remove.sprite(pipe.x, pipe.y); } }
And here is the complete code for the Doodle Jump game:
var game = new Phaser.Game(640, 480, Phaser.AUTO, ‘game’); // create game canvas game.add.sprite(0, 0, ‘character’); // create character sprite game.add.sprite(100, 100, ‘platform’); // create platform sprite game.state.start
