你的位置：
&& 详细内容
《HTML5游戏开发》扫描版[PDF]
本资料所属分类：
更新时间：日
如不能下载，请查看
27.4MB中文名:&HTML5游戏开发作者:& (美) Jeanine Meyer译者:& 徐阳 等图书分类:&软件资源格式:&PDF版本:&扫描版出版社:&人民邮电出版社书号:&6地区:& 大陆语言:& 简体中文简介:&
内容简介：今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是每一位Web设计和开发人员的当务之急。　　《HTML5游戏开发》通过人们熟悉的一个个游戏让读者轻松掌握HTML5、CSS和JavaScript的新特性，并将这些特性灵活应用到Web开发中。书中主要介绍了使用 canvas元素直接在屏幕上绘图、添加图像和编写文本，只使用HTML5、CSS和JavaScript在网站上加入视频和音频，使用事件处理响应鼠标 事件和按键，使用定时事件生成动画，验证表单输入，在玩家的计算机上存储迷宫布局之类的信息并按需重新加载。跟随作者的指引，你也能开发出妙趣横生的小游 戏。电子书www.minxue.net内容截图：
第1 章 基础知识1.1 引言1.2 关键需求1.3 HTML5、CSS 和JavaScript 特性1.3.1 基本HTML 结构和标记1.3.2 JavaScript 编程1.4 构建自己的应用1.5 测试和上传应用1.6 小结第2 章 骰子游戏2.1 引言2.2 关键需求2.3 HTML5、CSS 和JavaScript 特性2.3.1 伪随机处理和数学表达式2.3.2 变量和赋值语句2.3.3 程序员自定义函数2.3.4 条件语句：if 和switch2.3.5 在画布上绘图2.4 构建自己的应用2.4.1 掷一个骰子2.4.2 掷两个骰子2.4.3 完整的craps 游戏2.5 测试和上传应用2.6 小结第3 章 弹跳球3.1 引言3.2 关键需求3.3 HTML5、CSS 和JavaScript 特性3.4 构建自己的应用3.5 测试和上传3.6 小结第4 章 炮弹和弹弓4.1 引言4.2 关键需求4.3 HTML5、CSS 和JavaScript 特性4.3.1 数组和程序员自定义对象4.3.2 绘图旋转和平移4.3.3 绘制线段4.3.4 拉弹弓的鼠标事件4.3.5 使用数组接合改变显示元素列表4.3.6 点之间的距离4.4 构建自己的应用4.4.1 有大炮、角度和速度的炮弹应用4.4.2 弹弓：使用鼠标设置飞行参数4.5 测试和上传应用4.6 小结第5 章 记忆力(注意力)游戏5.1 引言5.2 关键需求5.3 HTML5、CSS 和JavaScript 特性5.3.1 表示扑克牌5.3.2 使用Date 确定时间5.3.3 提供暂停5.3.4 绘制文本5.3.5 绘制多边形5.3.6 洗牌5.3.7 单击牌的实现5.3.8 防止某些作弊行为5.4 构建自己的应用5.5 测试和上传应用5.6 小结第6 章 猜谜游戏6.1 引言6.2 关键需求6.3 HTML5、CSS 和JavaScript 特性6.3.1 存储和获取数组信息6.3.2 程序执行时创建HTML6.3.3 使用JavaScript 代码修改CSS来改变元素6.3.4 使用form 和input 元素的文本反馈6.3.5 表现视频6.4 构建自己的应用6.5 测试和上传应用6.6 小结第7 章 迷宫7.1 引言7.2 关键需求7.3 HTML5、CSS 和JavaScript 特性7.3.1 墙和token 的表示7.3.2 建立和定位墙的鼠标事件7.3.3 检测箭头按键7.3.4 token 与墙的碰撞检测7.3.5 使用本地存储7.3.6 为本地存储编码数据7.3.7 单选按钮7.4 构建自己的应用7.5 测试和上传应用7.6 小结第8 章 石头剪刀布8.1 引言8.2 关键需求8.3 HTML5、CSS 和JavaScript 特性8.3.1 为玩家提供图片按钮8.3.2 生成计算机动作8.3.3 启动8.4 构建自己的应用8.5 测试和上传应用8.6 小结第9 章 上吊小人游戏9.1 引言9.2 关键需求9.3 HTML5、CSS 和JavaScript 特性9.3.1 将单词表存储为一个在外部脚本文件中定义的数组9.3.2 生成和定位HTML 标记，使标记作为按钮并禁用这些按钮9.3.3 在画布上逐步绘制9.3.4 维护游戏状态并确定输赢9.3.5 检查猜测，设置textContent显示秘密词中的字母9.4 构建自己的应用9.5 测试和上传应用9.6 小结第10 章 黑桃J10.1 引言10.2 关键需求10.3 HTML5、CSS 和JavaScript 特性10.4 构建自己的应用10.5 测试和上传应用10.6 小结
自带站内搜索End-->
相关学习资料随着HTML5标准最终敲定，HTML5将有望成为游戏开发领域的的热门平台。HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机、智能手机以及平板电脑上，是目前跨平台应用开发的最佳实施方案。本文系根据[HML5 Canvas游戏开发实战]一书中的内容整理而成，是了解和学习HTML5游戏开发的基础内容，希望能够帮助到那些和博主一样致力于游戏开发的朋友们！
JavaScript中的面向对象编程对于游戏开发来说，面向对象编程(OOP)是一种重要而且必要的方法，所以在了解HTML5游戏开发前，首先应该了解JavaScript中的面向对象编程。JavaScript是一种基于对象的语言，可它并不是一种真正的面向对象的编程语言，因为在JavaScript的语法中不存在类(Class)的概念。下面我们将分析和解决在JavaScript中实现封装、继承等面向对象的问题。在JavaScript中函数(function)就是就是一个类(class)//声明一个函数function MyClass(){}//实例化一个对象var cls1 = new MyClass();使用this关键字就可以为类增加属性//声明一个类并定义其构造函数function MyClass(name,age){
this.name =
=};//实例化一个对象var cls1 = new MyClass("张三",20)//输出cls1的两个属性值alert("name=" + cls1.name + "&" + cls1.age)使用prototype属性可以为类添加方法//声明一个类并定义其构造函数function MyClass(name,age){
this.name =
=};//为MyClass增加方法MyClass.prototype={
toString:function()
alert("name=" + this.name + "&" + this.age)
getName:function()
alert("name=" + this.name)
getAge:function()
alert("age=" + this.age)
}};使用apply方法实现属性和方法的继承//定义一个父类Peoplefunction People(){
this.type="人"};//为父类定义一个方法People.prototype={
getType:function()
alert("type=" + this.type)
}};//定义一个子类Studentfunction Student(name,age,sex){
//继承父类的属性type
People.apply(this,arguments);
this.name =
this.age =
this.sex =};//声明一个Student实例var stu = new Student("张三",20,"男")；//输出typealert(stu.type)//下面我们来了解下如何继承父类的方法，继承父类方法主要通过循环使用父对象的prototype进行复制来实现，如//重新定义子类Studentfunction Student(name,age,sex){
//继承父类的属性type
People.apply(this,arguments);
//继承父类的方法，略显抽象
for(prop in People.prototype)
var proto = this.constructor.
if(!proto[prop])
proto[prop] = People.prototype[prop];
proto[prop]["super"] = People.
//属性定义
this.name =
this.age =
this.sex =};//实例化Student对象var stu = new Student("张三",20,"男");stu.getType();静态类的实现function staticClass(){
staticClass.name = "张三";
staticClass.toString=function
alert("name=" + staticClass.name )
};};alert(staticClass.name);staticClass.toString();Canvas绘图基础HTML5提供了图像、视频、音频、表单、位置、本地、离线存储、websocket等各种全新的特性，对于HTML游戏开发而言，我们主要关注图像、音频、本地数据库以及websocket等，首先我们来了解下Canavs绘图的基础内容。Canvas是HTML5为我们提供的一张画布，可以让我们在HTML上直接绘制图形，因此Canvas可以作为HTML5游戏开发的基本元素，即HTML5游戏引擎的底层都是以Canvas元素来驱动的。Canvas本身没有绘图的能力，需要借助于Script来实现绘图的功能。使用Canvas元素只需要在网页中添加canvas标记即可，如接下来我们通过来获取这个Canvas并通过相关API实现绘图环境的初始化//获取Canvas元素var canvas = document.getElementById('myCanvas');//检查canvas合法性if(canvas && canvas.getContext){
//获取当前上下文
var ctx = canvas.getContext('2d')
}因为目前Canvas只支持2D绘图，因此，这里的参数暂时只能为2d。因为Cnavas绘图的API都封装在ctx这个实例中，因此下面的所有操作都是基于ctx来实现的：使用Canvas绘制线//设置线宽ctx.lineWidth = 10;//设置画笔颜色ctx.strokeStyle = "red";//创建一个路径ctx.beginPath();//路径起点ctx.moveTo(10,10);//路径终点ctx.lineTo(150,50);//绘制路径ctx.stroke();//设置线宽ctx.lineWidth=5;//设置画笔颜色ctx.strokeStyle-"red"//创建路径ctx.beginPath();//绘制矩形ctx.strokeRect(10,10,70,40);或者//定义矩形ctx.rect(10,10,70,40);//绘制矩形ctx.stroke();如果需要对矩形进行填充//创建路径ctx.beginPath()//绘制矩形ctx.fillRect(10,10,70,40)使用Canvas绘制圆//创建路径ctx.beginPath();//定义圆ctx.arc(100,100,50,0,360*Math.PI/180,true);//绘制圆ctx.stroke();同样地，可以使用fill进行填充绘制//创建路径ctx.beginPath();//定义圆ctx.arc(100,100,50,0,360*Math.PI/180,true);//绘制圆ctx.fill();使用Canvas绘制圆角矩形绘制圆角矩形需要arcTo函数配合lineTo来完成//创建路径ctx.beginPath();ctx.moveTo(40,20);ctx.lineTo(100,20);ctx.arcTo(100,20,120,40,20);ctx.lineTo(120,70);ctx.arcTo(120,90,100,90,20);ctx.lineTo(40,90);ctx.arcTo(20,90,100,70,20);ctx.lineTo(20,40);ctx.arcTo(20,20,40,20,20);//绘制圆角矩形ctx.stroke();使用Canvas绘制复杂图形在HTML5中可以通过quadraticCurveTo函数绘制二次贝塞尔曲线，通过bezierCurveTo函数绘制三次贝塞尔曲线,具体代码请参考API文档。使用Canvas绘制文字//设置字体ctx.font="30px Arial";//绘制文字ctx.strokeText("Hello HTML5",100,50);使用Canvas绘制图片绘制图片使用drawImage函数，其函数原型如下：drawImage(image,dx,dy);其中image可以是HTML中的标签或者是JavaScript中的Image对象。如//定义一个img标签接下来通过getElementById来取得图像数据，并将其绘制出来var img=document.getElementById("img_source");ctx.draw(img,200,200);如果直接使用JavaScript代码var img=new Image();img.src="/uploadfile/407.jpg";ctx.draw(img,200,200)图形的平移操作使用translate函数实现在水平和垂直方向上的平移图形的旋转操作使用rotate函数实现旋转，需要注意的是传入的参数是弧度图形的伸缩操作使用scale函数实现伸缩，当参数为负值时表示在该方向上翻转图形高级特效这里主要介绍线性渐变、径向渐变、颜色反转、灰度。线性渐变//创建一个线性渐变容器var grd=ctx.createLinearGradient(0,0,200,0);//添加颜色grd.addColorStop(0.2,"#00ff00");grd.addColorStop(0.8,"#ff0000");//应用渐变ctx.fillStyle=径向渐变//创建一个径向渐变容器var grd=ctx.createRadialGradient(100,100,10,100,100,50);//添加颜色grd.addColorStop(0,"#00ff00");grd.addColorStop(,"#ff0000");//应用渐变ctx.fillStyle=颜色反转遍历每个像素并对RGB值进行取反灰度灰度计算公式：gary=red*0.3+green*0.59+blue*0.11基础的内容就是这些了，以后如果碰到需要HTML5的地方可以回过头来看看。
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&学习HTML5游戏开发，有什么好的资源可以参考吗？
学习HTML5游戏开发，有什么好的资源可以参考吗？
最近一直在学习如何利用HTML5进行游戏开发，所以找了很多的资料，但是无奈的是，有价值的资源并不是很多。无意之间发现了一个技术周刊上的内容很不错，所以今天特地和大家分享一下。我在里面看到了一些HTML5，CSS和JavaScript的教程，以及对JS未来发展趋势的分析，还有一些技术大牛们的经验分享之类的，觉得还不错~，大家可以去自己看看吧~嘿嘿~
已有帐号？
无法登录？
社交帐号登录商品编号：
京 东 价：
[定价：￥]
支　　持：
搭配赠品：
选择套装：
服务支持：
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
HTML5 Canvas游戏开发实战
加载中，请稍候...
商品介绍加载中...
扫一扫，精彩好书免费看
京东商城向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票。
凭质保证书及京东商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由京东联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。京东商城还为您提供具有竞争力的商品价格和，请您放心购买！
注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
权利声明：京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。
注：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。
印刷版次不同，印刷时间和版次以实物为准。
价格说明：
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
划线价：商品展示的划横线价格为参考价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。
折扣：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。
异常问题：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
浏览了该商品的用户还浏览了
加载中，请稍候...
七日畅销榜
新书热卖榜
iframe(src='///ns.html?id=GTM-T947SH', height='0', width='0', style='display: visibility:')想学点html5小游戏开发求指导 - 开源中国社区
当前访客身份：游客 [
当前位置：
下了几个小游戏，然后根据源码走了一遍，相当于把js基础知识又过了一遍，还没有形成系统的游戏开发思路，就好比一个游戏，该如何实现思路都不晓得，我觉得还是从游戏开发基础学习比较好点，大家有没有好的书推荐一下或是好的论坛社区之类的，谢谢嘛
共有0个答案
更多开发者职位上
有什么技术问题吗？
小昭归来的其它问题
类似的话题