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.

Machine photo

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:

UPC-A barcode sample

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:

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:

Game screenshot

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


Comments? Share via Twitter Share via Linkedin Share via Mastodon