在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
现在想用H5做游戏开发， 该如何下手，从哪学起，有么有推荐的书籍，或者是大纲。我现在无从下手啊。
这个问题已被关闭，原因：偏离社区主题，与技术无关、讨论类、对他人无用
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
并不推荐直接使用canvas开发游戏。对于学习游戏开发作用不是很明显。建议学下egret 白鹭引擎。学完之后试着开发一款自己的游戏。美术资源可以网上找。刚开始可能做做打飞机这种游戏熟悉整个开发流程
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
先用canvas写个贪吃蛇
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
学白鹭引擎吧.我们公司产品就是用的这个.目前正在升级到白鹭5版本
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
实习期间用过几个月的 egret，上手很快，使用ts编写，最后编译成js运行。
如果想要练习的话，可以去社区搜索游戏源码，有很多别人分享出来的源码练习找素材就更方便了，去小游戏网站，f12
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
*.绝大部分所谓的H5游戏开发其实就是拿一个别人已经弄好的H5游戏引擎写毫无营养的业务代码，入门门槛很低，比如白鹭，对着文档练习就行*.想进阶的话就得研究canvas和WebGL，这绝不是短时间能出成绩的，建议循序渐进，定长远目标
这个问题已经被关闭无法回答
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。你可能感兴趣的其他资讯
任天堂并不准备改变它对于移动游戏的态度。这可能是它所犯的天大的错误。
由于视角及才能有限，文中的分析难免以偏概全，外包公司与整个游戏行业的关系犹如鱼之与水、客之于船。
磨合近4个月未果后，德力股份宣告与游戏公司北京武神世纪网络技术股份有限公司“和平分手”。公司12日晚间公告，终止重组武神世纪并撤回本次重组申请文件。
经历了前期爆炸性增长，移动游戏行业处于希望与失望并存的焦灼之中。短暂的产品生命周期、高昂的渠道分发成本、越来越挑剔的用户以及趋于理性的资本等让移动游戏行业日趋退烧
据了解，本次HTML5标准将会取代1999年制定的HTML 4.01、XHTML 1.0标准，期望能使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
在过去的一两年，中国手游在画面和玩法上有了很大的突破，社交系统的构建也有了很多变化。然而在玩法和画面表现力不断重度化的同时，手游社交化的竞争也日益激烈。
移动游戏市场才刚刚兴起不到两年，整体规模依然在高速增长，今年市场规模有望突破300亿。
今天手游江湖就和大家一起来盘点上半年移动互联网市场都有哪些变化，希望能能给手游业界的小伙伴们一个回顾，回头看看总结经验，为下半年的手游市场激烈竞争做好准备：
近日手游江湖有幸采访到了淘乐副总裁付郝，关于《大侠别嚣张》这款游戏向副总裁提出了一些疑问，付郝详细的做出了解答。下面是采访实录：
巨人移动徐博：我觉得无论何时，游戏的品质都是最重要的，好的作品自然会受到大家的一致认可的。
近日，在腾讯互娱公布自研体系架构调整后，腾讯首席运营官任宇昕发出至互娱事业群全体员工的内部信，解读这一次的架构调整。
今天手游江湖采访到飞流的掌门人倪县乐先生，在下面的采访实录中倪博将和我们分享飞流如何在手机游戏红海市场中突围。干货爆棚，希望能给手游业界的同学们带来一些参考。(荡漾之水)
(跨境电商_Max)
第三方登录：25.5k 次阅读
标签：至少1个，最多5个
本系列文章对应游戏代码已开源 。
从萌发写一个小游戏的想法到完成游戏开发用了大概一周的业余时间。这个过程积累了一些经验，也算是参透了一些游戏开发的原理。在这里打算写一个系列教程，讲述怎样从零开始开发一款小游戏。让新者少走弯路，快速入手。也能让自己总结反思，发现问题。
在开始介绍如何写游戏前有必要重温一下canvas。它是本游戏的地基，建房子要快，首先地基要牢固。
Canvas 对一个做前端的人来说再熟悉不过，html5中新增的这个功能为网页创造了无限可能，极大促进了网页富应用的开发。
而canvas对于大部分前端来说又是陌生的。
可以说在写这个游戏之前，我只是模糊地记得canvas的一些功能，以及经常在网上看到的酷炫高大上的基于canvas实现的效果，但自己绝对答不出canvas有哪些API，以及它们的具体使用方法。毕竟自己平时没做过类似的活动页，在大厂里这些工作一般都是让UED部门给承包了。
好了，废话不多说，进入主题。
在开始之前建议读一遍，如果有《犀牛书》也可以看第21章关于canvas图形编程一节。
里面几个概念需要说一下。
context上下文：
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
我们的图形并不是直接花在canvas上的，而是要通过getContext首先获得这个画板的上下文。传入的2d参数则表示我们创建的是一个2d的画布。后面所有的绘画都是直接操作cxt这个画布对象。
这个画布对象的全称是 CanvasRenderingContext2D，上面实现了很多绘制方法。具体用到可以参考 。
API虽然多，但是道理只有一个，万变不离其宗。
现实中我们画一个东西一般要有以下几个步骤：
而实际上CanvasRenderingContext2D API的设计也是大概遵循这样一个步骤，每一步都会最终影响画出来的图案。
我们可以将所有绘制分为两大类，一类是线，一类是面。线使用的API一般以stroke开头，面的API是以fill开头。
画一条线：
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
//准备画布
cxt.lineWidth = 5;
//选择画笔
cxt.strokeStyle = "red";
//选择颜料
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
//画出轮廓
cxt.stroke();
//填充颜色
画一个三角形面
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
//准备画布
cxt.lineWidth = 5;
//选择画笔
cxt.fillStyle = "red";
//选择颜料
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
//画出轮廓
cxt.fill();
//填充颜色
只要将stroke的地方换成fill, 就变成图形面的填充。而这里的lineWidth其实是可以省略的，它的默认值是1。
为了方便，CanvasRenderingContext2D为我们提供了一些简单的API，不需要使用moveTo和lineTo一条线段一条线段绘制。最重要的有几个：
cxt.arc(x, y, radius, startAngle, endAngle, anticlockwise);
，：画矩形
cxt.fillRect(x, y, width, height)
//填充图形
cxt.strokeRect(x, y, width, height)
//不填充图形
cxt.fillText(text, x, y [, maxWidth])
当然CanvasRenderingContext2D还有更多丰富的API，但是基本都是基于上面5个步骤衍生出来的。基础开发中很少会使用到，可以用时再查阅文档。
为了能在一张画图上绘制多个图形而互不影响，CanvasRenderingContext2D提供了beginPath和 closePath。
beginPath 用于在开始绘制一个独立图形的时候声明，在beginPath之后定义的画笔，颜料都不会影响到画图中的其他图形。可以看到下面的两条路径，各自定义了strokeStyle, 但是互不影响。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//第一条路径
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();
//第二条路径
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20,20);
ctx.lineTo(120,120);
ctx.stroke();
closePath 用于方便地将首尾两个点连接起来，形成一个封闭的图形，而不必手动调用lineTo闭合图形。 例如上方的三角形线段可以这样用：
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.closePath();
cxt.stroke();
上面详细介绍的几个简单的API已经足够开发一个简单的游戏了。而如何使游戏界面更丰富炫酷，则需要用到更多的辅助方法。我们将在游戏中用到时再做具体介绍。
关于canvas的基础就温习到这，下一篇文章将进入本游戏的开发。敬请期待。
6 收藏&&|&&118
一直在看，写的不错
一直在看，写的不错
beginPath那去掉也不影响
beginPath那去掉也不影响
建议去4399下个小游戏
看看十年前的战场是怎么样的，至少一万到十万个h5游戏，真的不要用这种教科书上的知识了，打不了现代战争
建议去4399下个小游戏
看看十年前的战场是怎么样的，至少一万到十万个h5游戏，真的不要用这种教科书上的知识了，打不了现代战争
有需要做H5游戏外包可以找我，秋秋：
有需要做H5游戏外包可以找我，秋秋：
此号已废，+V lc808474
此号已废，+V lc808474
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。H5游戏开发：游戏引擎入门推荐
很多刚刚接触到游戏开发，准备大展拳脚的小鲜肉们，往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐，官网上相关资料也比较少，而选择一个适合的游戏引擎是一个项目最基础，也是很核心的一部分。试想一下，在游戏开发进行到中后期的时候，才发现项目引入的游戏引擎与需求相悖，这时候不管是重新做一些修修补补的工作或者更换游戏引擎，这都是相当耗费人力物力的一件事。为了避免这种情况的出现，在前期选择适合项目需求的游戏引擎显得尤为重要。接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。在刚接到游戏需求时，我们可以从以下几个方面进行考量，分析出游戏需求场景所属，从而作为我们选择游戏引擎的依据。游戏效果呈现方式（ 2D ？ 3D ？ VR ？）这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三种。而 2D 渲染一般也有三种：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因，一般只适合做一些动画效果较少，交互较少的小游戏，本文主要针对 Canvas 和 WebGL 展开介绍。一般来说，对于 2D 小游戏来说，Canvas 渲染已经足够。然而 Canvas 渲染由于底层封装层次多，不足以支撑起大型游戏的性能要求，因此大型游戏最好选择 WebGL 渲染或者浏览器内嵌 Runtime 。游戏复杂度这与游戏引擎能够支持的功能，提供的API，性能等方面关系比较大。笔者从业界较流行的一些框架，进行以下几个方面对比，希望能从客观数据上给大家的技术选型带来建议和参考。引擎支持的渲染方式github上的 star 数更新时间文档详细度周边产品2D，3D，VR 都支持的游戏引擎name2D渲染（Canvas）2D渲染(WebGL)3D渲染（WebGL）VRgithub star 数文档详细程度周边产品备注EgretYESYESYESYES2k（最新更新2017.12）? 有中文文档? 例子充足? 社区活跃游戏开发过程中的每个环节基本都有工具支撑。不仅仅提供了一个基于HTML5技术的游戏引擎，更是提供了原生打包工具和众多周边产品LayaAirYESYES（优先）YESYES0.7k（最新更新2017.12）? 有中文文档? 例子充足? 社区活跃提供开发工具和可视化编辑器支持2D、3D、VR，能开发超大游戏，forgame的醉西游，腾讯的QQ农场，乐动卓越的浪漫h5这些大作就是用它开发Egret 周边产品白鹭引擎是企业级游戏引擎，有团队维护。Egret 在工作流的支持上做的是比较好的，从 Wing 的代码编写，到 ResDepot 和 TextureMerger 的资源整合，再到 Inspector 调试，最后到原生打包（支持 APP 打包），游戏开发过程中的每个环节基本都有工具支撑。官网上的示例，教程也是比较多。值得一提的是，今年5月白鹭引擎支持了 WebAssembly ，这对于性能的提升又是一大里程碑。在渲染模式上，LayaAir 支持 Canvas 和 WebGL 两种方式；在工具流的支持程度上，主要是提供了 LayaAir IDE。LayaAir IDE 包括代码模式与设计模式，支持代码开发与美术设计分离，内置了 SWF 转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。下图是主要支持2D游戏的游戏引擎name2D渲染（Canvas）2D渲染(WebGL)3D渲染（WebGL）VRgithub star 数文档详细程度周边产品备注Pixi.jsYESYESNONO16.8k(最新更新2017.12)? 英文文档? 例子充足? 英文社区无依赖于canvas的WebGL渲染器PhaserYESYESNONO16.9k（最新更2017.07）? 英文文档? 例子充足? 英文社区提供在线编辑器Phaser Sandbox CreateJsYESYESNONO6.5k（最新更新2017.12）? 英文文档? 例子充足? 有博客无官方推荐TweenJS，SoundJS，PreloadJS配合使用HiloYESYESYES(Hilo3D)NO4.2k（最新更新2017.12）? 有中文文档? 例子充足提供资源下载和管理工具阿里巴巴集团推出，适合开发营销小游戏，以Chipmunk为2D物理引擎，与主流物理引擎兼容Cocos2d-xYESYESNONO11.2k（最新更新2017.12）? 有中文文档? js例子不多，c++例子较多? 社区活跃Cocos Creator编辑器，打包工具等提供的功能相当完整lufylegend.jsYESNONONO0.4k（最新更新2016.03）? 有中文文档? 社区活跃无仿ActionScript3.0的语法，支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多种热门环境，可以配合Box2dWeb制作物理游戏，内置了LTweenLite缓动类等一般来说，WebGL 的渲染速度都会比 Canvas 快，这是由俩者的绘制路径决定的。Pixi 最大的特点在于，Pixi 具有完整的 WebGL 支持，却并不要求开发者掌握 WebGL 的相关知识，并在需要时无缝地回退到 Canvas 。相较于很多同类产品，它的渲染能力是比较强大的。然而，Pixi 也有不足的地方，Pixi 对于动画的支持是比较缺乏的，在实际开发中，常常需要引进额外的动画库，如 GSAP。Phaser 在渲染方面直接封装了 Pixi；架构方面，Phaser 内嵌了3个物理引擎（Arcade Physics、Ninja、p2.js），提供粒子系统、动画、预下载和设备适配方案；兼容性方面，Phaser 的焦点是放在移动端浏览器上的；API 方面，Phaser 能实现丰富的游戏功能，适合复杂度高的游戏开发。CreateJs 周边产品CreateJS 官方提供了 TweenJS 支持动画开发，同时通过 SoundJS 和 PreLoadJS 提供了音频和预下载的支持，对于 H5 游戏基础功能的支持是足够的。在兼容性方面，CreateJS 支持 PC 端和移动端几乎所有的浏览器。此外，CreateJS 还支持用 flash CC 开发导出由 CreateJS 渲染的 H5 游戏。Hilo 是阿里团队推出的一个开源项目，支持模块化开发，同时提供了多种模块范式的包装版本和跨终端解决方案，适合用来开发营销小游戏。其体积也是比较轻量的，只有70kb左右。Hilo 支持 DOM 渲染，Canvas 渲染和 WebGL 渲染，同时集成了 Hilo Audio， Hilo Preload。其后推出的 Hilo 3D 也是其亮点之一。Cocos2d-x 是业界比较老牌的游戏引擎了，同时支持 C++ ，Lua 和 JavaScript 三种开发语言，官方用例来看更倾向于 C++ 开发，适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator 游戏开发工具，组件化，脚本化，数据驱动，跨平台发布。lufylegend.js 的最新更新是在16年，不过其社区还是十分活跃的，如果遇到什么开发问题，可以很方便地在社区上找到解决的方案。lufylegend.js 可以支持基础的游戏功能，但是其可拓展性不是很强。主要支持3D游戏的游戏引擎name2D渲染（Canvas）2D渲染(WebGL)3D渲染（WebGL）VRgithub star 数文档详细程度周边产品备注Three.jsNONOYES（倾向）NO37.6k（最新更新2017.12）? 英文文档? 例子充足? 英文社区无默认Ammo.js为默认物理引擎，基于JavaScript语言的3D库，耗性能，加载慢，效果一般PlayCanvasNONOYESYES3k（最新更新2017.12）? 英文文档? 例子充足? 英文社区提供了在线编辑器，发布托管等教程较为详细，入门快Three.js 示例案例相信对于很多有关注 3D 游戏的开发者来说，Three.js 早已经耳熟能详了。实际上，Three.js 官方定位并不是游戏引擎，而是一个 JS 3D 库。Three.js 更倾向于展示型的视觉呈现，比较少直接拿 Three.js 来开发 H5 游戏。渲染环境上，Three.js 支持 WebGL 和 CSS3D 两种渲染模式。从渲染支持程度来看，PlayCanvas 不仅支持 3D WebGL渲染，同时保持到 VR 的支持，拥有比较好的拓展性。在工具流的支持上，提供了在线编辑器和发布托管等服务。从官方教程上看，教程也是比较详细的。现在市场上的 H5游戏引擎很多，很难去直接定义哪个引擎的好坏，只能说每个引擎都有自己的特性，在某方面跟项目的契合程度比较高，笔者根据现在市场上比较热门的几大引擎做了几点比较，希望能给刚入门的你做技术选型的时候有一点帮助，找到适合项目的引擎，更快、更准、更高效率地完成项目需求。感谢各位耐心读完，希望能有所收获，有考虑不足的地方欢迎留言指出。如果对「H5游戏开发」感兴趣，欢迎关注我们的。感谢您的阅读，本文由
版权所有。如若转载，请注明出处：凹凸实验室（）
没有更多推荐了，}