Git Product home page Git Product logo

tanks.js's Introduction

Tanks.js

Using Javascript and HTML5, watch the AI build up their army and battle each other! Planes, tanks, bases and medics make for an interesting battle every time. Units will retreat and get repaired, jets dogfight, and mammoth tanks rule the ground.

##View the latest demo Here!

Game Screenshot

The mobile version of this app exists, but is not stable on any device other than an iPhone 4S. We are working towards 30FPS+ battles on mobile. Desktop machines are tweaked for 60FPS+.

Google Chrome or Mozilla Firefox is recommended for this demo. OSX tends to run Tanks.js better in Safari than Chrome. IE is now partially supported.

###Special Credit goes out to:

###Developed by:

tanks.js's People

Contributors

blitzxion avatar derekgates avatar jmaygarden avatar

Stargazers

Mythril382 avatar xuegoo avatar Benjamin Churchill avatar jiancai.wang avatar Jiang Huajun avatar TheCoderPerson avatar Tony Homer avatar aka. bakaiku or @gdgdiler avatar Daniel Judge avatar  avatar  avatar  avatar

Watchers

 avatar  avatar OctonianCat avatar

tanks.js's Issues

Friendlies should call for help at X,Y ... not a constant known enemy location

Currently all units know where everyone else is.

This should be 'sandboxed' a little bit so that when a unit is needing assistance, it calls friendlies to a last known location of an enemy. The friendlies would then travel to that X,Y coordinate (that can be updated as long as someone has a SIGHT on the enemy) and then search for an enemy.

Friendlies currently get called in to help on an enemy and will constantly adjust for where the enemy is, regardless of if someone has LOS on it or not. This is cheating.

Turrets should always fire, not only in 30* range

Looks like AA turrets won't fire on planes most of the time due to the check of if the target is within a degree range.

Used to see turrets fire at planes and take them down, now just see them follow the plane around and never fire?

New TankStateEnum states...

Instead of hacking apart and causing new bugs/confusion with what state can eject what, maybe we should introduce new states and a method that can properly move units in an out of states.

Here's our current states:

var TankStateEnum = {
    IDLE : 0,
    MOVE : 1,
    TARGET_AQUIRED : 2,
    TARGET_IN_RANGE : 3,
    CRASH_AND_BURN : 4,
    EVASIVE_ACTION : 5, // New : Moving units can take evasive actions to retreat and heal
    STOP : 6 // New : Makes the units stop at their position, can start move again if attacked
}

We should add something like the following:


/*EVASIVE_ACTION*/
EVADE; // Replaces EVASION_ACTION. Obtain nearest base, go to it (obtains random point)
EVADE_AND_ATTACK; // While evading back to base, if attacked, attack nearby peeps
/* STOP */
STOP_AND_GUARD; // Replaces STOP. While at the base and healing for example, scan and attack for nearby units, but don't move out of position

Stuff like that!

Potential bug in logic for retreating

I witnessed the following:

Team Blue no longer had any bases on screen of their own but had some remaining units.
A Team Blue unit was receiving damage, and then got the indication to retreat (marked by a red plus)
Since there was no base for them to go back to, the unit that was supposed to retreat, just sat on the battlefield and did not move.
There was a friendly repair tank nearby, but that repair tank didn't go help the damaged tank, nor did the damaged tank head towards the repair tank.

The damage tank eventually "healed" just passed the retreat threshold, and then took off as expected.

Planes can render below other 'tanks'

Due to the rendering pipeline, we can draw planes under other 'tanks'.

        for (var n in Tanks) {
            if (Tanks.hasOwnProperty(n) && Tanks.contains(Tanks[n])) {
                if(TankTeam == null)
                    TankTeam = Tanks[n].getTeam();
                else if(Tanks[n].getTeam() != TankTeam)
                    AllOneTeam = false;

                Tanks[n].draw(ctx);
                Tanks[n].doStuff();
            }
        }

Since we don't sort by the type, a plan can render under a tank depending on where it is in the list.

Bias base start positions in centers of 4 quadrants of screen.

