Build An HTML5 Game – Answers To Exercises

My Build An HTML5 Game book is finally on the way, and the website to go with it is live too.

As well as info about the book it serves three main purposes:

  1. A place to see and play the Bubble Shooter game developed in the book
  2. Assets such as images and sounds to make the game
  3. Solutions to the exercises at the end of each chapter in the book

The last are only suggested solutions and there’s a comment form below and I’m hoping others will be able to improve on my coding here.

Build an HTML5 Game – 40% Early Access Discount

Build an HTML5 GameMy book Build an HTML5 Game in going to be out in a couple of months, and until around 4pm on January 31st 2015 you can get 40% off with the discount code BRIGHTANDEARLY if you buy it here: http://www.nostarch.com/html5game

The discount applies to ebooks or the physical copy too, although it’s only if you’re in the United States that I guess the physical version makes sense, until it’s more widely distributed sometime in March.

Build an HTML5 Game

Make your own game without learning any new languages! With just HTML, CSS, and JavaScript in your toolbox, you can create a truly cross-platform game, playable on both desktop and mobile browsers.

In Build an HTML5 Game, author Karl Bunyan shows you how to create browser-based games by walking you through an in-depth tutorial on building a classic favorite, the bubble shooter. Along the way, you’ll learn how to:

  • Send sprites zooming around the screen with JavaScript animations
  • Cause exploding effects with a jQuery plugin
  • Use hitboxes and a bit of geometry to detect collisions
  • Implement game logic to display levels and respond to player input
  • Convey changes in game state through animation and sound
  • Add flair to a game interface with CSS transitions and transformations
  • Gain pixel-level control over the game display with the canvas

Hit the ground running as you start programming the bubble shooter from the very first chapter. Exercises at the end of each chapter test your new skills by challenging you to dig into the bubble shooter’s code and modify the game.

You can create a complete game right now, with skills that you already have. Let Build an HTML5 Game teach you the basics, and then transfer that knowledge to create any game you can imagine.

Get 40% off with the discount code BRIGHTANDEARLY if here: http://www.nostarch.com/html5game

A New Venture: Wedu Games

My new venture, Wedu Games, is up and running. Or at least the site is as there are no games finished yet. There are a few things in development, though, including an interactive storytelling table app (that isn’t a game at all) and a stud/hold-em poker hybrid to launch on mobile and Facebook together. Everything’s being built in HTML and JavaScript with possibly a bit of Node.js for simple back-end.

In the meantime there are a few blog posts to read. Now, back to making the games again…

fbExchange.Net – a new site for Facebook development answers

With Daniel Schaffer (author of the .Net Facebook API Client) I’ve put together a Stack Overflow-type website for Facebook developer help called fbExchange.Net. It’s intended to build as a knowledge base and to be focussed more on tech than the official Facebook developer forum’s discussion format. (So hopefully the forum will be the place for “Is the Platform down?” or “What do you think of the new design?” type questions, and fbExchange.Net can be the site for “How do I…?” questions.)

For anyone who’s not familiar with the Stack Exchange model, you gain reputation by asking (good) questions, and answering them such that other people vote for your answers. For freelance developers and consultants having a high reputation can even help to bring work in. While the site’s in an early stage (“bootstrap mode”) it’s easier to gain points too, so there’s some benefit in getting in there now (hint, hint).

It’s intended to be dev-centred, but there’s no reason why it can’t cover most of the practicalities of “how do I set up a Facebook Page” etc, so feel free to create questions you know the answer to and even answer them yourself. The great thing about the system is that since it’s community moderated, and questions are tagged rather than put into categories, then the definition of “what can I ask?” is fairly broad.

Microsoft SQL Server text data column and PHP length problems

I’ve had this problem before: PHP truncates results from a SQL Server text field to 4096 characters. (This is running PHP under Apache on Windows.) To save myself having to work out the right Google terms again, this is the solution: change the following in php.ini (note that ini_set doesn’t appear to work:

; Valid range 0 - 2147483647.  Default = 4096.
mssql.textlimit = 2147483647

; Valid range 0 - 2147483647.  Default = 4096.
mssql.textsize = 2147483647

Repeatable random numbers in JavaScript

Ever since programming BASIC on the Spectrum I’d wondered why it was possible to seed a “random” number generator. But then I found I wanted to do something that would produce repeatable results, but look like a random sequence. Strangely, although JavaScript alongs you to specify a seed for Math.random() the numbers that follow aren’t a repeated sequence. I’m guessing the system clock comes into it.

So after some Googling for an equation to generate numbers I put together the following function. It works on a sequence of 2^32 numbers, in “random” order. (I believed the equation I found – I didn’t test the completeness of it, but it looks pretty random to me.) So, just call Random.next() to get a decimal between 0 and 1, or pass in a range (lower,upper) and you get a random number between the two.

var Random =
{
 seed : 12345,
 //Returns a random number between 0 and 1
 next : function(lower,upper)
 {
  var maxi = Math.pow(2,32);
  this.seed = (134775813 * (this.seed + 1))
     % maxi;
  var num = (this.seed) / maxi;
  if(typeof lower!='undefined')
  {
   var range = upper - lower;
   num *= range;
   num += lower;
  }
  return num;
 }
}

Set “Random.seed” to taste.

Firing JavaScript functions after a .Net AJAX request

I wanted to have a function called after data was returned to the page from a .Net AJAX call. (The idea was to fade out when you pressed “submit” and then redraw when data came back.) It turns out there are handy handlers already there to, erm, handle this:

Sys.WebForms.PageRequestManager.getInstance()
.add_beginRequest(StartRequestHandler);
Sys.WebForms.PageRequestManager.getInstance()
.add_endRequest(EndRequestHandler);

Those little nuggets add calls to your functions, and the functions themselves are:

function StartRequestHandler(sender,args)
{
}
function EndRequestHandler(sender, args)
{
}

Nice.