請問如何從頭開始學習製作一款HTML5 小遊戲？

01-14

本人沒有任何編程語言的基礎（大學選修課學過C和Jacascript，但都忘了，現在用業餘時間學習HTML），希望能用HTML5製作一款小遊戲。除了HTML5，我還需要學習什麼呢？一個HTML5遊戲的架構是怎樣的呢？

先挖坑，回去填

----------------------------------------

先來看一下列一下自己的小遊戲，每個遊戲都是開源的哦，後面是github地址

貪吃蛇：無標題文檔（yanhaijing/snake · GitHub）
連連看：顏海鏡連連看4.0beta版（yanhaijing/linklink · GitHub）
翻一下：顏海鏡翻一下2.0beta版（yanhaijing/fan1xia · GitHub）
變色方塊：變色方塊史上最難智力遊戲（yanhaijing/inverter · GitHub）
看你有多色：看你有多色（GitHub - yanhaijing/color: 看你有多色）

這是我做過的五個html5小遊戲，由簡單到難，時間由遠倒近，其實H5小遊戲非常簡單的，根本連canvas都用不到，學點html，css和js就可以了，可以先從山寨別人的遊戲開始

個人感覺貪吃蛇，連連看，俄羅斯方塊這些都是非常不錯的練手項目

我後續還有什麼計劃呢？準備開發2048，俄羅斯方塊，。。。

-----------------------------------------

既然大家這麼熱情，我就在補充一些適合新手開發的HTML5小遊戲：

俄羅斯方塊
拼圖
打地鼠
打字遊戲（玩過很多金山的打字遊戲）

還有最近在微信里比較獲得一些簡單的小遊戲：

一夜**次郎（我玩的是杜蕾斯那個，有很多變種的）

這些我都沒做過，但個人感覺都比較簡單，又挺有意思，如果你有其他建議歡迎反饋啊o(∩_∩)o 哈哈

謝謝邀請。

我的HTML5經驗其實比較業餘，除了一些理論知識，動手的能力實際也不強，屬於那種紙上談兵型的。但是既然被邀請了，總要貢獻點內容。對於寫程序，我一直認為最好的學習方式是自己動手做。我以前看過一篇blog，講如何用HTML5實現Breakout小遊戲。基本上是step by step的一個walkthrough，很適合用來入門。我特地把它找了出來，貼在這裡，希望有所幫助。https://blogs.msdn.com/b/eternalcoding/archive/2011/09/06/write-a-small-game-using-html5-and-javascript-brikbrok.aspx

另外，最近msdn上多了很多HTML5的內容，質量都不錯，可以關註： http://social.msdn.microsoft.com/Search/en-US?query=HTML5ac=8

感謝邀請，我來簡單回答一下。

作HTML5小遊戲應該分兩個階段，

遊戲的策劃 + 技術的實現

1. 如果你沒有做過小遊戲，最好的方法是去多玩，先看你希望面向的平台是什麼，如果是手機，那麼市面上已經有不少HTML5的小遊戲了，比如http://YOUXI.CN上的，可以從最簡單的益智遊戲做起，比如棋牌類。因為控制比較簡單，你只要弄清楚邏輯就好。相比技術實現，好的遊戲策劃更重要，因為這是遊戲好玩的關鍵，需要不斷的體驗與學習。

2. 技術的實現，現在市面上有不少的遊戲引擎了，也有HTML5的框架，可以選擇自己比較感興趣的。國內的框架有flashlizi在他網站上公布的框架 http://www.riaidea.com/, 國外的有 impactjs等等。

小遊戲國內國外也都有不少的教程，

比如貪食蛇的教程 http://aniruddhaloya.blogspot.com/2011/07/html5-games-101-introductory-tutorial.html

打磚塊遊戲教程

http://blogs.msdn.com/b/eternalcoding/archive/2011/09/06/write-a-small-game-using-html5-and-javascript-brikbrok.aspx

除了HTML5，你還需要學習什麼？

做HTML5遊戲,並不需要學習全部的HTML5,先不談用js修改css控制實現的遊戲,一直對這方面不感冒,主流應該是使用canvas來做,2d和webgl,所以要做html5遊戲,只需要學會:canvas,javascript就可以了,至於其他的,跟遊戲關係不是很大,略懂就可以了.

當然,如果要更深一步,worker,websocket,localStorage可以有更深的挖掘空間.

基於問題,你還需要學習什麼:

javascript的基礎,高級使用,性能優化,定時器,主要時間是在跟js打交道.

遊戲循環的處理邏輯,不管是自己造輪子還是用引擎,自己必須知道架構怎麼去搭建和運作.

數學,尤其幾何學,勾股定理的使用,線性代數的理解,2D的還好說,3D的矩陣運算.

另外,當前很多HTML5遊戲都是想跑在微信平台里的,如果你也是這個打算,最好理解下微信的後台開發一些事情,如果自己不想做這方面的開發,找個做過微信後台的朋友問問大概的流程,知道自己在什麼條件下可以拿到什麼用戶信息.

我個人感覺遊戲邏輯是比代碼能力重要的，而遊戲邏輯也比代碼能力容易獲得，只要平時多玩遊戲，多思考就行了。

甚至於沒有一點代碼基礎的人，只要想做遊戲，都會有辦法製作出來的。（很多獨立遊戲大神都是零基礎開始製作遊戲）

至於，html遊戲的話需要一定的javascript基礎，html遊戲製作能力方面可以先學好js。

