A Simple JQuery game

Creating a simple JQuery game

JQuery is a lightweight library very usefull for dom manipulation and simple animations.
Based on this library in 2017 I’ve created this small example of how it can be used to create a small browser game.
It consinst in a single monolithic javascript file which contains an object called "Game".

The DOM:

The html of the page contains few elements

• the stage (all the screen)
• an instance of the "shoot"
• the start button
• the score
• the toolbar

When the dom is ready the game start.
The main goal of the game is to kill the opponents by shooting them. They will also will shoot you trying to kill you.
There are 2 bars under each player and each mob.
The first is the health and when it0s finished the player dies. The second is the mana (or the nergy) required to shoot or heal.
Each shoot or heal consumes energy which is regenerated slowly but automatically. You can also take energy potions or mana potions to fill’em up.
by clicking on the stage your character will move to that location. Clicking on an enemy your character will target it.
The button shoot (or keyboard "1") will shoot at your target.
You can also target a team member and click heal button (or keyboard "2") to heal him.
Healing players consumes energy too. When energy is too slow you can not shoot or heal anymore.
There is a maximum range dinstace to shoot and heal.

Let’s see the code

On DOM ready the stage is cleaned and the toolbar is populated.
Then the game object is instatiated and the toolbar buttons will take an event handler for the click event.
The start() method of the game object finally will start the game.

https://github.com/simonecosci/game/blob/master/index.html

The assets

The game assets are placed in the imgs and in the css folders

The engine

The entire game engine is placed in the file js/Game.js and it’s structured as follow:

var Config = {} // game configuration

var Game = function() {
    // the Game object
    this.start = function() {
        // begin the game
    }
}

Inside the game there are other usefull functions to create objects (bullets), players, to spawn potions, to calculate distances, trip durations, collisions etc.

Let’s try it

Click here to Play

var Config = {
    respawn: 5000,
    cheats: true,
    shotCD: 200,
    healCD: 200,
    me: {
        img: {
            stop: "imgs/dami.gif",
            walk: "imgs/dami.gif",
            shot: "imgs/speedy-bullet-th.png"
        },
        speed: 300,
        shotSpeed: 400,
        shotManaCost: 3,
        minDamage: 10,
        maxDamage: 200,
        minRange: 0,
        maxRange: 600,
        healManaCost: 20,
        minHeal: 30,
        maxHeal: 800,
        health: 1000,
        mana: 100,
        healthRegen: 50,
        manaRegen: 5,
        itemWidth: 100,
        itemHeight: 100,
        immortal: true,
        endlessmana: true
    },
    mana: {
        itemWidth: 50,
        itemHeight: 50,
        img: {
            stop: "imgs/magic_triangle_flask-256.png"
        },
        respawn: 20000,
        value: 50
    },
    health: {
        itemWidth: 50,
        itemHeight: 50,
        img: {
            stop: "imgs/magic_square_flask-256.png"
        },
        respawn: 20000,
        value: 50
    },
    team: {
        maxSpawn: 1,
        img: {
            stop: "imgs/dami.gif",
            walk: "imgs/dami.gif",
            shot: "imgs/speedy-bullet-th.png"
        },
        speed: 200,
        shotSpeed: 400,
        shotManaCost: 10,
        minDamage: 20,
        maxDamage: 120,
        minRange: 0,
        maxRange: 300,
        healManaCost: 10,
        minHeal: 30,
        maxHeal: 80,
        health: 1000,
        mana: 100,
        timeout: 1000,
        healthRegen: 5,
        manaRegen: 10,
        itemWidth: 100,
        itemHeight: 100,
        immortal: false,
        endlessmana: false
    },
    mobs: {
        maxSpawn: 2,
        img: {
            stop: "imgs/boss1.gif",
            walk: "imgs/boss1.gif",
            shot: "imgs/banana.png"
        },
        speed: 200,
        shotSpeed: 200,
        shotManaCost: 10,
        minDamage: 20,
        maxDamage: 120,
        minRange: 0,
        maxRange: 600,
        healManaCost: 10,
        minHeal: 30,
        maxHeal: 80,
        health: 1000,
        mana: 100,
        timeout: 1000,
        healthRegen: 5,
        manaRegen: 10,
        itemWidth: 150,
        itemHeight: 150,
        immortal: false,
        endlessmana: false
    }
};

Progect on GitHub: https://github.com/simonecosci/game