Learning Javascript by writing a game: 'I did it my way'

I had read through books and tutorials but wanted to go further.

I chose bingo as I play it in a care home. It is a bit tricky as there are a number of threads: one for the caller reading out the numbers and other threads for when players shout ‘bingo’.

I did not use any libraries as they take a few seconds to load on my old PC. I really enjoyed writing my own animations.

I wrote my own ‘minimising’ scripts. I could not face testing the game again after using someone else’s utility. I learnt a bit about ‘sed’ and ‘perl’. I shorten variable names and even have short aliases for some built-in Javascript functions.

Oddly, the hardest part to program was getting the shadows under the bingo boards to appear in the right place.

I was going to write an article for Linux Gazette about what I learnt, but the magazine stopped. You can find over 50 tips about Javascript, HTML, CSS and marketing in the project’s wiki.

The best tip I found was to use closures to pass parameters to functions called with ‘setTimeout’. The worst tip was to use ‘/* */’ rather than ‘//’ as comments - minimising utilities will remove comments anyway.

My best attempt at marketing was an announcement on freecode.com of ‘World Record Set for 15000 Bingo Players’. It attracted over 120 visits. My worst piece of marketing was emailing lots of computer and womens magazines with no result.

You can increase the number of players until your browser runs out of memory. I am a little disappointed that Internet Explorer does not seem to handle this well, as Windows just says the IE has stopped responding.

The game is just one HTML page and uses no graphics files. Instead I use lots of ‘div’ elements to fade colours. This was because I was scared of using the GIMP.

I also collected over 3500 first names for the game. mostly from newpapers and books of biographies. They are free to use.

I do not have an Internet connection at home but use the computers in the local library. The only costs I have are the extra electricity at home and the price of a memory stick.

You can find the game at: www.sourceforge.net/p/britbingo. It is free

I’m going through your source version (a hefty bugger) – and it looks to me like you brute-forced a lot of things in the javascript that HTML/CSS could have handled without the assist; It’s almost like every time you hit on a visual hiccup, you used scripting to fix it.

Even simple things like your simple offset drop shadows – it’s the first function in it, and you have this massive script just to do what I would have handled as:

<div class=“shadowWrapper”><div class=“shadowContent”>Some Content</div></div>

.shadowContent {
  zoom:1; /* trip haslayout, make IE behave */

.shadowWrapper {
  background:#888; /* shadow color */

.shadowContent {
  background:#FED; /* content background */

It seems the whole thing is filled with scripting to do markup and CSS job… gone through about 500 lines of javascript and I’ve still not hit game logic; it’s all using javascript to do what markup should be handling…

I mean for a starter project learning, it’s an accomplishment – but you’ve REALLY over-thought the solutions to what’s a fairly simple layout… and a LOT of scripting doing CSS’ job on things like hovers. (to go with the endless ID’s for same)

In that way though it reminds me of version 1.0 of my semi-recent DOS game release… took me three weeks to write the basic graphics engine, a week to write the base code; which I threw out and rewrote from scratch in two days as I determined some flawed methodology and assumptions – then a year of ‘tweaking’ to bring it up to being what I really had in mind at the start.

Just needs a few tweaks and changes in methodology.