使用Ember編寫基於畫布的遊戲

我是Ember的新手，我正在嘗試使用Ember編寫基於畫布的遊戲。這個遊戲的刷新速度非常緩慢（它本質上是基於回合的，所以沒有必要獲得巨大的FPS）。使用Ember編寫基於畫布的遊戲

每個模型都有大量的視角渲染（用於計算軌跡等），我非常喜歡Ember數據模型和用法。

我目前的工作方式是，對於集合中的每個模型對象，我在視圖中調用方法「draw」，並將canvas上下文作爲參數傳遞。然後將其自身繪製在畫布上相對於中心點的適當位置。

我現在正在爲它添加點擊事件，並且我正在考慮在點擊對象時出現模態對話框。問題是，這個代碼在哪裏去？我目前在模型中加入了它，但是（特別是因爲我無法訪問路由器），它實際上不屬於那裏。同樣，我的模型對於我喜歡的渲染代碼來說目前太混亂了。

點擊事件（在畫布座標上）和畫布繪圖代碼應該去哪裏？我認爲理想情況下，我應該使用裝飾器模式，但我不確定如何將其納入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) 
    }

類似地，每個軌道然後實現它的自己的繪製方法，將上下文作爲將其繪製到畫布上的參數。

來源

2013-07-14 Joe Pym

你可以發佈相關代碼的一部分，所以我們可以看看它並提出一個答案？ – intuitivepixel

@intuitivepixel，添加了一些代碼示例。我不確定Ember是否真的是這個解決方案的正確解決方案，但是我將它與更傳統的表單設置結合起來，用於不同類型的動作，所以能夠將現有的模型結構in。 –

'MV *'架構設計模式不適用於遊戲。它在大多數情況下都不適用於遊戲，特別是如果您使用像Ember這樣的框架，該框架適用於具有多種形式和事物的Web應用程序。諸如模板之類的東西在遊戲中很沒意義。你問這樣你有它 - **灰燼是不是這個**的正確框架** –

我知道這已經在上面的回覆中討論過了，但我也會說Ember不是遊戲開發的工具。但從好的一面來看，似乎有很多JS遊戲引擎。看看這裏的https://gist.github.com/bebraw/768272列表中的一堆。

很像JS的其他領域，似乎有十億人，我沒有經歷過他們，所以我不能給出建議，但看看幾個，看看哪些對你最有意義。讓我知道你是否找到了好的......我會對你發現的東西感興趣。

來源

2013-07-18 13:28:48 tmartineau

不是要擊敗這個死刑，但我遇到了一些似乎包含更多信息的其他資源。 http://html5gameengine.com/這一個有一個較小的名單，可能會更好開始，也包含一些評級和功能列出。然後，這個網站http://www.html5gamedevelopment.com/html5-engines似乎致力於HTML5遊戲開發，可能有很多資源。希望這可以幫助。 – tmartineau

使用Ember編寫基於畫布的遊戲

回答

相關問題