Hey, whats up! Long time writing a tutorial. So here is small series on game development & AI. Not a big game, but enough to get started on your own. Make sure to download the complete project.
Also in the next article, I will be adding an Artificial neural network to this game, so that, it can play on it own.
[wpi_designer_button text=’Download’ link=’https://github.com/arjunsk/phaser_ai_game’ style_id=’48’ icon=’github’ target=’_blank’]
Phaser.io
I was searching for a web based game-dev framework and found Phaser to be a perfect find. Frankly, it is smoother in rendering game objects.
Getting Started:
Here is the basic structure of a Phaser game.
index.html :
<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Jumbo</title> http://lib/phaser.min.js http://game_logics.js </head> <body></body> </html>
game_logic.js
var w=800; var h=400; // #1 : Create game canvas for rendering the game UI var game = new Phaser.Game( w, h, Phaser.CANVAS, 'phaser-game', { preload: preload, create: create, update: update, render: render } ); //#2 : Loads game assets from directory function preload() { game.load.image('background', 'assets/game/background.png'); } //#3 : Declare all the game objects var gameObj1; var gameObj2; ...... //#4 : Initialise game objects and set its properties function create() { gameObj = game.add.sprite(x-cord, y-cord, 'gameobject_name_in_preload'); } //#5 : This part handles games fps. For eg:- We can get objects position cordinates, for each frame here. function update() { if( jumpButton.isDown ){ jump(); // modularize function to handle jump event } } //#6 : Helps in debugging function render () { }
If you want to know more in depth about the specific inbuilt functions, refer to this thread.
Now I will be breaking down my game_logic.js into smaller parts, give you a brief overview.
Part 1:
var w=800; var h=400; //Game object is the heart of your game, providing quick access to common functions and handling the boot process. var game = new Phaser.Game(w, h, Phaser.CANVAS, 'phaser-game', { preload: preload, create: create, update: update, render: render }); function preload() { //load.image() is used to load normal images game.load.image('background', 'assets/game/background.png'); //load.spritesheet() is used to load sprite sheets as shown below( these are turned into animations ) game.load.spritesheet('player', 'assets/sprites/player.png',32 ,48); game.load.image('ufo', 'assets/game/ufo.png'); game.load.image('bullet', 'assets/sprites/purple_ball.png'); game.load.image('menu', 'assets/game/menu.png'); //load.audio() is used to load audio assets game.load.audio('jump' , 'assets/audio/jump.mp3' ); game.load.audio('game_over' , 'assets/audio/game_over.wav' ); }

Part 2:
// Game object declarations var player; var bg; var bullet; var bullet_fired=false; var ufo; var jumpButton; var menu; var bullet_speed; var bullet_displacement; var stay_on_air; var stay_on_floor; var auto_mode = false; // Sound var soundGameOver; var soundJump;
PART 3:
function create() { // Setting game object's property game.physics.startSystem(Phaser.Physics.ARCADE); // This is the reason why objects fall to ground, rather than floating game.physics.arcade.gravity.y = 800; // alter this value to get gravity effects of moon and earth 😛 game.time.desiredFps = 30; // Setting game fps // Adding game objects bg = game.add.tileSprite(0, 0, w, h, 'background'); // tiled background ( top-left cord, bottom-right cord, game object name ) ufo = game.add.sprite(w-100, h-70, 'ufo'); // param1 = x-cord, param2 = y-cord , param3 = game object name given in the preload() bullet = game.add.sprite(w-100, h, 'bullet'); player = game.add.sprite(50, h, 'player'); // Setting player object's property game.physics.enable(player); player.body.collideWorldBounds = true; // Reason why player doesn't fall off the screen. var run = player.animations.add('run'); // Adds player running animation, looping the sprite player.animations.play('run', 10, true); // 10 is the fps // Setting bullet object's property game.physics.enable(bullet); // Adding physics object property, like gravity etc to bullet bullet.body.collideWorldBounds = true; // Pause Text Label // Note: we are positioning everything with respect to w,h pause_label = game.add.text(w - 100, 20, 'Pause', { font: '20px Arial', fill: '#fff' }); pause_label.inputEnabled = true; // reason why it is clickable pause_label.events.onInputUp.add(pause, self); // adding onClick function ie pause() game.input.onDown.add(un_pause, self); //handles menu button click based on pointer click ( when paused ) jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); // Adding spacebar to key events //Sound ( initializing audio from game assets ) soundJump = game.add.audio('jump'); soundGameOver=game.add.audio('game_over'); }
PART 4:
function update() { bg.tilePosition.x -= 1; //moving background // collisionHandler function is called when bullet and player collides game.physics.arcade.collide(bullet, player, collisionHandler, null, this); // Finding the distance between player and bullet bullet_displacement = Math.floor( player.position.x - bullet.position.x ); // Manual Jump if( jumpButton.isDown && player.body.onFloor() ){ jump(); } // Fires again automaitcally if( bullet_fired==false ){ fire(); } //Reload bullet if( bullet.position.x <= 0 ){ reset_state_variables(); } }
PART 5:
function getRandomSpeed(min, max) { // Returns a random value between min and max return Math.floor(Math.random() * (max - min + 1)) + min; } function fire(){ bullet_speed = -1 * getRandomSpeed(300,800); //-1 because, object should move in the -x direction bullet.body.velocity.y = 0 ; // Bullet is not having vertical motion bullet.body.velocity.x = bullet_speed ; bullet_fired=true; } function collisionHandler(){ soundGameOver.play(); pause(); } function pause(){ game.paused = true; // This pauses the game game.sound.mute = false; // This is used to play the background music even when the game is paused menu = game.add.sprite(w/2,h/2, 'menu'); // Here we create a menu as a image in photoshop(shown below) menu.anchor.setTo(0.5, 0.5); // set the position of the menu image relative to the x/y coordinates. // BTW: menu is of dimensions : 270x180 } function un_pause(event){ if(game.paused){ // checks if game is paused or not // Calculate the corners of the menu var menu_x1 = w/2 - 270/2, menu_x2 = w/2 + 270/2, menu_y1 = h/2 - 180/2, menu_y2 = h/2 + 180/2; var mouse_x = event.x , mouse_y = event.y ; //if mouse is clicked within the menu if(mouse_x > menu_x1 && mouse_x < menu_x2 && mouse_y > menu_y1 && mouse_y < menu_y2 ){ if(mouse_x >=menu_x1 && mouse_x <=menu_x2 && mouse_y >=menu_y1 && mouse_y <=menu_y1+90){ // if mouse is clicked on first option auto_mode = false; }else if (mouse_x >=menu_x1 && mouse_x <=menu_x2 && mouse_y >=menu_y1+90 && mouse_y <=menu_y2) { // if mouse is clicked on second option auto_mode = true; } menu.destroy(); reset_state_variables(); game.paused = false; } } } function reset_state_variables(){ //Reset player player.body.velocity.x=0; player.body.velocity.y=0; player.position.x=50; //Reset bullet bullet.body.velocity.x = 0; bullet.position.x = w-100; bullet_fired=false; } function jump(){ soundJump.play(); player.body.velocity.y = -270; // we give -velocity to y direction for jumping. Consider that this velocity(Force) is against the gravity }

That is pretty much it. I guess, this covered all the functions related to the game. Now in the next section, I will brief you about integrating AI into this game.
Also, make sure to read the getting started & start your first game section from phaser. (It is not that boring :P)
So inorder to run this game, you need to host it in a web server. I personally use JetBrains WebStorm IDE which handles this. Also, make sure to run this game on chrome.
Happy coding!