请问如何从头开始学习制作一款HTML5 小游戏？

本人没有任何编程语言的基础（大学选修课学过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，你还需要学习什么？

做HTML5游戏,并不需要学习全部的HTML5,先不谈用js修改css控制实现的游戏,一直对这方面不感冒,主流应该是使用canvas来做,2d和webgl,所以要做html5游戏,只需要学会:canvas,javascript就可以了,至于其他的,跟游戏关系不是很大,略懂就可以了.
当然,如果要更深一步,worker,websocket,localStorage可以有更深的挖掘空间.

基于问题,你还需要学习什么:
javascript的基础,高级使用,性能优化,定时器,主要时间是在跟js打交道.
游戏循环的处理逻辑,不管是自己造轮子还是用引擎,自己必须知道架构怎么去搭建和运作.
数学,尤其几何学,勾股定理的使用,线性代数的理解,2D的还好说,3D的矩阵运算.

另外,当前很多HTML5游戏都是想跑在微信平台里的,如果你也是这个打算,最好理解下微信的后台开发一些事情,如果自己不想做这方面的开发,找个做过微信后台的朋友问问大概的流程,知道自己在什么条件下可以拿到什么用户信息. 帮你查了下一些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 感谢邀请， 我来简单回答一下。
作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经验其实比较业余，除了一些理论知识，动手的能力实际也不强，属于那种纸上谈兵型的。但是既然被邀请了，总要贡献点内容。对于写程序，我一直认为最好的学习方式是自己动手做。我以前看过一篇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=HTML5&ac=8

楼上所有的学习方法都过于复杂而且不容易上手。
记住，学习最快的办法永远都是“抄袭”。
只要上过大学的童鞋们肯定都清楚——考试前一天突击准备小条或者考试抄小抄的时候你会突然发现自己学东西的速度怎么突然变得这么快。所以精髓就是“抄”。

好好找一些非第三方平台制作的H5，比如什么画圆、测试类的、翻页展示类的，通过浏览器查看源代码然后把所有相关文件都下载下来，利用好浏览器的审查元素功能，先把别人做的H5抄下来。其实语法并不重要，你只要从头到尾把每个文件都读一遍，就很容易上手了。有什么问题记得随时百度，尤其是各种语法问题，w3school是非常好的帮手。

不要觉得抄是很丢人的事情，BAT哪家公司不是先抄过来别人的创意再在产品上进行迭代更新的？
迭代之后的产品属于你自己了。
欢迎加好友。 我个人认为的入门步骤如下：
1、HTML基础学习（常用标签）
2、CSS基础学习（能够简单的使用css进行页面样式的设置）
3、JavaScript学习（一般语法、高级特性）
4、html5学习（主要就是canvas标签的各种接口）
5、最好还需要一定基本的颜色搭配、图片处理等方面的知识

找找一些游戏引擎里面一般都有demo,试着自己也写一个就好了：） 推荐 craftyjs