Tag Archives: game of life

Flex Game of Life Pt 2

I made a few user interface updates to my crappy Flex version of Conway’s Game of Life.

The board now wraps, and I added a Timer with an adjustable delay via the lovely HSlider control. I wanted to replace the cells with Sprites but it’s giving me grief and I want to play The Sims.

I’m still making my mind up about Flex, but I have to admit that aside from the Sprite issue I’ve been pleasantly surprised at how easy everything’s been coming together.

You can view source on the application, or you can download the zip.

Flex Game of Life

Continuing down the Flex Path, I built another really crappy version of Conway’s Game of Life. Version 2 forthcoming.

I’m still figuring out this whole Flex thing, so please, any help would be much appreciated!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx         = "http://www.adobe.com/2006/mxml"
	layout           = "vertical"
	creationComplete = "init(gameArea);"
	width            = "425"
	height           = "425"
>
	<mx:Script><![CDATA[
		import model.*;
		private var board:Board;

		private function init(application:DisplayObjectContainer):void {
			board = new Board(application, 10, 0, 0, 30, 30, 5);
		}
	]]></mx:Script>

	<mx:Canvas id="gameArea"></mx:Canvas>
	<mx:HBox>
		<mx:Button label="Reset"  click="board.reset();" />
		<mx:Button label="Update" click="board.update();" />		
	</mx:HBox>
</mx:Application>
package model {

	import flash.display.DisplayObjectContainer;

	public class Board {

		private var size:int;
		private var startX:int;
		private var startY:int;
		private var tileWidth:int;
		private var tileHeight:int;
		private var tileBuffer:int;	
		private var board:Array;
		private var container:DisplayObjectContainer;

		public function Board(
			container:DisplayObjectContainer,
			size:int,
			startX:int,
			startY:int,
			tileWidth:int,
			tileHeight:int,
			tileBuffer:int
		) {
			this.container  = container;
			this.size       = size;
			this.startX     = startX;
			this.startY     = startY;
			this.tileWidth  = tileWidth;
			this.tileHeight = tileHeight;
			this.tileBuffer = tileBuffer;
			reset();
		}

		public function reset():void {
			this.board = new Array(this.size);
			var x:int = startX;
			var y:int = startY;

			clear();

			for(var i:int = 0; i < this.size; i++) {
				this.board[i] = new Array(this.size);
				x = startX;
				for(var j:int = 0; j < this.size; j++) {
					board[i][j] = new Cell(x, y, tileWidth, tileHeight);
					x += this.tileWidth + this.tileBuffer;
					this.container.addChild(board[i][j]);
				}
				y += this.tileHeight + this.tileBuffer;
			}
		}

		public function update():void {
			var next:Array = next();
			for(var i:int = 0; i < this.size; i++) {
				for(var j:int = 0; j < this.size; j++) {
					board[i][j].update(next[i][j]);
				}
			}
		}

		public function clear():void {
			while(this.container.numChildren) {
				this.container.removeChildAt(0);
			}
		}

		public function next():Array {
			var total:int     = 0;
			var next:Array = new Array(this.size);
			for(var i:int = 0; i < this.size; i++) {
				next[i] = new Array(this.size);
				for(var j:int = 0; j < this.size; j++) {
					next[i][j] = board[i][j].next(countNeighbors(i,j));
				}
			}
			return next;
		}

		public function isValid(position:int):Boolean {
			return(position >= 0 && position < this.size);
		}

		public function stateAt(i:int, j:int):Boolean {
			if(isValid(i) && isValid(j)) {
				return board[i][j].state;
			}
			return false;
		}

		public function countNeighbors(x:int, y:int):int {
			var count:int = 0;
			
			for(var i:int = x - 1; i <= x + 1; i++) {
				for(var j:int = y - 1; j <= y + 1; j++) {
					if(!(i == x && j == y) && stateAt(i,j)) {
						count += 1;
					}
				}
			}
			return count;
		}

	}
}
package model {
	import flash.events.MouseEvent;
	
	import mx.controls.Button;

	public class Cell extends Button {

		public var state:Boolean;

		public function Cell(x:int, y:int, width:int, height:int) {
			this.x     = x;
			this.y     = y;
			this.width = width;
			this.height = height;
			this.addEventListener(MouseEvent.CLICK,swap);
			this.reset();
		}

		public function reset():void {
			this.state = false;
		}

		public function next(neighborCount:int):Boolean {
			return((this.state && neighborCount == 2) || neighborCount == 3);
		}

		public function update(state:Boolean):void {
			this.state = state;
			if(this.state) {
				this.label = "0";
			} else {
				this.label = "";
			}
		}

		public function swap(e:MouseEvent):void {
			update(!this.state);
		}

	}
}

JavaScript Game Of Life Pt 2

I changed up the code up a little bit for implementation of Conway’s Game Of Life. Turns out I had misread the rules a bit. My original code turned all cells on when they had 2 or 3 neighbors, regardless of their current state. That’s how live cells are supposed to work, but dead cells are only supposed to change their state when they have exactly 3 neighbors.

Also I’ve updated my JavaScript objects to use the Prototype Class.create method. As far as I know the method I had been using works in all browsers, but I like Prototypes implementation of constructors and inheritance.

Finally, I increased the number of live starting cells, shrunk the number of boxes and increased the time delay between frames to hopefully grant a better user experience. It probably still looks terrible in Internet Explorer. Once again, that’s what you get.

So check it out and download the code!

PS: You can still download and view the original version if you like.

JavaScript Game Of Life Pt 1

I thought it would be fun to implement Conway’s Game Of Life. I used ColdFusion a bit in my example to ease some typing but the “engine” is all JavaScript. Beloved Prototype is also being used a bit behind the scenes.

So without further ado, here’s a

// set up a game of size 30 x 30

g = new Game_Of_Life(30);

// set some random tiles, note that you
// have way more of these for a size
// 30 board.

g.set_tile(2,26,1);
g.set_tile(19,20,1);

// draw inital board

g.draw();

// run the game, 1/25s "frame-rate" 
g.run(.25);

Click to see a demonstration.

And, as always: Download the code!

PS: It looks like terrible in Internet Explorer. No comment.