Need to bias the centers of the quarters of the screen when building bases.

With world wrap working fully, most of the battles are taking place in the edges instead of in the middle. If the bases started closer to the centers, more action would be in the center (like it used to be).

Missile units should not fire unless missile will hit target.

Missile based units will currently fire regardless if the missile will hit the target or not.

Units need to instead check angle of attack and distance from unit to determine if the missile has a good chance of hitting target. This is imperative as missiles usually have a long cooldown.

Support multiple weapon types.

Would be nice if certain tanks supported multiple weapon types (each with their own cooldown).

Mammoth would have slow reload rockets and dual cannons.
Fighter would have slow reload bombs.

Fighter jets don't slow down to fight other jets

Jets should adjust their speed to match their target (if it is a plane).

This really only applies to jets fighting bombers.

Keep in mind that the Drone plane is faster than the jet, so there needs to be a limit on how fast the planes can go. All units are typically running at max speed, so if the target is faster than your max speed, don't go faster, just follow if possible (or switch target, doesn't matter!)

Create a Mobile Healing Unit!

Concept:

  1. The healing unit will have no weapons (so it will not be firing anything at all)
  2. It will have a healing radius that moves with it.
  3. If friendly units appear inside the radius, they will heal 10% of their health but at a slower rate than what the base can do.
  4. Units will try to find this healing unit before return to base to heal during evasion
  5. The healing tank will search out units that have a % of health left and stick around until they are healed.

Performance!

I have created a new way of drawing objects (Tanks, bullets, etc) to the screen while keeping the GPU/CPU in mind.

So far:

Tanks

Tanks are drawn in two or more parts. It kinda goes like this: Body then Turret. A few tanks don't require turrets. There are also a few tanks who's base is entirely different than the standard rectangle most tanks have. They require special function calls to properly build. For example, the Mammoth, Healer and Howitzer tanks all have special frames that need to be built differently. It doesn't mean we can't cache them, just means we can't reuse code as much. Not a big deal.

Caching tank bodies and then just rotating them is far more friendlier on the computer than redrawing each path every pass on animation!

Turrets

Turrets (AA Guns, Base Defense Turret, Tank's turrets), can also be cached. There are several different size turrets and some turrets have multiple cannons attached. Enlarging turrets for tanks (Small tank vs. Large tank turrets) via canvas manipulation (after it has already been cached) will cause distortion and will make the turret ugly. So, sadly, we would have to cache all the turret sizes.

Cannons

Cannons are just single/double lines drawn on turrets. We can cache these at the same time with the turret in question. This seems like the best idea as this will reduce calls.

Planes

Planes are easy! No moving parts, no turret to mess with, just a image flying around!

Bullets

Bullets are getting their own special call to be drawn. They are also getting bigger (by .5px). Its an image that is just moved from one location to another. No rotation, no mess.

The Battlefield

The primary canvas will be getting split into two different canvas'. There will be the background, which will simply provide the following: Battlefield color, top/bottom banners, and text output. The secondary canvas, get this, will be absolutely positioned between the top/bottom banner. This will nicely fix any inside "Special case 20px BS!". Internal functions during resizing will manage location, width and height.

Text Output

Text output in canvas can be taxing. We don't have much going on "Text" wise, but we are constantly drawing it to the canvas, which eats up precious FPS! The best option here is the place all text in the background canvas and update it later. For example, the score counts can update every second (instead every 15ms!) The round timer can be updated on the second as well. The Debug Console and GOD options will be in the background as they never change "Text" wise, but change in color. The less the main work as to deal with "dormant" material, the better!

The FPS counter will likely be the exception to this move. Knowing in near real-time when the FPS drop is perfect for debugging.

Additional information

So, many of my ideas and decisions are from the following page:
http://www.html5rocks.com/en/tutorials/canvas/performance/

Tank/Plane/Turret building will need a lot of work to get the best performance out of it. Right now, I would say its in "Alpha" mode, where while it is definitely increasing performance, its also could be coded/organized much better... likely resulting in even more performance! Any help with this, or anything else with this performance will be greatly appreciated!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.