window.Game = Backbone.Model.extend({ defaults: { 'width': 600, 'height': 400, 'points': 0 }, initialize: function() { this.coins = new CoinCollection(); coins = this.coins; for (var x = 0; x < 25; x++) { var xPos = Math.random() * (this.get('width') - 20) >> 0; var yPos = Math.random() * (this.get('height') - 20) >> 0; coins.add(new Coin({ x: xPos, y: yPos })); } this.player = new Player(); }, collectCoin: function() { var points = this.get('points') + 1; this.set({ points: points }); this.trigger('change:points'); } }); window.Player = Backbone.Model.extend({ defaults: { 'x': 10, 'y': 10 } }); window.Coin = Backbone.Model.extend({ defaults: { 'x': 0, 'y': 0 } }); window.CoinCollection = Backbone.Collection.extend({ model: Coin }); window.GameView = Backbone.View.extend({ className: 'Game', initialize: function() { _.bindAll(this, 'render'); this.model.bind('change:points', this.updatePoints); }, render: function() { Crafty.init(this.model.get('width'), this.model.get('height')); var that = this; _.each(this.model.coins.models, function(coin) { that.renderCoin(coin) }); var playerView = new PlayerView({ model: this.model.player }); }, renderCoin: function(coin) { var coinView = new CoinView({ model: coin }); coinView.render(); }, updatePoints: function() { $('#points').text(this.get('points')); } }); window.CoinView = Backbone.View.extend({ className: 'Coin', initialize: function() { _.bindAll(this, 'render'); this._craftyEntity = Crafty.e('Coin'); }, render: function() { this._craftyEntity.makeCoin(this.model.get('x'), this.model.get('y')); } }); Crafty.c('Coin', { init: function() { this.addComponent('2D, Canvas, Color, Collision, Tween'); this.collision(); this.collected = false; this.onHit('Player', function() { if (!this.collected) { window.game.collectCoin(); this.tween({ y: 0, alpha: 0.0 }, 30); this.collected = true; } }); }, makeCoin: function(x, y) { this.attr({ x: x, y: y, w: 20, h: 20 }).color('#F90'); return this; } }); window.PlayerView = Backbone.View.extend({ className: 'Player', initialize: function() { _.bindAll(this, 'render'); this._craftyEntity = Crafty.e('Player'); this.render(); }, render: function() { var x = this.model.get('x'); var y = this.model.get('y'); this._craftyEntity.makePlayer(x, y); } }); Crafty.sprite(24, 'http://i.imgur.com/vQuTM.png', { player: [0, 0, 1, 1.5] }); Crafty.c('Player', { init: function() { this.addComponent('2D, Canvas, Fourway, player'); }, makePlayer: function(x, y) { this.fourway(2); this.attr({ x: x, y: y }); return this; } }); window.CraftyDemo = Backbone.Router.extend({ routes: { '': 'home' }, initialize: function() { this.gameView = new GameView({ model: window.game }); }, home: function() { this.gameView.render(); } }); window.game = new Game(); window.App = new CraftyDemo(); if(Modernizr.history){ Backbone.history.start({ pushState: true }); }else{ Backbone.history.start(); } window.App.home();
<h1>Demo 8: Crafty + Backbone</h1> <p>Points: <span id="points">0</span></p> <div id="cr-stage"></div>