)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
--------------------------------------------------------------------------------
/examples/js/plugins.js:
--------------------------------------------------------------------------------
1 | // usage: log('inside coolFunc', this, arguments);
2 | // paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
3 | window.log = function f(){ log.history = log.history || []; log.history.push(arguments); if(this.console) { var args = arguments, newarr; args.callee = args.callee.caller; newarr = [].slice.call(args); if (typeof console.log === 'object') log.apply.call(console.log, console, newarr); else console.log.apply(console, newarr);}};
4 |
5 | // make it safe to use console.log always
6 | (function(a){function b(){}for(var c="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),d;!!(d=c.pop());){a[d]=a[d]||b;}})
7 | (function(){try{console.log();return window.console;}catch(a){return (window.console={});}}());
8 |
9 |
10 | // place any jQuery/helper plugins in here, instead of separate, slower script files.
11 |
12 |
--------------------------------------------------------------------------------
/gameoflife.js:
--------------------------------------------------------------------------------
1 | /* Author:
2 | Matthew Ruten, 2012
3 | */
4 |
5 | var GameOfLife = function(params){
6 | // User-set params
7 | var num_cells_y = params["init_cells"].length,
8 | num_cells_x = params["init_cells"][0].length,
9 | cell_width = params["cell_width"] || 10,
10 | cell_height = params["cell_height"] || 10,
11 | init_cells = params["init_cells"] || [],
12 | canvas_id = params["canvas_id"] || "life",
13 |
14 | colourful = params["colourful"] || params["colorful"] || false,
15 |
16 | cell_array = [],
17 | display = new GameDisplay(num_cells_x, num_cells_y, cell_width, cell_height, canvas_id, colourful),
18 | interval = null, // Will store reference to setInterval method -- this should maybe be part of GameDisplay
19 | init = function() {
20 | // Convert init_cells array of 0's and 1's to actual Cell objects
21 | var length_y = init_cells.length,
22 | length_x,
23 | y, x;
24 | // each row
25 | for (y = 0; y < length_y; y++) {
26 | length_x = init_cells[y].length;
27 | // each column in rows
28 | for (x = 0; x < length_x; x++) {
29 | var state = (init_cells[y][x] == 1) ? 'alive' : 'dead';
30 | init_cells[y][x] = new Cell(x, y, state);
31 | }
32 | }
33 | cell_array = init_cells;
34 | display.update(cell_array);
35 | },
36 | // Function to calculate the next generation of cells, based
37 | // on the rules of the Game of Life
38 | nextGenCells = function() {
39 | // Implement the Game of Life rules
40 | // Simple algorithm:
41 | // - For each cell:
42 | // - Check all of its neighbours
43 | // - Based on the rules, set the next gen cell to alive or dead
44 |
45 | var current_gen = cell_array,
46 | next_gen = [], // New array to hold the next gen cells
47 | length_y = cell_array.length,
48 | length_x,
49 | y, x;
50 | // each row
51 | for (y = 0; y < length_y; y++) {
52 | length_x = current_gen[y].length;
53 | next_gen[y] = []; // Init new row
54 | // each column in rows
55 | for (x = 0; x < length_x; x++) {
56 | //var state = (init_cells[y][x] == 1) ? 'alive' : 'dead';
57 | var cell = current_gen[y][x];
58 | // Calculate above/below/left/right row/column values
59 | var row_above = (y-1 >= 0) ? y-1 : length_y-1; // If current cell is on first row, cell "above" is the last row (stitched)
60 | var row_below = (y+1 <= length_y-1) ? y+1 : 0; // If current cell is in last row, then cell "below" is the first row
61 | var column_left = (x-1 >= 0) ? x-1 : length_x - 1; // If current cell is on first row, then left cell is the last row
62 | var column_right = (x+1 <= length_x-1) ? x+1 : 0; // If current cell is on last row, then right cell is in the first row
63 |
64 | var neighbours = {
65 | top_left: current_gen[row_above][column_left].clone(),
66 | top_center: current_gen[row_above][x].clone(),
67 | top_right: current_gen[row_above][column_right].clone(),
68 | left: current_gen[y][column_left].clone(),
69 | right: current_gen[y][column_right].clone(),
70 | bottom_left: current_gen[row_below][column_left].clone(),
71 | bottom_center: current_gen[row_below][x].clone(),
72 | bottom_right: current_gen[row_below][column_right].clone()
73 | };
74 |
75 | var alive_count = 0;
76 | var dead_count = 0;
77 | for (var neighbour in neighbours) {
78 | if (neighbours[neighbour].getState() == "dead") {
79 | dead_count++;
80 | } else {
81 | alive_count++;
82 | }
83 | }
84 |
85 | // Set new state to current state, but it may change below
86 | var new_state = cell.getState();
87 | if (cell.getState() == "alive") {
88 | if (alive_count < 2 || alive_count > 3) {
89 | // new state: dead, overpopulation/ underpopulation
90 | new_state = "dead";
91 | } else if (alive_count === 2 || alive_count === 3) {
92 | // lives on to next generation
93 | new_state = "alive";
94 | }
95 | } else {
96 | if (alive_count === 3) {
97 | // new state: live, reproduction
98 | new_state = "alive";
99 | }
100 | }
101 |
102 | //console.log("Cell at x,y: " + x + "," + y + " has dead_count: " + dead_count + "and alive_count: " + alive_count);
103 |
104 | next_gen[y][x] = new Cell(x, y, new_state);
105 | //console.log(next_gen[y][x]);
106 | }
107 | }
108 | //console.log(next_gen);
109 | /*
110 | next_gen = cell_array;
111 | next_gen[0][0].setState("dead");
112 | next_gen[0][1].setState("alive");
113 | next_gen[1][0].setState("alive");
114 | next_gen[1][1].setState("dead");
115 | */
116 | return next_gen;
117 | }
118 | ;
119 | init();
120 | return {
121 | // Returns the next generation array of cells
122 | step: function(){
123 | var next_gen = nextGenCells();
124 | // Set next gen as current cell array
125 | cell_array = next_gen;
126 | //console.log(next_gen);
127 | display.update(cell_array);
128 | },
129 | // Returns the current generation array of cells
130 | getCurrentGenCells: function() {
131 | return cell_array;
132 | },
133 | // Add "The" to function name to reduce confusion
134 | // (even though we *could* technically use just setInterval)
135 | setTheInterval: function(the_interval) {
136 | interval = the_interval;
137 | },
138 | getInterval: function() {
139 | return interval;
140 | }
141 | };
142 | };
143 |
144 | // This is an object that will take care of all display-related features.
145 | // Theoretically, you should be able to use any method of display without
146 | // too much extra code. i.e. if you want to display the game using HTML tables,
147 | // svg, or whatever other method you feel like. Just create a new <___>Display
148 | // Object!
149 | var GameDisplay = function(num_cells_x, num_cells_y, cell_width, cell_height, canvas_id, colourful) {
150 | var canvas = document.getElementById(canvas_id),
151 | ctx = canvas.getContext && canvas.getContext('2d'),
152 | width_pixels = num_cells_x * cell_width,
153 | height_pixels = num_cells_y * cell_height,
154 | drawGridLines = function() {
155 | ctx.lineWidth = 1;
156 | ctx.strokeStyle = "rgba(255, 0, 0, 1)";
157 | ctx.beginPath();
158 | // foreach column
159 | for (var i = 0; i <= num_cells_x; i++) {
160 | ctx.moveTo(i*cell_width, 0);
161 | ctx.lineTo(i*cell_width, height_pixels);
162 | }
163 | // foreach row
164 | for (var j = 0; j <= num_cells_y; j++) {
165 | ctx.moveTo(0, j*cell_height);
166 | ctx.lineTo(width_pixels, j*cell_height);
167 | }
168 | ctx.stroke();
169 | },
170 | updateCells = function(cell_array) {
171 | var length_y = cell_array.length,
172 | length_x,
173 | y, x;
174 | // each row
175 | for (y = 0; y < length_y; y++) {
176 | length_x = cell_array[y].length;
177 | // each column in rows
178 | for (x = 0; x < length_x; x++) {
179 | // Draw Cell on Canvas
180 | drawCell(cell_array[y][x]);
181 | }
182 | }
183 | },
184 | drawCell = function(cell) {
185 | // find start point (top left)
186 | var start_x = cell.getXPos() * cell_width,
187 | start_y = cell.getYPos() * cell_height;
188 | // draw rect from that point, to bottom right point by adding cell_height/cell_width
189 | if (cell.getState() == "alive") {
190 | //console.log("it's alive!");
191 | if (colourful === true) {
192 | var r=Math.floor(Math.random()*256),
193 | g=Math.floor(Math.random()*256),
194 | b=Math.floor(Math.random()*256),
195 | a=(Math.floor(Math.random()*6)+5)/10; // rand between 0.5 and 1.0
196 | ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
197 | }
198 | ctx.fillRect(start_x, start_y, cell_width, cell_height);
199 | } else {
200 | ctx.clearRect(start_x, start_y, cell_width, cell_height);
201 | }
202 | },
203 | init = function() {
204 | //console.log("width_pixels: " + width_pixels);
205 | //console.log("height_pixels: " + height_pixels);
206 |
207 | // Resize Canvas
208 | canvas.width = width_pixels;
209 | canvas.height = height_pixels;
210 |
211 | // No grid lines, for now!
212 | //drawGridLines();
213 | };
214 | init();
215 | return {
216 | update: function(cell_array) {
217 | updateCells(cell_array);
218 | }
219 | };
220 |
221 |
222 | };
223 |
224 | var Cell = function(x_pos, y_pos, state) {
225 | //console.log("Creating cell at " + x_pos + "," + y_pos + ", and cell state is: " + state);
226 | /*var x_pos = 0, // X Position of Cell in Grid
227 | y_pos = 0, // Y position of cell in Grid
228 | state = "dead", // Cell state: dead or alive.
229 | asdf;*/
230 | return {
231 | x_pos: x_pos,
232 | y_pos: y_pos,
233 | state: state,
234 | getXPos: function() {
235 | return x_pos;
236 | },
237 | getYPos: function() {
238 | return y_pos;
239 | },
240 | getState: function() {
241 | return state;
242 | },
243 | setState: function(new_state) {
244 | state = new_state;
245 | },
246 | clone: function() {
247 | return new Cell(x_pos, y_pos, state);
248 | }
249 | };
250 | };
251 |
252 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | Conway's Game of Life in Javascript/Canvas
2 | ==========================================
3 |
4 | Examples
5 | --------
6 |
7 | View examples of this script in action here:
8 |
9 |
10 | *Note: Best viewed in Chrome*
11 |
12 | What is Conway's Game of Life?
13 | ------------------------------
14 |
15 | Wikipedia has a great article, including many examples:
16 | [Conway's_Game_of_Life on Wikipedia](http://en.wikipedia.org/wiki/Conway's_Game_of_Life)
17 |
18 | How to Run
19 | ----------
20 |
21 | Create new GameOfLife object, and pass it the grid size, cell size,
22 | a canvas ID, and an array containing the starting cells:
23 |
24 | var game = new GameOfLife(grid_width, grid_height, cell_width, cell_height, "life");
25 |
26 | Here's a sample with parameters:
27 |
28 | // Must be same size as game dimensions
29 | // (10 x 10 in this case)
30 | var starting_cells = [
31 | [0,0,0,0,0,0,0,0,0,0],
32 | [0,0,0,0,0,0,0,0,0,0],
33 | [0,0,0,0,0,0,0,0,0,0],
34 | [0,0,0,0,0,0,0,0,0,0],
35 | [0,0,0,0,0,0,0,0,0,0],
36 | [0,0,0,0,0,0,0,0,0,0],
37 | [0,0,0,0,0,0,0,0,0,0],
38 | [0,0,0,0,0,0,0,0,0,0],
39 | [0,0,0,0,0,0,0,0,0,0],
40 | [0,0,0,0,0,0,0,0,0,0]
41 | ],
42 | params = {
43 | canvas_id: "life",
44 | cell_width: 10,
45 | cell_height: 10,
46 | init_cells: starting_cells
47 | },
48 | game = new GameOfLife(params);
49 |
50 |
51 | Advance the game to the next step:
52 |
53 | game.step();
54 |
55 | To run this as an animation, just set an interval to call game.step(). In this
56 | example, it will update every second, but you can modify it to use any millisecond value:
57 |
58 | var interval = setInterval(game.step, 1000);
59 |
60 | You can stop the animation by calling clearInterval:
61 |
62 | clearInterval(interval);
63 |
64 | Parameters
65 | ----------
66 |
67 | // DOM ID of