Skip to main content

My Game: Canon Defense

If you know about #js13kgames contest you might be interested in my small game created for it.

I called it Cannon Defense, but the sole purpose of creating it was to learn in practice how to create a game. You can say that it looks ugly, or is small, but for me it was great co create it.

My submission is not yet online so if you want, play it at:

Code is on github:

What I have learned:

User constructor and prototype inheritance for game objects.

function Bullet(x, y){
   this.x = x;
   this.y = y;
Bullet.prototype.draw = function(ctx){
   ctx.drawRect(x, y, 10, 10);

It will be more memory efficient.

Do not use translations to move objects
For me it was hard to manage bullets flying at various angles and the first idea was to translate all bullets to cannon position, then add some offset variable and just move bullet on one X or Y angle using offset.
It worked :)
Until I had to check for enemy/bullet collisions...
I had to refactor the whole thing to have my version of velocityX and velocityY and just draw bullets without transformations.
But I still use scale for red blood ovals after enemy dies. I think it is ok.

I don't have it in my game but I should:

Object Pools
I don't have this in my game for for all objects like bullets and enemies. However, it would be much wiser to use some pool that could manage them and prevent from running GC all the time (in next game I will use it).

Time Diff
I should have used time diff in calculations of movements, when running on slower device the whole thing feels slow... With time diff it will move bullets at one speed on all devices (maybe will introduce "teleportation" of bullets but it's hard to say).

I use them for many purposes and I think that they can cause problems. At this point I think that it would be better to add enemies after certain count of requestAnimationFrame instead of fixed time, but I don't know how it would work in lower than 60FPS environment...


Popular posts from this blog

How to simulate slow connection (developer proxy in Node.js)

Update: If you use Chrome then you can use "Throttling" so simulate slow network for all your assets. This should be easier than proxy.

Toggle device modeChoose Network type.Refresh the page 


For some time I wanted to use some proxy for development and testing of eg. slow internet connection, but it was hard to find something useful and free. I know there is Charles but buy it to use it at most one in a month is not for me.

I started thinking about Node.js, maybe I can write proxy for me? But fortunately I found one.

With this module I can write really short code to create slow server:

var http = require('http'), httpProxy = require('http-proxy'); httpProxy.createServer(function (req, res, proxy) { var buffer = httpProxy.buffer(req); setTimeout(function () { proxy.proxyRequest(req, res, { host: 'localhost', port: 8080, …

How to use NPM packages from private repositories on bitbucket

Using Node.js you want to use NPM packages for reusable parts of the apps you create, that is a common sense. At the same time not everything makes sense as a public module unfortunately. Right now we are using Bitbucket at work for private repositories but there is a problem. How to use them as NPM modules? We do not want to publish them to the public but still want to have an ability to install them easily.

After googling and experimenting I have found simple solution.
First create new user in your organization with obscure password and give it read access to the repo. It is best to assign really obscure password but do not fool yourself. This is convenient but you must sacrifice security a bit. You should always consider how in your context that would be important.

Change example from below to:
user - username
PASS - password of the user
organization - owner of the project (you can find it in bitbucket url to your project)
project - your project name