使用Ember编写基于画布的游戏
Using Ember to write a canvas based game
我是Ember的新手,目前正在尝试使用Ember编写基于画布的游戏。这个游戏的刷新率会非常慢(它基本上是回合制的,所以没有必要获得巨大的FPS)。
每个模型都有大量的视图侧渲染(用于计算轨迹等),我真的很喜欢Ember数据模型和用法。
我目前的工作方式是,对于集合中的每个模型对象,我在视图中调用方法"draw",并将画布上下文作为参数传入。然后,它将自己绘制在画布上相对于中心点的适当位置。
我现在正在添加点击事件,我正在考虑当你点击一个对象时,会出现一个模态对话。问题是,这个程序的代码在哪里?我目前在模型中添加了它,但(尤其是因为我无法访问路由器),它真的不属于那里。类似地,我的模型目前过于杂乱,我不喜欢渲染代码。
点击事件(在画布坐标上)和画布绘图代码应该放在哪里?我认为理想情况下,我应该使用decorator模式,但我不确定如何将其融入Ember框架。
编辑:代码示例:这是主视图,它最初加载画布:
Space.CanvasView = Ember.View.extend({
tagName: 'canvas',
didInsertElement: function(){
this._super();
var context = this.draw();
this.get('controller').send('draw', context)
},
draw: function(){
canvas = this.get('element');
context = canvas.getContext('2d');
var w = $(window).width();
var h = $(window).height();
canvas.width = w;
canvas.height = h;
context.fillRect (0, 0, w,h);
context.centerX = w/2;
context.centerY = h/2;
return context;
}
});
然后,在主父视图中:
Space.System = DS.Model.extend({
name: DS.attr('string'),
//attributes and various other model methods that do some maths
draw: function(context){
var drawRadius = this.get('radius');
// 30 lines of drawing on the canvas
context.fill();
this.get('orbitals').forEach(function(orbital){
orbital.draw(context);
})
},
setContext: function(context){
var sys = this
this.get('orbitals').then(function(){
sys.clickHandlers(context);
sys.draw(context);
})
window.onresize = function(e){sys.draw(context)};
},
clickHandlers: function(context){
system = this;
context.canvas.addEventListener('click', function(ev){
system.get('orbitals').map(function(orbital){
if(orbital.withinOrbital(context, ev.clientX - context.canvas.offsetLeft, ev.clientY - context.canvas.offsetTop)){
console.log(orbital);
}
})
}, false)
}
类似地,每个Orbital都会实现自己的绘制方法,将上下文作为一个参数,将其绘制到画布上。
我知道这已经在上面的回复中讨论过了,但我也要说Ember不是游戏开发的工具。但从好的方面来看,似乎有很多JS游戏引擎。看看这里https://gist.github.com/bebraw/768272一堆的清单。
就像JS的其他领域一样,似乎有十亿个领域,我对它们没有经验,所以我不能给出建议,但看看其中的一些,看看哪一个对你来说最有意义。如果你找到什么好的,请告诉我。。。我会对你的发现感兴趣。
相关文章:
- 画布游戏开发和性能
- 向 html5 画布游戏添加计时器
- JS游戏和HTML5画布游戏有什么区别
- 如何相对于画布大小的javascript定位对象
- html2canvas,样式未应用于画布
- 你躲避投射物的画布游戏
- 画布游戏 Json 功能仅适用于网页检查器
- Javascript - 将过滤器应用于画布并重置为原始
- HTML5 画布游戏生成间隔
- HTML5画布游戏计时器
- 画布游戏:最大转向角(以 n 秒为单位)
- Webkit 滞后于画布中的大图像
- 专注于<画布>
- FabricJS 对象不相对于画布调整大小
- HTML5画布游戏对象在碰撞后卡住
- Raphaël转换相对于画布的拖动回调坐标
- 如何将着色器应用于画布(javascript)
- 我可以'Don’不要画我的背景HTML画布游戏
- Javascript画布游戏-碰撞检测
- 删除画布游戏中的背景