Making an HTML5 game using Paper.js
How I made Tank Hunter, a simple desktop HTML Canvas game.
Why do I like tanks? I have NFI, but I do and when I needed an idea to make a game just before the second year uni-break, I thought the idea of a tank game would be pretty friggin’ fun.
Overall the project took me a little under two weeks. I wasn’t working on it everyday, but it was a nice procrastination tool during the end of my exam period.
I had a basic idea of what I wanted to do but it was really a ‘let’s see where this goes’ type of thing and so there were many points where — had I had my time again I probably would’ve made different decisions — but that’s learning ‘innit?
Throwing together graphics quickly tends to lend itself to simple shortcuts. My tanks were collections of basic shapes and polygons, collected and packaged together with some basic functionality. My explosions, randomly dispersing circles that dissipate over time. My shells, fast-moving circles.
Before I had any real gameplay I set up some basic up-down-left-right w-a-s-d controls for tank and turret control so I could test the feel. I wanted it to be sluggishly responsive and simple enough to master the basics.
I set the game up as a contest between two teams; green, black, with the user identified as a yellow and black hybrid (for differentiation), as a member of the black team. The core gameplay revolves around moving across the map to meet the enemy. Shots from longer distances can deflect, or at the very least do lesser damage. Point blank can do critical damage, disabling and even destroying the tank. There are accuracy bonuses if the tank is not moving, with a minor scatter if the tank is moving.
Basic AI was simple. Get the tanks to try and move toward and enemy. When in range, begin shooting. This algorithm was run on every repaint, and meant games ended relatively quickly but it turned out to be a) slightly boring and predictable, and b) slightly too difficult to beat the AI. The tanks also didn’t use their turret and I wanted them to.
After a lot of tweaking, the addition of an invisible vision cone ahead of the tanks to introduce ray casting type target tracking, and a much more vague level of information provided to the AI the game was a lot more playable. I was wary to go to deep on tweaking.
Even though this was very much a toy project I have two main things I’d like to do to extent the game.
- Integrate with a free database to get some high scores permanency.
- And add a co-op mode (at the very least some basic-level of multiplayer)
For now though, check it out and let me know what you think.
The game is live here.
And the source code for the project is on github here.
Let me know what you think!