Javascript 使用余烬编写基于画布的游戏
我是Ember的新手,目前正在尝试使用Ember编写基于画布的游戏。这个游戏的刷新速度非常慢(它基本上是基于回合的,所以没有必要获得巨大的FPS) 每个模型都有大量的视图侧渲染(用于计算轨迹等),我非常喜欢Ember数据模型和用法 我目前的工作方式是,对于集合中的每个模型对象,我在视图中调用方法“draw”,并将画布上下文作为参数传入。然后,它将自己绘制到画布上相对于中心点的适当位置 我现在正在给它添加点击事件,我在考虑当你点击一个对象时会出现一个模态对话。问题是,这段代码去哪里了?我目前在模型中添加了它,但是(特别是因为我无法访问路由器),它确实不属于那里。类似地,我的模型目前过于杂乱,不适合渲染代码 单击事件(在画布坐标上)和画布绘图代码应该放在哪里?我认为理想情况下,我应该使用装饰器模式,但我不确定如何将其应用到Ember框架中 编辑:代码示例:这是主视图,最初加载画布:Javascript 使用余烬编写基于画布的游戏,javascript,canvas,ember.js,Javascript,Canvas,Ember.js,我是Ember的新手,目前正在尝试使用Ember编写基于画布的游戏。这个游戏的刷新速度非常慢(它基本上是基于回合的,所以没有必要获得巨大的FPS) 每个模型都有大量的视图侧渲染(用于计算轨迹等),我非常喜欢Ember数据模型和用法 我目前的工作方式是,对于集合中的每个模型对象,我在视图中调用方法“draw”,并将画布上下文作为参数传入。然后,它将自己绘制到画布上相对于中心点的适当位置 我现在正在给它添加点击事件,我在考虑当你点击一个对象时会出现一个模态对话。问题是,这段代码去哪里了?我目前在模型
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)
}
类似地,每个轨道都实现了自己的绘制方法,将上下文作为参数绘制到画布上。我知道这已经在上面的回复中讨论过了,但我还要说,余烬不是游戏开发的工具。但从好的方面来看,似乎有很多JS游戏引擎。在这里看一看他们的一系列名单
很像JS的其他领域,似乎有10亿个这样的领域,我对它们没有经验,所以我不能给出建议,但看看其中的几个,看看哪个对你最有意义。如果你找到任何好的,请告诉我。。。我对你的发现很感兴趣。你能发布相关代码的部分内容吗,这样我们就可以看一看并提出一个答案?@inuitivepixel,添加了一些代码示例。我不确定Ember是否真的是这个问题的正确解决方案,但我将它与更“传统”的表单设置相结合,这样可以用于不同类型的动作,因此能够将现有的模型结构绑定在一起会很好。
MV*
建筑设计模式不是游戏使用的模式。它在大多数情况下都不能很好地用于游戏,特别是如果您使用像Ember这样的框架,它面向具有许多表单和内容的web应用程序。模板之类的东西在游戏环境中是毫无意义的。你问了,所以你有了它-余烬不是合适的框架模式对话和代码应该去哪里,请看:MVC可能不是合适的架构,但我认为当你:1。使用组件而不是视图,以便更轻松地保持状态。2.想象一下,交互就像一个web应用程序。单击某个位置(例如,攻击按钮)会触发一个操作。3.使用css来定位事物。这使得按钮和其他对话框选项更加容易。我曾经做过一个基于画布的对话系统,但它的构建和使用都不好玩。4.使用余烬数据跟踪游戏统计数据,即使它只是在本地存储上。祝你好运!我不是要把这篇文章打死,但是我发现了一些其他的资源,它们似乎包含了更多的信息。这一个有一个较小的列表,这可能是更好的开始,还包含一些评级和功能列出。然后这个网站似乎致力于HTML5游戏开发,可能有大量的资源。希望这有帮助。