Making an HTML5 game using Paper.js

How I made Tank Hunter, a simple desktop HTML Canvas game.

Preface: I began this with very basic html, and css knowledge and a vague understanding of javascript.

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?

The how

The core is simple enough. A basic index.html file with some simple css to control things like menus, display and some of the interactivity. Overall though, 90% of the project was deep in javascript, most of that, deep in paperscript (a subtle variant of vanilla used for a more seamless paper.js experience) conducting the canvas orchestra. As with a lot of littler html projects I do these days I used surge.sh to host and deploy.

Design

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.

Gameplay

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.

Introducing AI

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.

Next steps

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!

--

--

Short project bios, devtips for use in my portfolio.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Al Hinds

Al Hinds

Write about all sorts of stuff. Dev. Sport. Life.