Activate your free membership today | Log-in

Friday, October 3rd, 2008

Life: The game in Canvas

Category: Canvas, Games

Kyle McGregor took a look at the JavaScript games for Life out there and decided to write a Canvas version that ends up being a lot snappier. The entire game is pretty small:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var counterface = 0;
  3. var oInstance;
  4. var Game = Class.create();
  5.  
  6. Game.prototype = {
  7.         'working': false,
  8.         'map': '',
  9.         'interval_id': '',
  10.     'initialize': function()
  11.     {
  12.  
  13.                 //generate map
  14.                 var startmap = [];
  15.                
  16.                 for(var y = 0; y <90; y++)
  17.                 {
  18.                         var row = [];
  19.                        
  20.                         for(var x = 0; x <90; x++)
  21.                         {
  22.                                 var state = Math.random();
  23.                                 state = (state> 0.8)? 1:0;
  24.                                 row[x] = state;
  25.                         }
  26.                        
  27.                         startmap[y] = row;
  28.                 }
  29.  
  30.                 this.map = startmap;
  31.                
  32.                 oInstance=this;
  33.                 this.interval_id = setInterval(function(){oInstance.loop()}, 100);
  34.     },
  35.     'loop': function()
  36.     {
  37.                 if (document.getElementById('frame').getContext)
  38.                 {
  39.                         // drawing code here
  40.                         if(this.working == false)
  41.                         {
  42.                                 this.working = true;
  43.                                 this.draw();
  44.                                 this.step();
  45.                                 this.working = false;
  46.                         }
  47.                 }
  48.                 else
  49.                 {
  50.                         // canvas-unsupported code here
  51.                         alert('Your Browser does not support the canvas tag. try again  in firefox 1.5+ or Opera 9+');
  52.                 }
  53.     },
  54.         'draw': function()
  55.         {
  56.                 var ctx = document.getElementById('frame').getContext('2d');
  57.                 ctx.save();
  58.                 ctx.clearRect(0,0,450,450);
  59.             ctx.fillStyle = "rgb(0,0,0)";
  60.  
  61.                 for(var y = 0; y <90; y++)
  62.                 {
  63.                         for(var x = 0; x <90; x++)
  64.                         {
  65.                                 if(this.map[y][x] == 1)
  66.                                 {
  67.                                         ctx.fillRect (x*5, y*5, 5, 5);
  68.                                 }
  69.                         }
  70.                 }
  71.  
  72.                 ctx.restore();
  73.                 ctx.fill();
  74.         },
  75.         'step': function()
  76.         {
  77.                 var output = '';
  78.                 supercount = 0;
  79.                
  80.                 var tempmap = [];
  81.  
  82.                 for(var y = 0; y <90; y++)//work around for arrays passing by reference.
  83.                 {
  84.                         var row = [];
  85.                        
  86.                         for(var x = 0; x <90; x++)
  87.                         {
  88.                                 row[x] = this.map[y][x];
  89.                         }
  90.                        
  91.                         tempmap[y] = row;
  92.                 }
  93.                                
  94.                 for(var y = 0; y <90; y++)
  95.                 {
  96.                         for(var x = 0; x <90; x++)
  97.                         {
  98.                                 var countme = this.getNeighborCount(y,x);
  99.                                
  100.                                 if ( this.map[y][x] == 0 ) // dead cell 
  101.                                 { 
  102.                                         if ( countme == 3 ) 
  103.                                         { 
  104.                                                 tempmap[y][x] = 1; 
  105.                                         } 
  106.                                 } 
  107.                                 else
  108.                                 { 
  109.                                         if ( ( countme == 2 ) || ( countme == 3) ) 
  110.                                         { 
  111.                                                 tempmap[y][x] = 1; 
  112.                                         } 
  113.                                         else 
  114.                                         { 
  115.                                                 tempmap[y][x] = 0 ; 
  116.                                         } 
  117.                                 } 
  118.                         }              
  119.                 }       
  120.                 counterface++;
  121.                 this.map = tempmap;
  122.         },
  123.         'getNeighborCount': function(starty,startx)
  124.         {
  125.                 var count = 0;
  126.                
  127.                 for(var y = starty-1; y <= starty+1; y++)
  128.                 {
  129.                         for(var x = startx-1; x <= startx+1; x++)
  130.                         {
  131.                                 if(y>= 0 && y <90 && x>= 0 && x <90)
  132.                                 {
  133.                                         if(startx != x || starty != y)
  134.                                         {
  135.                                                 if(this.map[y][x] == 1)
  136.                                                 {
  137.                                                         count++;
  138.                                                 }
  139.                                         }
  140.                                 }
  141.                         }
  142.                 }
  143.                
  144.                 return count;
  145.         }
  146. }
  147.  

Posted by Dion Almaer at 10:07 am
3 Comments

+++--
3.6 rating from 16 votes

3 Comments »

Comments feed TrackBack URI

Brilliant. I love succinct code.

Comment by AdamB — October 3, 2008

I made an implementation of Life using canvas as well, back a couple of months ago. Left it as a comment too, on another post. :)

http://www.randomthink.net/canvas/life.html

Comment by brianarn — October 3, 2008

http://sircambridge.net/conwayGameOfLife3.html#

load an example to start – has a few examples loaded from life initial condition libraries using rsh compression

Comment by sircambridge — October 3, 2008

Leave a comment

You must be logged in to post a comment.