當然，其實就算用純css也可以寫遊戲，不過這個不是重點，所以不延伸了。

從上手簡單程度來說，dom遊戲是比較好入門的，甚至不需要html5的特性，也可以做出很不錯的遊戲。

dom遊戲

比如《合成10》

遊戲在線地址：合到10 dom版

遊戲製作邏輯部分： web《合成10》製作過程

很多遊戲都可以用html+javascript+css實現，也就是所謂的dom遊戲，比如《俄羅斯方塊》，《打鴨子》之類。

--------

canvas遊戲

進階一點的話，就是canvas遊戲，也就是大部分人口中的html5遊戲。

基本上，所有的dom遊戲都可以用canvas遊戲實現。

canvas遊戲：

月千之夜——web遊戲 - 騰訊視頻視頻

遊戲在線地址：月千之夜

遊戲的一些介紹：月千之夜

不過這個階段，你可能需要自己編寫遊戲引擎，還有一些雜七雜八的東西，那些東西對代碼能力的要求就非常高了。

--------

遊戲引擎

最後推薦下，遊戲引擎，cocos creator

Cocos引擎_遊戲開發引擎_html5遊戲開發_Android遊戲開發

如果你有自己寫過js遊戲引擎的話，這個東西非常好上手。

這裡有我從第一次接觸creator，到製作出一個橫版遊戲demo的時間，製作周期7天的記錄：

ElfA製作流程(1)【cocos creator橫版遊戲製作記錄】

另外，是後來做的一款完成度稍微高一點的格鬥遊戲：

格鬥節奏——你不曾玩過的手機格鬥遊戲 - 騰訊視頻視頻

歡迎來圍觀我的博客：沙因Sign

另外，我的個人公眾號SignACG，對遊戲製作感興趣的話可以關注下。

樓上所有的學習方法都過於複雜而且不容易上手。

記住，學習最快的辦法永遠都是「抄襲」。

只要上過大學的童鞋們肯定都清楚——考試前一天突擊準備小條或者考試抄小抄的時候你會突然發現自己學東西的速度怎麼突然變得這麼快。所以精髓就是「抄」。

好好找一些非第三方平台製作的H5，比如什麼畫圓、測試類的、翻頁展示類的，通過瀏覽器查看源代碼然後把所有相關文件都下載下來，利用好瀏覽器的審查元素功能，先把別人做的H5抄下來。其實語法並不重要，你只要從頭到尾把每個文件都讀一遍，就很容易上手了。有什麼問題記得隨時百度，尤其是各種語法問題，w3school是非常好的幫手。

不要覺得抄是很丟人的事情，BAT哪家公司不是先抄過來別人的創意再在產品上進行迭代更新的？

迭代之後的產品屬於你自己了。

歡迎加好友。

幫你查了下一些github比較受歡迎的HTML遊戲，可以參考下~

gabrielecirulli/2048: A small clone of 1024...

mozilla/BrowserQuest: A HTML5/JavaScript multiplayer game experiment

AlexNisnevich/untrusted

doublespeakgames/adarkroom

GitHub - ellisonleao/clumsy-bird: A MelonJS port of the famous Flappy Bird Game

Hextris/hextris: A fast paced puzzle game inspired by Tetris

Q42/0hh1 · GitHub

我個人認為的入門步驟如下：

1、HTML基礎學習（常用標籤）

2、CSS基礎學習（能夠簡單的使用css進行頁面樣式的設置）

3、JavaScript學習（一般語法、高級特性）

4、html5學習（主要就是canvas標籤的各種介面）

5、最好還需要一定基本的顏色搭配、圖片處理等方面的知識

現在國內h5開發引擎最大而全的就egret 和 cocos2d html5了。可以看裡面的入門教程寫遊戲

這個問題我可以答。

我也是基本不會編程，最近用這個在線製作H5的工具做了一個小遊戲。

先說作品，是個無厘頭的無聊小遊戲。

遊戲首頁，遊戲標題是瞎編的。分成「故事模式」和「沉思模式」，右下角是我的公眾號

選擇「故事模式」之後進入遊戲，點擊「用力」按鈕屏幕頂部的屁股就會開始拉屎

遊戲勝利畫面，由於知乎會把有二維碼的圖片轉成鏈接所以把二維碼塗了

下面是遊戲鏈接，要用手機打開。

http://filea385b300e777.vt.iamh5.cn/v3/idea/N6CKkzXr (二維碼自動識別)

從開始接觸上面提到的那個在線製作H5的工具到完成這個遊戲大概是一周的時間，對於我這麼笨的人可以說是很快速了。

印象中剛進入那個官網的時候好像是要先註冊才能查看的，如果是的話放心註冊吧。進入官網之後會發現裡面的教程很完善，這點特別良心

這是官網首頁的導航，紅框的3個地方都能找到很多教程

然後如果這些教程都不能滿足你的話還能加qq群。裡面的管理員很活躍，基本上問問題馬上就有人回答。

由於知乎會把有二維碼的圖片轉成鏈接所以把二維碼塗了，在QQ里搜索QQ群號就行

然後我就是這麼學會的，雖然只是點皮毛但是後面再做些簡單的東西應該都沒問題。

最後在強調一下，剛入門的時候一定要把下圖紅框這些教程看完，反正我是看完了。

另外這不是廣告

找找一些遊戲引擎裡面一般都有demo,試著自己也寫一個就好了：）