conway.js's Introduction

Conway.js

What?

A implementation of Conways Game Of Life in javascript with a html5 canvas renderer and hopefully a pure css renderer soon.

Why?

I wrote it in C ages ago and decided to spend a few hours porting, might make a cool background for my website.

Demo

demo

Usage

<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="conway.js"></script>
	<script type="text/javascript" src="conwayui.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		/* Create and init pool. */
		var pool = new Pool(250, 150);
		pool.locked = true;
		pool.init_pool_rand();

		/* Bind some event buttons to interact with it. */
		$('#startbutton').click(function() {
			if(pool.locked) {
				pool.locked = false;
				$('#startbutton').html('stop');
			} else {
				pool.locked = true;
				$('#startbutton').html('start');
			}
		});
		$('#clearbutton').click(function() {
			pool.init_pool_clear();
		});
		$('#randbutton').click(function() {
			pool.init_pool_rand();
		});

		/* Update text box every pool comp cycle. */
		pool.CompDone = function() {
			$('#genbox').html('Generation: ' + pool.generations);
		};

		/* Call the jquery plugin to render it. */
		$('#display').conway(pool, 50, "rgb(255,180,0)");
	});
	</script>
</head>
<body>
	<div id="header"><img src="logo.png" alt="conway.JS"/></div>
	<canvas id="display" width="1000" height="600"></canvas>
	<div>
		<div id="genbox">Generation: 0</div>
		<button id="startbutton" type="button">start</button>
		<button id="randbutton" type="button">rand</button>
		<button id="clearbutton" type="button">clear</button>
	</div>
</body>
</html>

Recommend Projects