想尝试开发些HTML5小游戏，请大大们推荐款JS游戏引擎，轻量的，简单的有么？ - 知乎146被浏览13584分享邀请回答Phaser.io ，目测是Github上关注度最高的开源引擎，无法理解为什么没有人提到。我们公司目前大部分HTML5项目都是基于这个项目进行的，目前在计划成立中文社区，有兴趣可以私聊我。113 条评论分享收藏感谢收起cn.cocos2d-x.org/tutorial/index?type=cocos2d-js-----------------------------------------------------------------------------1、LimeJS
开源js游戏引擎2、quarkjs
盛大创新院推出的一个js引擎。有一款捕鱼达人的在线demo 3、楼上所说的Box2d的JS版是从AS演化而来也不错的4、easeljs
EaselJS 是一个封装了 HTML5 画布(Canvas) 元素的 JavaScript 库。由于没有正式使用过，上面的只是个人了解，下面是一个是JS引擎大全，可以多看看选择一款适合自己的。8添加评论分享收藏感谢收起更多标签：至少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的基础就温习到这，下一篇文章将进入本游戏的开发。敬请期待。
3 收藏&&|&&79
你可能感兴趣的文章
109 收藏，3.1k
156 收藏，1.1k
2 收藏，665
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
一直在看，写的不错
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：
扫扫下载 App&HTML5 Canvas游戏开发实战(实例源代码)
秒后自动跳转到登录页
快捷登录：
举报类型：
不规范：上传重复资源
不规范：标题与实际内容不符
不规范：资源无法下载或使用
其他不规范行为
违规：资源涉及侵权
违规：含有危害国家安全等内容
违规：含有反动/色情等内容
违规：广告内容
详细原因：
任何违反下载中心规定的资源，欢迎Down友监督举报，第一举报人可获5-10下载豆奖励。
视频课程推荐
HTML5 Canvas游戏开发实战(实例源代码)
上传时间：
技术分类：
资源评价：
（13位用户参与评价）
已被下载&728&次
HTML5 Canvas游戏开发实战(实例源代码)每章节实例代码
本资料共包含以下附件：
HTML5 Canvas游戏开发实战(实例源代码).rar
51CTO下载中心常见问题：
1.如何获得下载豆？
1)上传资料
2)评论资料
3)每天在首页签到领取
4)购买VIP会员服务，无需下载豆下载资源
5)更多途径：点击此处
2.如何删除自己的资料？
下载资料意味着您已同意遵守以下协议：
1.资料的所有权益归上传用户所有
2.未经权益所有人同意，不得将资料中的内容挪作商业或盈利用途
3.51CTO下载中心仅提供资料交流平台，并不对任何资料负责
4.本站资料中如有侵权或不适当内容，请邮件与我们联系（）
5.本站不保证资源的准确性、安全性和完整性, 同时也不承担用户因使用这些资料对自己和他人造成任何形式的伤害或损失
相关专题推荐
通过实际的例子讲解Sping MVC3.0 的工
html5+css3视频教程就是目前流行的DI
HTML5的canvas元素使用JavaScript，可
行业内对移动互联网有诸多期许。很多
PhoneGap是一个用基于HTML，CSS和Jav
HTML 5有两大特点：首先，强化了 Web
传智播客李科霈老师在结合实际项目经
HTML5作为下一代网页语言，对Web开发
PhoneGap是一个基于HTML5，CSS、Java
本专题为布尔教育13年11月份发布的HT
Bootstrap是Twitter推出的一个开源的
本课程的主讲人为palm公司的副总裁、
不需任何基础，带您无痛入门Spark，内
Spark官方文档翻译活动，是由Spark亚
由Spark亚太研究院发起，结合网络社区
创作、收集HTML5相关技术的经典文档，
意见或建议：
联系方式：
您已提交成功！感谢您的宝贵意见，我们会尽快处理&>&&>&&>&&>&HTML5 Canvas 游戏开发实战PDF+源码
HTML5 Canvas 游戏开发实战PDF+源码
上传大小：27.77MB
lufy_legend（张路斌）的书《HTML5 canvas游戏开发实战》的PDF文档+实战示例代码。js的开发版本是lufylegend-1.5.1.js。
综合评分：4.7（69位用户评分）
所需积分：2
下载次数：697
审核通过送C币
创建者：asiacren
创建者：guo8ke
创建者：guo8ke
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
CSDN&vip年卡&4000万程序员的必选
HTML5 Canvas 游戏开发实战PDF+源码
会员到期时间：剩余下载次数：
积分不足！
资源所需积分
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分
当前拥有积分
VIP年卡全年1200次免积分下载
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：借助HTML5 Canvas API制作一个简单的猜字游戏
我的图书馆
借助HTML5 Canvas API制作一个简单的猜字游戏
二话不说，先上效果图以及源代码~
XML/HTML Code复制内容到剪贴板
&!doctype&html&&&
&html&lang="en"&&&
&&&&&head&&&
&&&&&&&&&meta&charset="utf-8"&/&&&
&&&&&&&&&script&type="text/javascript"&src="chp1_guess_the_letter.js"&&/script&&&
&&&&&&&&&script&type="text/javascript"&src="modernizr.custom.99886.js"&&/script&&&
&&&&&/head&&&
&&&&&body&&&
&&&&&&&&&canvas&id="canvas_guess_the_letter"&width="500"&height="300"&&&
&&&&&&&&&&&&你的浏览器不支持HTML5&Canvas &&
&&&&&&&&&/canvas&&&
&&&&&&&&&form&&&
&&&&&&&&&&&&&input&type="button"&id="createImageData"&value="Export&Canvas&Image"&/&; &&
&&&&&&&&&/form&&&
&&&&&/body&&&
JavaScript Code复制内容到剪贴板
&*&@author&Rafael &
window.addEventListener("load",&eventWindowLoaded,&false); &&
var&Debugger&=&function()&{ &&
Debugger.log&=&function(message)&{ &&
&&&&try&{ &&
&&&&&&&&console.log(message); &&
&&&&}&catch(exception)&{ &&
&&&&&&&& &&
function&eventWindowLoaded()&{ &&
&&&&canvasApp(); &&
function&canvasSupport()&{ &&
&&&&return&Modernizr. &&
function&canvasApp()&{ &&
&&&&var&guesses&=&0; &&
&&&&var&message&=&"Guess&The&Letter&From&a(lower)&to&z(higher)"; &&
&&&&var&letters&=&["a","b","c","d","e","f","g","h","i","j","k","l", &&
&&&&&&&&&&&&&&&&&&&&"m","n","o","p","q","r","s","t","u","v","w","x","y","z"]; &&
&&&&var&today&=&new&Date(); &&
&&&&var&letterToGuess&=&""; &&
&&&&var&higherOrLower&=&""; &&
&&&&var&letterGuessed&=&[]; &&
&&&&var&gameOver&=& &&
&&&&if(!canvasSupport())&{ &&
&&&&&&&& &&
&&&&var&theCanvas&=&document.getElementById("canvas_guess_the_letter"); &&
&&&&var&context&=&theCanvas.getContext("2d"); &&
&&&&initGame(); &&
&&&&function&initGame()&{ &&
&&&&&&&&var&letterIndex&=&Math.floor(Math.random()&*&letters.length); &&
&&&&&&&&letterToGuess&=&letters[letterIndex]; &&
&&&&&&&&guesses&=&0; &&
&&&&&&&&lettersGuessed&=&[]; &&
&&&&&&&&gameOver&=& &&
&&&&&&&&window.addEventListener("keyup",&eventKeyPressed,&true); &&
&&&&&&&&var&formElement&=&document.getElementById("createImageData"); &&
&&&&&&&&formElement.addEventListener('click',&createImageDataPressed,&false); &&
&&&&&&&&drawScreen(); &&
&&&&function&eventKeyPressed(e)&{ &&
&&&&&&&&if(!gameOver)&{ &&
&&&&&&&&&&&&var&letterPressed&=&String.fromCharCode(e.keyCode); &&
&&&&&&&&&&&&letterPressed&=&letterPressed.toLowerCase(); &&
&&&&&&&&&&&&guesses++; &&
&&&&&&&&&&&&letterGuessed.push(letterPressed); &&
&&&&&&&&&&&&if(letterPressed&==&letterToGuess)&{ &&
&&&&&&&&&&&&&&&&gameOver&=& &&
&&&&&&&&&&&&}&else&{ &&
&&&&&&&&&&&&&&&&letterIndex&=&letters.indexOf(letterToGuess); &&
&&&&&&&&&&&&&&&&guessIndex&=&letters.indexOf(letterPressed); &&
&&&&&&&&&&&&&&&&if(guessIndex&&&0)&{ &&
&&&&&&&&&&&&&&&&&&&&higherOrLower&=&"请输入正确的字符"; &&
&&&&&&&&&&&&&&&&}&else&if(guessIndex&&&letterIndex)&{ &&
&&&&&&&&&&&&&&&&&&&&higherOrLower&=&"小了"; &&
&&&&&&&&&&&&&&&&}&else&{ &&
&&&&&&&&&&&&&&&&&&&&higherOrLower&=&"大了"; &&
&&&&&&&&&&&&&&&&} &&
&&&&&&&&&&&&} &&
&&&&&&&&&&&&drawScreen(); &&
&&&&&&&&} &&
&&&&function&drawScreen()&{ &&
&&&&&&&&//背景 &&
&&&&&&&&context.fillStyle&=&"#ffffaa"; &&
&&&&&&&&context.fillRect(0,&0,&500,&300); &&
&&&&&&&& &&
&&&&&&&&//箱子 &&
&&&&&&&&context.strokeStyle&=&"#000000"; &&
&&&&&&&&context.strokeRect(5,&5,&490,&290); &&
&&&&&&&&context.textBaseLine&=&"top"; &&
&&&&&&&& &&
&&&&&&&&//日期 &&
&&&&&&&&context.fillStyle&=&"#000000"; &&
&&&&&&&&context.font&=&"10px&_sans"; &&
&&&&&&&&context.fillText(today,&150,&20); &&
&&&&&&&& &&
&&&&&&&&//消息 &&
&&&&&&&&context.fillStyle&=&"#FF0000"; &&
&&&&&&&&context.font&=&"14px&_sans"; &&
&&&&&&&&context.fillText(message,&125,&40); &&
&&&&&&&& &&
&&&&&&&&//猜测次数 &&
&&&&&&&&context.fillStyle&=&"#109900"; &&
&&&&&&&&context.font&=&"16px&_sans"; &&
&&&&&&&&context.fillText("猜测次数：&"+guesses,&215,&60); &&
&&&&&&&& &&
&&&&&&&&//大还是小 &&
&&&&&&&&context.fillStyle&=&"#000000"; &&
&&&&&&&&context.font&=&"16px&_sans"; &&
&&&&&&&&context.fillText("大还是小：&"+higherOrLower,&150,&135); &&
&&&&&&&& &&
&&&&&&&&//已经猜测的字符 &&
&&&&&&&&context.fillStyle&=&"#FF0000"; &&
&&&&&&&&context.font&=&"16px&_sans"; &&
&&&&&&&&context.fillText("已经猜测的字符：&"+letterGuessed.toString(),&10,&260); &&
&&&&&&&& &&
&&&&&&&&if(gameOver)&{ &&
&&&&&&&&&&&&context.fillStyle&=&"#FF0000"; &&
&&&&&&&&&&&&context.font&=&"40px&_sans"; &&
&&&&&&&&&&&&context.fillText("你猜中了",&150,&180); &&
&&&&&&&&} &&
&&&&function&createImageDataPressed(e)&{ &&
&&&&&&&&window.open(theCanvas.toDataURL(),&"canvasImage","left=0,&top=0,&width="+theCanvas.width+",&height="+theCanvas.height+",&toolbar=0,&resizable=0"); &&
从游戏名称可以看出，该游戏是猜字游戏。每局系统都会自动生成一个字母，玩家会按键盘来猜测该字母是哪一个。
例如生成的是s，玩家按了h，则游戏就会提示《小了》，因为英文字母当中h的索引比s的索引更靠前。
案例当中涉及的变量。
guesses：猜测次数message：文字提示，指导用户如何玩该游戏letters：文字数组，存放我们要猜测的文字的集合。这个例子用的是a到ztoday：今天的日期letterToGuess：要猜测的文字higherOrLower：是《大了》还是《小了》letterGuessed：已经猜测过得文字gameOver：游戏是否结束，是布尔变量，开始的时候是false，猜对后设为true
变量的声明
JavaScript Code复制内容到剪贴板
var&guesses&=&0; &&
var&message&=&"Guess&The&Letter&From&a(lower)&to&z(higher)"; &&
var&letters&=&["a","b","c","d","e","f","g","h","i","j","k","l", &&
&&&&&&&&&&&&&&&&"m","n","o","p","q","r","s","t","u","v","w","x","y","z"]; &&
var&today&=&new&Date(); &&
var&letterToGuess&=&""; &&
var&higherOrLower&=&""; &&
var&letterGuessed&=&[]; &&
var&gameOver&=&&&
初始化游戏
JavaScript Code复制内容到剪贴板
function&initGame()&{ &&
&&&&&&&&var&letterIndex&=&Math.floor(Math.random()&*&letters.length); &&
&&&&&&&&letterToGuess&=&letters[letterIndex]; &&
&&&&&&&&guesses&=&0; &&
&&&&&&&&lettersGuessed&=&[]; &&
&&&&&&&&gameOver&=& &&
&&&&&&&&window.addEventListener("keyup",&eventKeyPressed,&true); &&
&&&&&&&&var&formElement&=&document.getElementById("createImageData"); &&
&&&&&&&&formElement.addEventListener('click',&createImageDataPressed,&false); &&
&&&&&&&&drawScreen(); &&
通过使用Math的random()函数和floor()函数，根据文字的数组生成要猜测的文字。
并且当用户按键盘的时候监听《keyup》事件，根据传递过来的event，生成按下的键值。
因猜测游戏对大小写不敏感，为防止用户按大写字母，我们需要把值转换成小写形式。
猜测次数+1
猜测出来的文字添加到已经猜测的文字数组当中
JavaScript Code复制内容到剪贴板
var&letterPressed&=&String.fromCharCode(e.keyCode); &&
letterPressed&=&letterPressed.toLowerCase(); &&
guesses++; &&
letterGuessed.push(letterPressed); &&
剩下的就只有判断 大和小了。
通过indexOf函数 我们可以判断要猜测的文字和我们输入的文字在字符集上面的索引值。
如果我们输入的更靠前则提示《小了》反之《大了》
最终用户猜对了要猜测的文字 我们会在中央用大号字体显示《你猜对了》
JavaScript Code复制内容到剪贴板
letterIndex&=&letters.indexOf(letterToGuess); &&
guessIndex&=&letters.indexOf(letterPressed); &&
if(guessIndex&&&0)&{ &&
&&&&higherOrLower&=&"请输入正确的字符"; &&
}&else&if(guessIndex&&&letterIndex)&{ &&
&&&&higherOrLower&=&"小了"; &&
}&else&{ &&
&&&&higherOrLower&=&"大了"; &&
至此这个功能差不多完成了吧，我们还有一个小功能，那就是通过按下按钮的方式可以把屏幕结果抓去出来。
用的函数为toDataUrl()，有兴趣的朋友研究一下。
TA的最新馆藏
喜欢该文的人也喜欢