UDN-企业互联网技术人气社区

板块导航

浏览  : 6561
回复  : 12

[HTML5] 新手如何学习制作一款HTML5游戏

[复制链接]
追风少年铁柱的头像 楼主
发表于 2015-7-16 09:26:24 | 显示全部楼层 |阅读模式
本人没有任何编程语言的基础(大学选修课学过C和Jacascript,但都忘了,现在用业余时间学习HTML),希望能用HTML5制作一款小游戏。除了HTML5,我还需要学习什么呢?一个HTML5游戏的架构是怎样的呢?

相关帖子

发表于 2015-7-16 09:27:10 | 显示全部楼层
作HTML5小游戏应该分两个阶段,
游戏的策划 + 技术的实现

1. 如果你没有做过小游戏,最好的方法是去多玩, 先看你希望面向的平台是什么,如果是手机,那么市面上已经有不少HTML5的小游戏了,比如http://YOUXI.CN上的, 可以从最简单的益智游戏做起, 比如棋牌类。 因为控制比较简单, 你只要弄清楚逻辑就好。 相比技术实现,好的游戏策划更重要,因为这是游戏好玩的关键,需要不断的体验与学习。

2. 技术的实现,现在市面上有不少的游戏引擎了,也有HTML5的框架, 可以选择自己比较感兴趣的。国内的框架有flashlizi在他网站上公布的框架 http://www.riaidea.com/, 国外的有 impactjs等等。

小游戏国内国外也都有不少的教程,
比如贪食蛇的教程 http://aniruddhaloya.blogspot.co ... ctory-tutorial.html

打砖块游戏教程
http://blogs.msdn.com/b/eternalc ... cript-brikbrok.aspx
点评 ( 1 ) 收起 / 展开点评

冰澈 2015年07月28日 10:43 详情 回复

使用道具 举报

回复

发表于 2015-7-16 09:27:34 | 显示全部楼层
我的HTML5经验其实比较业余,除了一些理论知识,动手的能力实际也不强,属于那种纸上谈兵型的。但是既然被邀请了,总要贡献点内容。对于写程序,我一直认为最好的学习方式是自己动手做。我以前看过一篇blog,讲如何用HTML5实现Breakout小游戏。基本上是step by step的一个walkthrough,很适合用来入门。我特地把它找了出来,贴在这里,希望有所帮助。https://blogs.msdn.com/b/eternal ... cript-brikbrok.aspx
点评 ( 1 ) 收起 / 展开点评

少年包工头 2015年07月16日 09:28 详情 回复

另外,最近msdn上多了很多HTML5的内容,质量都不错,可以关注: http://social.msdn.microsoft.com/Search/en-US?query=HTML5&ac=8

使用道具 举报

回复

发表于 2015-7-16 09:28:30 | 显示全部楼层
少年包工头 发表于 2015-7-16 09:27
我的HTML5经验其实比较业余,除了一些理论知识,动手的能力实际也不强,属于那种纸上谈兵型的。但是既然被 ...

另外,最近msdn上多了很多HTML5的内容,质量都不错,可以关注: http://social.msdn.microsoft.com ... uery=HTML5&ac=8
使用道具 举报

回复

发表于 2015-7-16 09:28:49 | 显示全部楼层
我个人认为的入门步骤如下:
1、HTML基础学习(常用标签)
2、CSS基础学习(能够简单的使用css进行页面样式的设置)
3、JavaScript学习(一般语法、高级特性)
4、html5学习(主要就是canvas标签的各种接口)
5、最好还需要一定基本的颜色搭配、图片处理等方面的知识
使用道具 举报

回复

发表于 2015-7-16 09:29:05 | 显示全部楼层
找找一些游戏引擎里面一般都有demo,试着自己也写一个就好了:)
使用道具 举报

回复

发表于 2015-7-21 18:36:27 | 显示全部楼层
学习顺序:js -> canvas/webGL -> fireball-x, 以下是详细解释:

假定楼主已经有一定的游戏开发基础, 如果没有的话, 我建议楼主做一些游戏开发的基础学习. 那么要最快时间点出 HTML5 游戏开发的技能树, 按照上述路线即可.

Javascript: 这个不用说了, 这是 H5 开发的入门语言, 楼主完全不用在意目前 H5 领域的其他语言变种, 比如 CoffeeScript, TypeScript. 这些变种只会给你的学习带来混乱, 我们只需要专注掌握 Javascript 即可.

canvas/webGL: 要做 H5 游戏自然少不了在上面画东西, 那么根据自己的情况选择一种绘制方案. 如果是初学者, 我推荐 Canvas , H5 的 canvas 2d context 已经包含了比较完备的 2d graphics 绘制 API, 这可以让我们画东西更加快捷. 而如果楼主励志要做高效的游戏, 3D 绘制 或者更高阶的绘制技巧, 那么掌握 webGL 是必不可少的. 如果你没有 openGL 方面的知识, 也不用害怕, 因为 webGL 正好是一次让你补习的机会, 他的 API 设计和 openGL ES 非常类似, 其内在的知识点也都是相同的, 而且上手更方便简单, 在这样的环境下, 比起过去学习 openGL 的开发者来说要迅速很多, 也容易获得成就感, 所以我是非常推荐在 canvas 学习的基础上在进一步学习 webGL 的.

fireball-x: http://fireball-x.com 是一个类似 Unity3D 的游戏引擎, 他的初衷便是让前端开发人员可以在已有的基础上, 方便地开发 H5 游戏. 目前引擎处于非常早期的内测阶段, 但是已经是一个功能相对完备的开发工具了. 对于以学习为目的的 H5 游戏开发人员, 我非常推荐这个引擎工具. 他不仅提供给你从脚本编写到场景编辑的无缝环境, 而且引入了现在主流游戏开发中的 Entity-Component 的设计体系, 和同类引擎相比, fireball-x 提供了非常好的脚本编写和调试环境, 并且省去了初学者上手设置页面和测试页面等诸多恼人且费时的事情, 所以是入门学习 H5 游戏的好帮手!

三个阶段后, 我们可以再来看看其他一些技能树:

css: 对于游戏开发不是必要的, 如果你不做页面排版, 单纯只是做 h5 游戏开发, 那么掌握 css 对你的帮助更多的是思路上的开阔. css 作为一门较为成熟的排版 DSL, 他归纳了许多优秀的思想, 这些设计思想可以帮助你应用在其他领域, 包括你自己设计的游戏 UI 系统.

Dom Event: 你需要掌握一些简单的 Dom Event, 用他们来做 Input 响应. 那么更深入的 Dom Event 学习是否有必要呢? 答案是肯定的, 了解 bubble phase, capture phase 和一些常用消息不会消耗你多少时间, 但是他却能够在你整个 h5 开发过程中解释非常多的疑问, 所以花点时间去学习, 也就一天就搞定的事情.

Web Audio: 简单的说, 目前的主流浏览器对这个东西的支持都是渣, 往远处看 Web Audio 确实很好的归纳了声效编程的一些基础知识点. 所以有多余时间就好好的学习一下.

楼主到了这里, 技能树的基础点大概就点的差不多了, 自己根据需要继续就是了. html5 游戏开发很有趣, 主要是快捷, 写点代码开个 devtools debug 非常的轻松愉快, 楼主选了个好方向.
使用道具 举报

回复

发表于 2015-7-28 10:43:46 | 显示全部楼层
一脸美人痣 发表于 2015-7-16 09:27
作HTML5小游戏应该分两个阶段,
游戏的策划 + 技术的实现

使用道具 举报

回复

发表于 2015-7-28 20:32:27 | 显示全部楼层
感谢分享
使用道具 举报

回复

发表于 2015-8-11 00:50:32 | 显示全部楼层
不知道大家有没有注意到,html5和云的概念是对应有关联的性的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部