2011-11-03 99 views
2

我想製作一些非常簡單的棋盤遊戲,在您的瀏覽器中播放。 AFAIK,實際上只有兩種技術能夠做到這一點:HTML5 Canvas和Flash。我認爲Flash已經出來了,所以我認爲我應該開始學習如何使用畫布。構建簡單網絡遊戲的技術?

我的問題:

  1. 是否有任何其他競爭技術/技術,我應該考慮?
  2. 如果畫布是要走的路,我可以從哪裏開始?我已經知道HTML,JavaScript和jQuery。我最感興趣的是學習如何繪製基本形狀並檢測這些形狀上的點擊事件。

我不太在意支持舊瀏覽器。很顯然,我希望儘可能接觸到更多的觀衆,但是......我想現在是時候人們開始升級他們的瀏覽器,如果他們想跟上世界其他地方的話,這不會是你應該在工作中訪問某種網站,因此公司政策不適用。

回答

2

1.你是對的,至於高性能瀏覽器遊戲去,畫布和Flash是你唯一的真正選擇。那麼,Java小程序在技術上也是一種可能性。

對於遊戲來說,SVG是一個非常糟糕的選擇。一切都是一個DOM對象,它引入了無法優化的大量開銷。

畫布可能是所有好選擇中最具前景的。 Flash在移動設備上並不是很好,如果iOS拒絕使用它,那麼如果你走這條路線,你會得到一個更小的市場。我寫了一些教程,making selectable, movable shapes on a Canvas。我應該很快給他們一個重寫。

否則它確實取決於。如果你有一個特定的問題,那麼搜索StackOverflow是很好的,你永遠不應該害怕問問題。遊戲和與性能相關的問題是一些最有趣的答案,因爲有時解決方案非常不直觀。

+0

Your implying Canvas is faster then SVG/DOM。這只是錯誤的。與手工優化的DOM和CSS相比,沒有什麼能夠提高性能 – Raynos

+0

事實並非如此。特別是當屏幕上有1,000 - 100,000個動態元素時,SVG/DOM元素與Canvas相比非常慢。與Canvas相比,即使僅加載任何類型的DOM DOM元素速度也是可悲的。另請參閱:http://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div/5883032#5883032 –

+1

「非常簡單的棋盤遊戲」「1000 - 100,000個動態元素」。對於真正簡單的棋盤遊戲,DOM會更快,因爲複雜的系統畫布會更快。 – Raynos

1

不確定你甚至需要畫布來做你正在談論的內容,但是有很多HTML5/JS/Canvas的遊戲引擎可能需要檢查。下面是一個良好的開端:https://github.com/bebraw/jswiki/wiki/Game-Engines

+0

當然,我可以用HTML表格和/或圖像構建跳棋,並使用jQuery來滑動一些棋子......但我希望有一些靈活的東西可以隨着我的遊戲變得更加複雜而擴展。我不希望必須切換技術,因爲我選擇的東西太有限,或太難以應付。不是真的在尋找一個完整的遊戲庫,但我會在這些高峯期。我只是想能夠做一些基本的圖形。我還必須學習如何進行溝通方面! – mpen

1

帆布是好的,但你也應該考慮使用SVG,可能與Raphael庫,也有很好的瀏覽器的支持。如果您打算製作多人遊戲,您還應該調查WebSockets以及可能的Socket.io圖書館。

+0

我做了一個單獨的問題來討論遊戲之間的溝通:) http://stackoverflow.com/questions/7989344/javascript-library-for-push-comet-reverse-ajax-notifications – mpen

+0

我與拉斐爾的問題,當我簡單地試了一下,是我無法使其內聯工作。座標系似乎相對於窗口而不是畫布。我不需要在屏幕上繪製所有東西,只需在一個小小的畫布中繪製:) – mpen

2

爲了在一兩年前教我自己的jQuery,我用簡單的HTML,CSS和jQuery編寫了Memory Game(在這裏你可以翻轉tile並找到匹配項)。我認爲你將能夠實現各種棋類遊戲,甚至不需要在畫布上書寫。

+0

我想我必須使用圖像才能獲得漂亮的消除鋸齒形狀,但我必須使用絕對定位才能獲得碎片滑過全板...我只是不確定它是最乾淨還是最簡單的方法。 – mpen

+0

我很驚訝於做一個優雅的內存遊戲實現(幾十行jQuery-juiced Javascript)是多麼容易。 「棋盤遊戲」當然涵蓋了很多領域,但你可以用jQuery做很多事情。我的記憶遊戲,雖然演示文稿是一個4×4的圖像網格既不使用絕對定位也不使用表格。 –

+0

當然,但是你可能沒有翻牌或者滑下棋盤或任何東西?我不需要那些可愛的動畫開始,但是當我開始做最後的動作時,我想要這個選項。 – mpen