Create a gist now

Instantly share code, notes, and snippets.

Game of Life in Backbone.js
var stepTime = 1;
var col = undefined;
var Cell = Backbone.Model.extend({
x: -1,
y: -1,
alive: false,
nextAlive: false,
initialize: function() {
this.id = this.get('x')+","+this.get('y');
},
computeNextState: function(){
var na = col.neighbors(this);
if(this.get('alive')){
if(na == 2 || na == 3){
this.set({'nextAlive': true})
} else {
this.set({'nextAlive': false})
}
}else{
if(na == 3){
this.set({'nextAlive': true})
} else {
this.set({'nextAlive': false})
}
}
},
transition: function(){
this.set({'alive': this.get('nextAlive')});
}
});
var CellView = Backbone.View.extend({
tagName: 'td',
initialize: function() {
this.model.bind('change:alive', _.bind(this.reRender, this));
},
render: function(){
$(this.el).attr({'width': 6, 'height': 4});
this.reRender();
},
reRender: function(){
$(this.el).attr({'bgcolor': this.model.get('alive') ? '#000' : '#FFF'});
}
});
var CellCollection = Backbone.Collection.extend({
model: Cell,
neighbors: function(model){
var ns = 0;
_([-1,0,1]).each(function(xd) {
_([-1,0,1]).each(function(yd) {
if(xd == 0 && yd == 0){
} else {
n = col.get((model.get('x')+xd)+","+(model.get('y')+yd))
if (n && n.get('alive')) {
ns ++;
}
}
});
});
return ns;
}
});
function stepGame(){
col.each( function(e){
e.computeNextState();
});
col.each( function(e){
e.transition();
});
setTimeout("stepGame()", stepTime);
}
$(function(){
var models = new Array();
var trs = $(document.createElement('tbody'));
for(var x=0; x< 100; x++){
var tr = $(document.createElement('tr'));
for(var y=0; y<100; y++){
var alive = (Math.floor(Math.random() * 100) % 2) == 1;
var cell = new Cell({'x': x, 'y': y, 'alive': alive});
models.push(cell);
var cv = new CellView({model: cell});
cv.render();
tr.append(cv.el);
}
trs.append(tr)
}
$('#world').html(trs)
col = new CellCollection(models);
setTimeout("stepGame()", stepTime);
});
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="game_of_life.js"></script>
</head>
<body>
<table id="world">
</table>
</body>
</html>
@Atinux
Atinux commented Jan 21, 2012

Very nice, great job !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment