製作Javascript和HTML5遊戲

很久以前（Netscape 4-era），我寫了基於Javascript的遊戲：Pong，Minesweeper和John Conway的人生。我正在回到它，並希望讓我的手更骯髒。製作Javascript和HTML5遊戲

我心裏有幾場比賽：

軸&同盟國克隆，具有堅固耐用的地圖和複雜的規則。
俄羅斯方塊克隆，可能與實時的玩家VS玩家或玩家VS電腦模式
突破克隆，與一對夫婦的武器和粒子速度

在所有這些，我只有幾個目標：

使用JavaScript和HTML 5 - 它應該在Chrome，Safari或iPad上運行。
從小而簡單，然後構建功能。
瞭解有關遊戲設計和實施的新內容。

所以我的問題是：

你將如何實現這些遊戲嗎？
您有任何技術建議嗎？
如果你寫過這些遊戲，最難的部分是什麼？

N.B. 我也想從第一原則開始 - 如果你推薦一個框架/庫，我會很欣賞它背後的一些理論或實現細節。這些遊戲是不同的，我應該從每一個新的東西學到新東西。

來源

2010-06-11 Jeff Meatball Yang

取決於你想從頭開始多少。回答你的直接問題：

1）你將如何實現這些遊戲？

A：JavaScript + Canvas。 Canvas是HTML5的2D繪圖表面。桌面計算機上的性能非常好，在iOS和Android設備上表現不如（截至本文發佈日期）。如果移動是您最關心的問題，那麼您需要使用在這些設備上觸發GPU的DOM和CSS3 3D轉換。

2）您是否有任何技術建議？

答：這是第一個問題的答案。 JavaScript是必須的，但我會忽略jQuery。您針對的是HTML5設備，因此無需補償舊版瀏覽器。由於您可能正在使用Canvas，因此無需平滑DOM交互。有一些較高級別的庫可以更輕鬆地與Canvas進行交互，例如Easel.js。 WebSockets對於雙向流式通信非常有用。 Box2D對物理引擎很有用。本地存儲是一些簡單的鍵/值字符串數據，例如級別進度，但對於任何複雜的事情，您都需要WebSQL DB。對於大型二進制資產，您需要查看文件系統API。最後，不要害怕WebGL，因爲它對2D遊戲來說非常快速和有用。

3）最難的部分是什麼？

答：幾乎肯定最難的部分是調試。 WebKit的開發工具可以使這個更容易，所以不要離開他們離開家。

來源

2011-05-18 04:05:08

此帖較舊，所以我想更新。 HTML5 + Canvas現在在一兩年前的移動設備上效果很好，我有一臺iPhone 4（按照今天的標準，它是舊硬件），但我可以讓我的遊戲在其上運行。當我運行更新的任何東西時，我會獲得出色的表現。 – Unome 2014-08-05 20:37:15

看看ChromeExperiments這些例子來自世界各地，使用最新的開放標準，包括HTML5，Canvas，SVG和javascript。

來源

2010-06-11 00:59:33

對我而言，最難的部分是沒有工具來幫助製作圖形，因爲沒有Maya導出到畫布，例如，所有操作都是手動完成的，除非您想採用基本操作您將像修改精靈一樣修改位圖。

當時在畫布上沒有真正的文字支持，所以我的解決方案無法使用excanvas，但在Safari和Firefox上運行良好。

因此，您可能需要查看您想要支持的HTML5功能，例如內置數據庫，然後決定您願意使用哪些瀏覽器。

如何實現這些將在很大程度上取決於您想要如何創建圖形，如果您想要做3D圖形，那麼位圖精靈將無法工作。

來源

2010-06-11 01:05:55

把簡單的使用畫布移動大量的東西在屏幕和SVG的漂亮，慢，矢量圖形。

你應該做的第一件事情之一是編寫一個speed test程序，看看Canvas可以做些什麼，然後玩它。

我寫了一篇博客文章Canvas & writing HTML5 games

來源

2011-07-03 20:24:10

鏈接腐爛的兩種情況...你能更新鏈接嗎？他們都聽起來很有趣。 – Josien 2014-01-10 12:46:17

@Josien鏈接更新 – 2014-01-10 17:02:00

非常感謝！ – Josien 2014-01-10 18:01:12

湯姆這裏從Scirra（Construct 2 game maker）。我們製作了一個名爲Construct 2的HTML5遊戲引擎，它純粹導出爲HTML5無Flash！

構造2使用基於事件的系統爲您的遊戲添加邏輯，併爲您完成大量的重複性/困難的修腳工作。例如，在沒有一些可視化編輯器的情況下將多邊形碰撞添加到對象是一項艱鉅的任務。

無論如何，我們認爲這是值得一看，你也可以很快得到結果。在開發HTML5遊戲時，您可能需要考慮整個遊戲的編碼方式。

來源

2011-12-09 21:53:05

謝謝，儘管自從我問這個問題以來已經有一段時間了，但我仍然一直在編寫自己的遊戲仿冒作品。會看看！ – 2012-01-05 03:55:58

@Jeff沒問題，讓我們知道你如何繼續 – 2012-01-05 16:03:22

不要忘了processing.js，這是一個經過很好測試的全棧圖形和交互式JavaScript框架，它對大多數I/O，聲音，圖形甚至WebGL都有很大的支持（如果不是全面的話）。如果您編寫的vanilla處理代碼（基本上是將Java語法編譯爲JavaScript），則可以使用許多開源調試器，包括原生的Processing環境。除此之外，您可以集成您想要包含的任何其他JavaScript代碼。

這裏是a guide for the JavaScript developer，解釋了你可能想知道的大部分內容。

檢查出來。好東西。

來源

2012-01-04 17:33:01 allanberry

當我也開始學習HTML5時，一個很好的問題我也遇到了這個問題，最後經過大量研究，我發現最好的方法是使用一些引擎或框架。我學習了畫布並製作了我自己的game，但花費了數小時的邏輯和100多行代碼。

最好用scirra，它可能會減少你的工作。

來源

2012-07-03 16:55:26