HTML5游戏制作完全指南　　简介　　你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。　　阅读该教程需要至少熟悉javascript相关知识。　　你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。　　创建画布　　在画任何东西之前，我们必须创建一个画布。因为这是完全指南，并且我们将用到jQuery.　　var CANVAS_WIDTH = 480;　　var CANVAS_HEIGHT = 320;　　var canvasElement = $("&canvas width='" + CANVAS_WIDTH + 　　"' height='" + CANVAS_HEIGHT + "'&&/canvas&");　　var canvas = canvasElement.get(0).getContext("2d");　　canvasElement.appendTo('body');　　游戏循环　　为了呈现给玩家连贯流畅的游戏动画，我们要频繁地渲染画布来欺骗玩家的眼睛。　　var FPS = 30;　　setInterval(function() {　　update();　　draw();　　}, 1000/FPS);　　现在我们先不管update和draw里面的实现，重要的是我们要知道setInterval()会周期性的执行update和draw　　Hello world　　现在我们已经搭建好了一个循环的架子，我们去修改update和draw方法来写一些文字到屏幕。　　function draw() {　　canvas.fillStyle = "#000"; // Set color to black　　canvas.fillText("Sup Bro!", 50, 50);　　}　　专家提醒: 当你稍微更改了一些代码的时候就执行一下程序，这样可以更快的找到程序出错地方。　　静止文字正常的显示出来了。因为我们已经有了循环，所以我们可以很容易地让文字动起来~~~　　var textX = 50;　　var textY = 50;　　function update() {　　textX += 1;　　textY += 1;　　}　　function draw() {　　canvas.fillStyle = "#000";　　canvas.fillText("Sup Bro!", textX, textY);　　}　　执行程序。如果你一步一步照着上面做下来，可以看到文字移动。但是上一次的文字却还留在屏幕上，因为我们没有擦除画布。现在我们在draw方法中加入擦除方法。　　function draw() {　　canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);　　canvas.fillStyle = "#000";　　canvas.fillText("Sup Bro!", textX, textY);　　}　　现在你可以看到文字在屏幕上移动了，它已经算是一个真正意义上的游戏，只不过是个半成品。　　创建player　　创建一个包含player所有信息的对象,并且要有draw方法。这里创建了一个简单的对象包含了所有的player信息。　　var player = {　　color: "#00A",　　x: 220,　　y: 270,　　width: 32,　　height: 32,　　draw: function() {　　canvas.fillStyle = this.　　canvas.fillRect(this.x, this.y, this.width, this.height);　　}　　};　　我们现在用一个纯色的矩形来代表player.当我们把它加入游戏当中的时候，我们需要清除画布并且画上player.　　function draw() {　　canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);　　player.draw();　　}　　键盘控制　　使用jQuery Hotkeys　　jQuery Hotkeys plugin在处理键盘行为的时候，可以更加容易的兼容不同的浏览器。让开发者不用因为不同浏览器之间的keyCode andcharCode不同而苦恼，我们这样绑定事件：　　$(document).bind("keydown", "left", function() { ... });　　移动player　　function update() {　　if (keydown.left) {　　player.x -= 2;　　}　　if (keydown.right) {　　player.x += 2;　　}　　}　　是不是感觉移动不够快？那么我们来提高它的移动速度。　　function update() {　　if (keydown.left) {　　player.x -= 5;　　}　　if (keydown.right) {　　player.x += 5;　　}　　player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);　　}　　我们可以很容易的添加其他元素，比如炮弹：　　function update() {　　if (keydown.space) {　　player.shoot();　　}　　if (keydown.left) {　　player.x -= 5;　　}　　if (keydown.right) {　　player.x += 5;　　}　　player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);　　}　　player.shoot = function() {　　console.log("Pew pew");　　// :) Well at least adding the key binding was easy...　　};　　添加更多游戏元素　　炮弹　　我们开始真正意义上的添加炮弹，首先，我们需要一个集合来存储它：　　var playerBullets = [];　　然后，我们需要一个构造器来创建炮弹：　　function Bullet(I) {　　I.active =　　I.xVelocity = 0;　　I.yVelocity = -I.　　I.width = 3;　　I.height = 3;　　I.color = "#000";　　I.inBounds = function() {　　return I.x &= 0 && I.x &= CANVAS_WIDTH &&　　I.y &= 0 && I.y &= CANVAS_HEIGHT;　　};　　I.draw = function() {　　canvas.fillStyle = this.　　canvas.fillRect(this.x, this.y, this.width, this.height);　　};　　I.update = function() {　　I.x += I.xV　　I.y += I.yV　　I.active = I.active && I.inBounds();　　};　　return I;　　}　　当玩家开火，我们需要向集合中添加炮弹：　　player.shoot = function() {　　var bulletPosition = this.midpoint();　　playerBullets.push(Bullet({　　speed: 5,　　x: bulletPosition.x,　　y: bulletPosition.y　　}));　　};　　player.midpoint = function() {　　return {　　x: this.x + this.width/2,　　y: this.y + this.height/2　　};　　};　　修改update和draw方法，实现开火：　　function update() {　　...　　playerBullets.forEach(function(bullet) {　　bullet.update();　　});　　playerBullets = playerBullets.filter(function(bullet) {　　return bullet.　　});　　}　　function draw() {　　...　　playerBullets.forEach(function(bullet) {　　bullet.draw();　　});　　}　　敌人　　enemies = [];　　function Enemy(I) {　　I = I || {};　　I.active =　　I.age = Math.floor(Math.random() * 128);　　I.color = "#A2B";　　I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;　　I.y = 0;　　I.xVelocity = 0　　I.yVelocity = 2;　　I.width = 32;　　I.height = 32;　　I.inBounds = function() {　　return I.x &= 0 && I.x &= CANVAS_WIDTH &&　　I.y &= 0 && I.y &= CANVAS_HEIGHT;　　};　　I.draw = function() {　　canvas.fillStyle = this.　　canvas.fillRect(this.x, this.y, this.width, this.height);　　};　　I.update = function() {　　I.x += I.xV　　I.y += I.yV　　I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);　　I.age++;　　I.active = I.active && I.inBounds();　　};　　return I;　　};　　function update() {　　...　　enemies.forEach(function(enemy) {　　enemy.update();　　});　　enemies = enemies.filter(function(enemy) {　　return enemy.　　});　　if(Math.random() & 0.1) {　　enemies.push(Enemy());　　}　　};　　function draw() {　　...　　enemies.forEach(function(enemy) {　　enemy.draw();　　});　　}　　使用图片　　player.sprite = Sprite("player");　　player.draw = function() {　　this.sprite.draw(canvas, this.x, this.y);　　};　　function Enemy(I) {　　...　　I.sprite = Sprite("enemy");　　I.draw = function() {　　this.sprite.draw(canvas, this.x, this.y);　　};　　...　　}　　碰撞检测　　function collides(a, b) {　　return a.x & b.x + b.width &&　　a.x + a.width & b.x &&　　a.y & b.y + b.height &&　　a.y + a.height & b.y;　　}　　function handleCollisions() {　　playerBullets.forEach(function(bullet) {　　enemies.forEach(function(enemy) {　　if (collides(bullet, enemy)) {　　enemy.explode();　　bullet.active =　　}　　});　　});　　enemies.forEach(function(enemy) {　　if (collides(enemy, player)) {　　enemy.explode();　　player.explode();　　}　　});　　}　　function update() {　　...　　handleCollisions();　　}　　function Enemy(I) {　　...　　I.explode = function() {　　this.active =　　// Extra Credit: Add an explosion graphic　　};　　return I;　　};　　player.explode = function() {　　this.active =　　// Extra Credit: Add an explosion graphic and then end the game　　};　　加入声音　　function Enemy(I) {　　...　　I.explode = function() {　　this.active =　　// Extra Credit: Add an explosion graphic　　};　　return I;　　};　　player.explode = function() {　　this.active =　　// Extra Credit: Add an explosion graphic and then end the game　　};
楼主发言：1次 发图：0张
请遵守言论规则，不得违反国家法律法规2016年 最火的 15 款 HTML5 游戏引擎 - 开源中国社区
当前访客身份：游客 [
当前位置：
2016年 最火的 15 款 HTML5 游戏引擎
HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后，就开始一发不可收拾，今年《传奇世界》更是突破流水2000万！从两年多的发展来看，游戏开发变得越来越复杂，需要制作各种炫丽的效果，还要制作各种基于 2D 或者 3D 的场景。作为一名开发者，分析了当下最火爆，最热门的HTML5游戏引擎供大家参考，希望大家也能找到属于自己的那款游戏开发引擎。
我在github上面收集了四十多款的HTML5开源游戏引擎，从里面star、fork等等参数分析其流行度，最后综合各方面元素，筛选出靠前的十五款（包含三款非开源游戏引擎）
Updated Time
Contributors
Updated Time
Contributors
Construct 2是一个运行于Windows平台的游戏制作工具，它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台（Windows、Mac、Linux、Android、iOS等）的游戏。免费版可以将游戏导出成HTML5。收费版本分为个人版（79英镑）和企业版（259英镑），可以导出所有平台的版本，同时提供了更多的特效和音乐。如果使用该工具盈利超过5000美元，需要升级到企业版。
简单直观，入门容易，无需编程也能做游戏，长处是开发射击及动作类的平面游戏，有丰富的英文资料。
支持多平台（Android，iOS，Windows)
简单易用、无需编程知识可以使用，可实时运行游戏；
提供了大量特效，支持物理效果，有开发者商城，在上面可以购买到各种开发插件和游戏素材；
强大的事件系统，可以不通过写代码来控制游戏逻辑；
提供了可编程扩展的接口，可以自己开发插件；
完整的文档以及社区支持。
非开源，且中文教程极其匮乏；
由于网页，手机都是相对于电脑来说性能较低的硬件产品，所以需要开发者更好的运用系统资源，甚至在windows平台也是如此，因为其windows的输出格式也是利用Chrome浏览器的内核所做，也就是说本质上还是在浏览器上运行。
点评：使用最多的HTML5商业引擎，更新快且开发者商城支持非常棒，推荐！**
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。
Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架，提供JavaScript和TypeScript双重支持，内置游戏对象的物理属性，采用Pixi.js引擎以加快Canvas和WebGL渲染，基于浏览器支持可自由切换。快速、免费、易于维护，使用Phaser来开发2D小游戏的优势显而易见。一方面，开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。另一方面，也可以在支持Canvas的浏览器中直接安装Phaser来进行游戏开发。
主要特性：
JavaScript、TypeScript双重支持
内置游戏对象的物理属性
WebGL、Canvas渲染自由切换
完全支持Web音频
输入：多点触控、键盘、鼠标、MSPointer事件
除了IE 9+、Firefox、Chrome、Safari及Opera等桌面浏览器之外，Phaser还支持Mobile Chrome（Android 2.2+）及Mobile Safari（iOS 5+）等移动浏览器。使用Phaser进行游戏开发没有任何语言设定，并且，在Phaser官网上，还提供了非常详细的开发指南，想要一探究竟的开发者不妨直接登陆Phaser查看。
Pixi.js是一款超快的开源HTML5 2D渲染引擎，使用带有Canvas回调功能的WebGL。作为JavaScript的2D渲染器，Pixi的目标是，可以提供一个快速且轻量级的2D库，并能兼容所有设备。此外，让开发者无需了解WebGL，就可以感受到硬件加速的力量。
主要特性：
真正的跨平台：在今天，开发工具跨平台已经不是什么稀奇的事了。不过，Pixi.js则是一个可以兼容所有设备的超快HTML5 2D渲染引擎，并且拥有canvas回调功能的WebGL，实现真正的跨平台。
交互式多点触控：Pixi不仅支持移动和平板设备，还具有完整的多点触控输入识别，让开发者可以发挥自己的能力去挖掘出它所有的潜力。
WebGL过滤器：当使用WebGL时，Pixi允许你使用自己熟悉且现有的过滤器。当然，你也可以使用自己创建的独一无二的过滤器，比如自定位移和半色调效果。
着色和混合模式：对设计师来说，会很喜欢这个，Pixi.js允许用户着色和使用混合模式就像其他常见的视觉包比如Photoshop或Flash。
渲染器自动检测：这个算是Pixi的一大特色，虽然Pixi是主要作为WebGL 2D渲染器而创建的，但仍支持非WebGL平台。其解决方案就是创建一个Canvas回调系统，只需一次编码，Pixi就可无缝管理回调。
简易API：设计直观，易于上手。
资源加载：精灵表单、图形、字体和动画数据等都可通过Pixi.js来加载和处理。
支持精灵表单（Sprite sheet）。
Egret 游戏解决方案包含了开源免费的 HTML5 游戏引擎、Egret 项目开发工具集合、动画特效制作工具、原生多平台打包工具、高效的 HTML5 游戏应用加速器、以及支持多渠道的开放平台等。开发者可以通过Egret项目开发工具快速、高效的制作及开发游戏相关各类内容，加速器将游戏效果提高到与原生游戏相媲美的效果。制作后的游戏发布到开放平台后，有着优质的渠道资源可以将游戏推荐给更多的用户，使得游戏开发、发布、推广变为一体化内容。
主要特性：
基于TypeScript及JavaScript技术，支持Flash到Egret高效转换，引擎、工具、运行时完整工作流
跨平台：HTML5,iOS,Android,Windows Phone
全中文文档：文档与开发者社区齐全
开源免费，BSD开源协议、任意定制及扩展
Enchant.js 是个简单的 JavaScript 框架，可以使用 HTML5 和 JavaScript 来开发简单的游戏和应用。现在还是由 UEI 的 Akihabara 研究中心来开发和维护。在线演示
Crafty是一个体积小、简单、轻量级的2D的HTML5游戏引擎，它提供了通过Canvas或DOM来绘制实体，提供了精灵Map以及SAT高级碰撞监测支持。它是由个人（Louis Stowasser）创建，同时由Github上的一些开发者共同开发。
轻量级引擎，不会受到框架的太多束缚
同时支持PC和移动平台浏览器
Turbulenz是一个开源的HTML5游戏引擎，提供了可以运行在Windows、MacOS、Linux上的SDK，允许开发人员创建高质量和硬件加速的2D、3D游戏。包括以下功能：异步资源加载、进行特效和粒子渲染、支持物理效果、碰撞检测以及动画、3D音效支持、支持网络交互以及社交网络分享、场景和资源的管理。优点：1. 功能强大，同时支持2D和3D2. 基于MIT协议的开源引擎
cocos2d-js是一款基于Cocos2d-x API的2D开源免费HTML5游戏引擎。它目前通过canvas进行渲染，将来会支持WebGL。它由国内Cocos2d-x核心团队主导开发和维护，行业领袖、HTML5大力推动者Google为这个项目提供支持。同时，Zynga、Google等大公司的工程师也参与到它的设计工作中。
与Cocos2d的API类似，容易上手
中文文档齐全，资料丰富
基于MIT协议的开源引擎
PlayCanvas是一个基于 WebGL游戏引擎 的企业级开源JavaScript框架，它有许多的开发工具能帮你快速创建3D游戏。PlayCanvas.js由一个专业社区创建，最初并不是开源的，但现在你可以在github上fork PlayCanvas.js，然后在你的下一个3D游戏项目中免费使用。它还提供了能在浏览器中云心的云编辑器，开始使用PalyCanvas和导航到编辑器的URL一样容易。
melonJS是一个全新、轻量级，基于精灵的2D游戏引擎。兼容所有支持HTML5览器包括：Chrome、Safari、Firefox、Opera。支持多声道。提供基本物理和碰撞机制（以确保CPU的要求低），一组基础的实体对象（可扩展）。支持补间动画效果。一个状态管理器（可以轻松管理加载，菜单，选项和在游戏画面状态的开关）。提供一些基本的GUI元素。一个可定制的加载器。&
Quintus是一款易于上手、轻量级、开源的HTML5 JavaScript游戏引擎，包含一个模块化的引擎可轻松开发游戏，并在同一个页面上运行多个实例，支持桌面及移动平台浏览器。Quintus引用面向对象的思想来进行HTML5游戏开发，同时依赖于jQuery来提供事件处理机制和元素选取操作。
ImpactJS是一个基于JavaScript的HTML5游戏引擎，同时支持PC和移动平台浏览器。它是目前除了Construct2之外最受欢迎的HTML5游戏引擎，使用需要支付99美元。
ImpactJS 曾经风靡一时，使用ImpactJS 开发的该游戏被国外很多网站评选为二十款优秀游戏之一。
提供了灵活的关卡编辑器，可以快速构建游戏地图
提供了强大的调试工具
提供了Ejecta可以将JavaScript的执行结果通过OpenGL渲染出来，可以在iOS平台上获得与原生应用相近的效率
文档齐全，有两本专门介绍ImpactJS开发的书
支持物理效果
支持自己编写插件来扩展
缺点：1.非开源，且中文教程极其匮乏；2.更新慢，功能不够强大；
GameMaker与Construct 2类似，都是一个游戏制作工具，可以导出到各个平台运行，分为免费版、标准版（49.99美元）、专业版（99.99美元）和大师版（799.99美元）。其中免费版只能导出Mac和Windows版本，导出HTML5需要大师版或者专业版（再额外支付99.99美元）。
优点和缺点：优势与Construct2类似，但性价比不如Construct2高
Hilo，一套HTML5跨终端的互动游戏解决方案开源啦！。Hilo支持了多届淘宝&天猫狂欢城等双十一大型和日常营销活动。内核极简，提供包括DOM，Canvas，Flash，WebGL等多种渲染方案，满足全终端和性能要求。
主要特性：
极简内核： Hilo核心模块极精简，保留了2D游戏引擎最必要的模块，同时采用模块化管理。
完善接入&扩展： Hilo 支持多种模块范式的包装版本，包括AMD，CMD，Standalone多种方式接入。另外，你可以新增和扩展需要的模块和类型。
多种渲染方式：提供DOM，Canvas，Flash，WebGL等多种渲染方案，可以做到跨全端，高性能的要求。
完善的周边工具：提供动画编辑器 ，Yeoman脚手架及典型案例产出的辅助开发工具。
案例丰富： 支持天猫，手淘多次大型和日常活动，如双十一，年中大促等。代表产品如狂欢城。 本文参考数据来自：1.&2.&
想通过手机客户端（支持 Android、iPhone 和 Windows Phone）访问开源中国：
旧一篇： 3个月前
新一篇： 3个月前
你也许会喜欢
期待基于HTML5的VR引擎
引用来自“景愿”的评论期待基于HTML5的VR引擎VR需要个屁引擎，视频播放器而已。
3楼：无敌菌 来自
引用来自“景愿”的评论期待基于HTML5的VR引擎引用来自“喷子”的评论VR需要个屁引擎，视频播放器而已。头衔和黑头像是原生的，还是被赋予的？
引用来自“景愿”的评论期待基于HTML5的VR引擎引用来自“喷子”的评论VR需要个屁引擎，视频播放器而已。引用来自“无敌菌”的评论头衔和黑头像是原生的，还是被赋予的？ 你猜~
5楼：大头s 来自
6楼：赵文伟
7楼：半岛北边
竟然没有青瓷
与内容无关的评论将被删除，严重者禁用帐号
本周热点资讯
本站最新资讯教你HTML5开发爱心鱼游戏
随着互联网发展，HTML5游戏开发越来越火爆，从PC端到手机端无处不见，再不学习，您就 OUT了！让我们动起来，从基础到实践，手把手教你“爱心鱼”游戏开发。
教你HTML5开发爱心鱼游戏
8638人在学
JavaScript是前端开发必备技术，掌握JS基础及面向对象相关知识，对后续游戏实践打下基础。
Canvas开发基础
Canvas是游戏原生开发必学，掌握绘图基础，并精通Canvas各种接口使用，让您可以在浏览器上绘制各种炫丽的图形。
实践才是王道，该步骤带您使用 HTML5 Canvas API，实现爱心鱼游戏，帮您熟悉游戏开发流程，提升开发能力。
Copyright (C)
All Rights Reserved | 京ICP备 号-2当前位置： >
> HTML5 Canvas游戏开发实战 PDF扫描版[25MB]
HTML5 Canvas游戏开发实战 PDF扫描版[25MB]
HTML5 Canvas游戏开发实战
书籍大小：25.06MB
软件语言：简体中文
书籍类型：
书籍授权：免费软件
更新时间：
书籍类别：网页制作
购买链接：&&
应用平台：
网友评分：
内容介绍热点排行下载地址相关内容
包含两个chm电子书，一个是HTML5的中文参考手册、一个是CSS3的中文参考手册，经典，必须下载完整版W3CSchool线下教程,版本号测试版5.0与官方版本相同，如果打开文件无法显示内容，那是因为在打开文件弹出提示时没有去掉复选框，去掉后就可以了HTML+5+从入门到精通 中文学习教程,适合想学习html5网页的前端开发者W3C html5 API 中文手册 chm，专业的HTML5教程电子书，包括了HTML5和标准属性、参考手册和事件属性本书是为从未接触过HTML5新技术但同时又对移动web技术感兴趣的读者而编写的。如果你有一定的HTML开发经验，将会更容易掌握HTML5知识《jQuery权威指南》内容全面，系统地讲解了jQuery的方方面面，实战性强，全书包含118个示例和2个综合案例，资深专家亲自执笔，4大专业社区一致鼎力推荐HTML+CSS网页设计与布局从入门到精通 紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术是一本全面介绍html 5、css 3和javascript前端开发技术的图书，系统地介绍了html 5常用的元素和属性、html 5的表单元素和属性、html 5的绘图支持、html 5的多媒体支持、css一本系统而全面的HTML 5教程，根据HTML 5标准的最新草案，系统地对HTML 5的所有重要知识点进行了全面的讲解
HTML5 Canvas游戏开发实战 PDF扫描版[25MB]
CopyRight &
JB51.Net , All Rights Reserved