Game AI using and Synaptic : PART 1

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=’’ style_id=’48’ icon=’github’ target=’_blank’]

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>
        <meta charset="UTF-8" />





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

    // is used to load audio assets'jump' ,      'assets/audio/jump.mp3' );'game_over' , 'assets/audio/game_over.wav' );
Sprite sheet
Sprite sheet

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;


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
    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'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, 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    ='jump');'game_over');



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

    // Fires again automaitcally
    if( bullet_fired==false ){

    //Reload bullet
    if( bullet.position.x <= 0  ){



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 ;

function collisionHandler(){;

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;

            game.paused = false;


function reset_state_variables(){
    //Reset player
    //Reset bullet
    bullet.body.velocity.x = 0;
    bullet.position.x = w-100;


function jump(){;
    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!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s