从 0 开始学游戏开发
蔡能
原网易游戏引擎架构师,资深游戏底层技术专家
37243 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 42 讲
从 0 开始学游戏开发
15
15
1.0x
00:00/00:00
登录|注册

第30讲 | 热点剖析(三):试试看,你也可以编写一款HTML5小游戏!

适合教学示例
容易上手
HTML5游戏中的碰撞检测
图片刷新和清空操作
循环方式
HTML5游戏启动页
不需要关心图片刷新或清空操作
事件驱动
添加帧事件和控制事件
加入玩家
得分显示
添加游戏背景
游戏底层实例化
载入进度条
Main.js代码解释
index.html代码解释
打飞机游戏示例
HTML5游戏渲染速度
浏览器担负应用层工作
游戏场景在浏览器中呈现
HTML代码中引入引擎库件
引擎文件说明
下载和解压
Cocos-2d引擎
白鹭引擎
lufylengend引擎
下一步挑战
总结
HTML5游戏特点
HTML5游戏循环方式
游戏初始化
lufylengend引擎demo
制作HTML5游戏
lufylengend引擎说明
引擎比较
引擎选择
主题:HTML5小游戏编写
标题:试试看,你也可以编写一款HTML5小游戏!
参考文章

该思维导图由 AI 生成,仅供参考

前两周,我分析了HTML5 的核心竞争力以及HTML5 游戏的引擎。选择好了 HTML5 引擎,我们就可以开始制作游戏了。
对于编写 HTML5 小游戏,你或许会很有兴趣,因为 HTML5 现在已然是一个潮流,而且利用引擎编写 HTML5 游戏已经变得相当方便。

如何选择一款引擎?

我选择的是比较容易上手的 lufylengend 引擎。为什么要选择这款引擎呢?因为它只需要下载一个压缩包,并且不需要特别繁琐的说明和设置就能直接上手,用作我们的教学示例是最合适的。
如果使用白鹭引擎或者 Cocos-2d 引擎这些比较有名的引擎,可能会有这些问题。
这些引擎从工具到套件都非常成熟,你直接下载一个引擎启动器或者组件管理器,就可以一应俱全地在启动器里面下载,配置到默认路径。但是,这些工具拥有纷繁复杂的界面,你连上手都要费一段时间,更别说短时间内熟练使用并制作出一款游戏。
这些引擎需要引入的库或者使用的方式极为系统,所以你需要系统地引入库文件,才可以使用。事实上我要做的示例,并不需要很多复杂的东西,你只需要跟我从头到尾走一遍,就能明白编写 HTML5 游戏是怎么回事。
这些引擎需要别的工具支持,比如 node.js。作为新手来说,光配置 node.js 就是一项比较麻烦的工作。所以我选择了 lufylengend 引擎这一个比较“单纯的”引擎来作为教学引擎。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入介绍了使用lufylengend引擎编写HTML5小游戏的方法和技巧。通过简单的下载、解压缩和引入库件初始化,读者可以轻松开始游戏编程。文章以打飞机游戏为例,解释了游戏代码的结构和初始化过程,展示了引擎文件的包含方式和游戏初始化的关键步骤。此外,还介绍了HTML5游戏的渲染速度和事件循环的实现方式。总的来说,本文为读者提供了选择HTML5引擎、编写HTML5小游戏的基本指导,以及使用lufylengend引擎制作游戏的实际操作示例。 在HTML5游戏中,事件驱动模式和简洁的图片操作是其特点之一。相较于传统游戏,HTML5游戏省却了底层操控,使开发者能更多地关注游戏逻辑和可玩性。此外,碰撞检测在HTML5打飞机游戏中是一个重要问题,读者可以结合文章内容思考并留言讨论。整体而言,本文为读者提供了深入了解HTML5游戏开发的基础知识和实际操作经验,对于想要进入HTML5游戏开发领域的读者具有重要参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《从 0 开始学游戏开发》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(3)

  • 最新
  • 精选
  • lll
    作为一名web前端,对游戏开发有兴趣,对这一篇教程很熟悉,做过一些很简单的h5游戏,但感觉缺少了游戏方面知识,所以来跟着老师学习这个课程...

    作者回复: 谢谢,h5目前不是专栏主讲内容,所以会有些侧重不同。

    2018-06-30
    2
  • slark
    如果想学H5引擎,去搜下phaser,里面Demo很丰富
    2018-07-30
    4
  • 赵鹏
    感觉lufylegend非常偏向很小的游戏,跟flash的效果一样。
    2019-01-29
收起评论
显示
设置
留言
3
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部