Barcode Wars: Small Javascript game

When I was young, handhelds were pretty basic LCD clumbersome machines and computers were still primitive, I had a very special present: A Barcode Battler.

I won't enter into details and refer you to the above link, but as a quick summary it is a Pokemon ancestor which used barcodes to create game characters, enemies or objects, then made some randomized simple fights.

I have been lately wanting to do small games, and a clone of this system was both appealing and easy to achieve. The added fun of using barcodes was also nice, today being so easy to use as data, so I decided to went for a small version of the game:

• Using Javascript & HTML 5, so I can finally toy with the <canvas> a bit
• Player vs CPU
• Read barcodes somehow, MD5 hash the code (so allows for theorically many attributes) and create the enemy randomizing user's stats + threshold
• "Some" design, retro look (design people don't kill me, I'm terrible with CSS and design)

Initially I wanted to do a webapp for mobile phones, but as HTML file input is still quite limited on some mobile operating systems I decided to go for a single-screen desktop version. Also, barcode reading via Javascript relies mostly on image processing (put image in a canvas and read the lines), so it is better to use an online barcode generator to get clean and sharp images).

The game uses UPC-A format for the barcodes:

The code is hacked in a few hours spread along three or four nights invlufing being ill last one, so don't expect much comments, a clean game loop or an amazing architecture. It works, can be easily understood, modified and extended and it's been a long time since I've been able to code from start to finish a small project not related to work, so I don't want this to stay in the "almost finished" limbo for too long. If I'm free in the future I could improve everything a bit, but no guarantees.

Most importantly, it allowed me to see that I want to do more things with the <canvas> HTML 5 element. It allows pure low-level pixel manipulation like back in the old days and reminded me of the Demoscene (now in Javascript). I just did a simple pixel coloring (sprites are grey, player gets color from barcode data and enemy is random each time) and now I want to learn more about the canvas and do more, maybe port old C graphics programs and simple demos...

The game logic is dumb-simple: Attack (str - def doing at least 1 point), Super attack (str x3 - def but attacker losses str points of vitality), Heal (+def vitality points)

I have just tested a few barcodes so the algorithm that creates player stats + randomization might spawn unbalanced players and/or monsters.

Anyway, you can play the game from here: https://kartones.net/demos/017/

And of course view the source code and associated JS file (not minimized on purpose) to see how it works.

Just so that you don't expect anything amazing here is a screenshot of how it looks:

Note: Internet Explorer not supported, tested with Chrome and Firefox.

Additional Resources

Sprites grabbed from Sprite Database

Nice and easy to follow HTML5 Canvas tutorials