PyRuby blog » zen zombie http://www.pyruby.com Just another WordPress weblog Mon, 12 Dec 2011 11:03:27 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 HTML 5 Canvas game – Test Driven http://www.pyruby.com/2010/06/08/html-5-canvas-game/ http://www.pyruby.com/2010/06/08/html-5-canvas-game/#comments Wed, 09 Jun 2010 05:00:35 +0000 PyRuby http://www.pyruby.com/?p=83

I’ve been busy for the last month, working with a couple of friends to put together an online version of Ninja Pirate Zombie Robot. This was initially going to be an iPhone app, written in Objective C, but after further consideration, we decided to write it using HTML 5 canvas.

The libraries we are using [...]]]> Ninja Pirate Zombie Robot

I’ve been busy for the last month, working with a couple of friends to put together an online version of Ninja Pirate Zombie Robot. This was initially going to be an iPhone app, written in Objective C, but after further consideration, we decided to write it using HTML 5 canvas.

The libraries we are using for our JavaScript card game are JSUnitTest, event.simulate.js and JS Prototype. The choices here are largely due to our experience of writing test driven, object oriented code as our day jobs. This was our first game, so this post may not reflect the very best way to write an HTML5 game, so if there are things we could improve on, please let me know.

Test first

This article will just cover our initial set up. I’ll write a subsequent article on tips and tricks we learnt along the way. First we set up a test case using JSUnitTest. This comprised of 3 files.

HTML web page which runs and displays the results of the tests

  1.  
  2. <html>
  3. <head>
  4.   <title>JavaScript unit test file</title>
  5.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   <script src="../lib/jsunittest.js" type="text/javascript"></script>
  7.   <script src="../lib/prototype.js" type="text/javascript"></script>
  8.   <script src="../lib/event.simulate.js" type="text/javascript"></script>
  9.   <script src="../src/game.js" type="text/javascript"></script>
  10.   <link rel="stylesheet" href="unittest.css" type="text/css" />
  11. </head>
  12. <body>
  13.  
  14. <div id="content">
  15.  
  16.   <div id="header">
  17.     <h1>Ninja Pirate Zombie Robot unit test file</h1>
  18.   </div>
  19.   <!– Log output (one per Runner, via {testLog: "testlog"} option)–>
  20.   <p>
  21.     Running <strong>test_game.js</strong>.
  22.   </p>
  23.   <div id="game"></div>
  24.     <script src="test_game.js" type="text/javascript"></script>
  25.   </body>
  26. </html>
  27.  

The TestCase

  1.  
  2. new Test.Unit.Runner({
  3.     setup: function() {
  4.         this.game = new Game()        
  5.     },
  6.    
  7.     teardown: function() {
  8.         this.game = null
  9.     },
  10.  
  11.     testGameStartsWith2Players: function() { with(this) {
  12.         assertEqual(2, game.players.length)
  13.     }},
  14. }, { testLog: "game"} )
  15.  

And the bare minimum initial game code

  1.  
  2. var Game = Class.create({
  3.     initialize: function(options) {
  4.         this.players = []
  5.     },
  6. })
  7.  

This was our starting point for our game, which yielded one failing test. We decided to build the rules of the game first, before dealing with the rendering and computer player components. Given that we wouldn’t have the chance to pair on most of the code, we wanted to get the central domain model for the game sorted, so we could then work on other parts in parallel.

In my next post, I’ll cover defining the game domain model, which encapsulates all the rules of the game.

]]> http://www.pyruby.com/2010/06/08/html-5-canvas-game/feed/ 0