HTML5 游戏开发快速提升--掘金小册课程推荐/优惠

小册介绍

HTML5 是构建 Web 内容的一种语言描述方式，是最新的 HTML 标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

为什么要学习HTML5游戏？

答案是 跨平台。任何支持多数 web 标准功能的浏览器或是浏览器控件都可以打开游戏。也就是说，你开发了一个 web 游戏，那么使用 android、苹果、wp手机都可以玩你的游戏，其它的比如之前 Ubuntu 开发的手机、平板系统都可以，甚至连智能电视都可以，只要它支持大多数的 HTML5 标准。你需要做的只是打包一下你的游戏，发布成相关平台的安装包就可以了。

需要什么样的技术前提？

需要了解 JavaScript 的语句、声明、表达式、运算符和一些常用的内置对象。可能有的朋友还不具备这些需求，如果了解基础的语法，可以去这里查询 Javascript 文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript。当你写完游戏之后回过头来重申你这个“创作”的过程，你就会发现，web游戏开发真的很简单，你需要的只是多练习。至于JavaScript这门语言，有前面提到的这个参考文档就足够了。后续的进阶教程里会有TypeScript和ES6版本，不明白这两个术语就先跳过，没有影响。

什么是游戏引擎？

使用 canvas 或 webgl 来开发游戏是完全可以的，游戏引擎就是封装了这些基础方法，包装成方便的工具模块，再加入物理引擎等等。在绘制一条贝塞尔曲线的时候，需要先翻出来公式，然后根据公式去实现算法，或是要模拟重力引擎，先翻出牛顿爵士的力学3大定理，然后用算法实现功能，再应用到图片上实现效果等等。想想这个过程，这个感觉就像是放着飞机不坐，选择走路去出差一样，然后在漫漫长路上不停的抱怨着这么好的风景为啥不开家饭店、旅馆等等，苦不堪言。这里做这些说明的意思是说不要着急造轮子，等到内功练到一定程度的时候再去做，毕竟从基础的api到一款可以使用的游戏引擎之间的路是很漫长很艰巨的。

一个游戏需要包含哪些要素？

简单来说：1、需要一个舞台，即大家眼睛可以看到的东西；2、需要演员，即游戏的元素内容。通常使用的名字是：State（舞台），Sprite（精灵），还有声音、文字等等，都属于游戏元素。3、游戏的逻辑，也就是游戏的玩法，逻辑越复杂，玩法越丰富，游戏就越有吸引力。

本系列教程中使用的开发工具是 visual studio code（简写 vscode），一款开源又好用的编辑器。入门教程旨在照顾0入门的新手读者，会比较简单，后面的实战教程希望大家能跟着动手写，而不是直接拷贝代码看效果，有了理论加上实践进步会更快。

在 html5 普及的情况下，快速开发跨平台的游戏或活动页面已经成为很多公司的必备技能。小册主要内容从介绍游戏开发开始逐渐深入，随着游戏案例教程慢慢抽丝剥茧，”、“背后思想”等等概念浮现到读者眼前，给读者一种原来开发游戏这么简单，然后进一步暗示开发过程中的“思想”这一核心理念，引导并帮助读者独立思考，从而在思想上能够更进一步。

冒险类游戏图示。

带商店功能的骨骼动画游戏图示。

你会学到什么？

html5 下基于 JavaScript 的游戏引擎和基于 typescript 的游戏引擎的序列图动画、骨骼动画与游戏开发，最重要的当然是游戏开发的思维。

适宜人群

适合有些微 html5、javascrpit 基础的人，喜欢或是爱好游戏开发的读者，圆大家一个游戏开发的梦

• 进阶篇3：从一个跑酷游戏说起上

• 进阶篇1：听说你当时很火爆上

• 基础篇1：游戏开发快速入门教程上

• 进阶篇4：从一个跑酷游戏说起下

• 实战篇3：新引擎实战教程二

• 基础篇4：必备技能之如何查询文档

• 基础篇2：游戏开发快速入门教程中

• 基础篇3：游戏开发快速入门教程下

• 实战篇2：冒险游戏实战一

• 基础篇5：必备技能之如何调试程序

• 语言篇1：TypeScript入门一

• 进阶篇2：听说你当时很火爆下

• 实战篇7：冒险游戏实战六

• 实战篇1：冒险游戏简介

• 实战篇4：冒险游戏实战三

• 实战篇3：冒险游戏实战二

• 实战篇6：冒险游戏实战五

• 实战篇5：冒险游戏实战四

• 实战篇8：冒险游戏实战收尾总结

• 语言篇7：TypeScript入门七

• 语言篇2：TypeScript入门二

• 语言篇5：TypeScript入门五

• 语言篇6：TypeScript入门六

• 语言篇3：TypeScript入门三

• 语言篇4：TypeScript入门四

• 实战篇1：骨骼动画与新引擎介绍

• 实战篇2：新引擎实战教程一

• 实战篇4：新引擎实战教程三

• 实战篇6：新引擎实战教程五

• 实战篇7：新引擎实战教程六

• 实战篇5：新引擎实战教程四

• 实战篇8：新引擎实战教程总结

• 附录 新增 ES6 Phaser 工程