HTML5游戏开发实战_PDF图书下载_Makzan_在线阅读_PDF免费电子书下载_第一图书网
HTML5游戏开发实战
出版时间：2012-7&&出版社：机械工业出版社&&作者：Makzan&&页数：260&&Tag标签：无&&
　　HMTL5有望成为网络游戏开发的热门新平台。HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机、智能手机以及平板电脑上。今天，我们加入HTML5游戏开发的急先锋，明日将成为时代的弄潮儿。　　本书将展示如何使用最新的HTML5和CSS3 Web标准来构建纸牌游戏、绘图游戏、物理游戏，甚至是多人网络游戏。本书讲解清晰、系统全面，参照本书的讲解就能构建出6款示例游戏。　　HTML5、CSS3以及相关的JavaScript API是网络上最新的热点话题。这些标准给我们带来一个新的游戏市场&HTML5游戏。通过新的功能，我们能用HTML5元素、CSS3属性，以及JavaScript来设计运行于浏览器的游戏。　　本书根据关注话题的侧重点而分成9章。 我们将通过创建6款游戏来具体学习如何绘制游戏对象、绘制动画、加入音频、连接玩家，以及用Box2D物理引擎构建游戏。　　本书内容：　　第1章介绍HTML5、CSS3，以及相关的JavaScript API 新功能。该章还演示了利用这些功能和特性能创建什么样的游戏。　　第2章通过使用DOM和jQuery创建传统《乒乓球》游戏来开始我们的游戏开发之旅。　　第3章探讨CSS3新功能，讨论如何用DOM和CSS3来创建《纸牌记忆配对》游戏。　　第4章介绍在页面中通过新Canvas元素来绘制游戏并与之进行交互的新方式，还演示如何用Canvas来构建《解题》游戏。　　第5章通过在Canvas中绘制渐变效果和加入图像进行美化，完善前面介绍的《解题》游戏。该章还讨论基于帧的动画精灵和多层管理方法。　　第6章使用Audio元素给游戏添加声音效果和背景音乐。该章还讨论各浏览器对声音格式的兼容性，并在该章结尾完成一款由键盘驱动的音乐游戏。　　第7章使用新的本地存储API保存和恢复游戏进度，记录最佳成绩功能，进一步增强第3章所创建的CSS3《纸牌记忆配对》游戏。　　第8章讨论能让浏览器持久连接到socket服务器的新WebSocket API，用于实现多人联网玩游戏，并在该章完成《我画你猜》游戏。　　第9章传授如何把Box2D(著名物理引擎)集成到Canvas游戏中。该章讨论如何创建物体、应用力、连接物体，以及如何把图形与物体进行关联，并最终创建一款平台汽车游戏。　　阅读本书你需要做的准备　　你需要最新的现代Web浏览器，一个优秀的文本编辑器，HTML、CSS以及JavaScript的基本知识。　　本书读者对象　　本书适合于对HTML、CSS和JavaScript有基本理解，并希望设计网页类Canvas游戏、基于DOM游戏的设计者。
这是一本经典的HTML5游戏开发教程，它清晰而全面地展示了如何使用最新的HTML5和CSS3标准来构建各种常见类型的游戏。本书实战性非常强，围绕纸牌游戏、绘图游戏、物理游戏和多人游戏精心组织了6个富有趣味性和技术性的游戏案例。如果动手实践这些案例，不仅能掌握各种类型游戏的开发思路和设计方法，而且还能掌握HTML5和CSS3技术中与游戏开发相关的理论知识。本书共分9章，第1章介绍HTML5、CSS3，以及相关的JavaScriptAPI新功能；第2章通过使用DOM和jQuery创建传统游戏；第3章讨论如何用DOM和CSS3来创建游戏；第4章介绍在页面如何通过Canvas来绘制游戏并与之交互；第5章介绍如何在Canvas中绘制渐变效果和加入图像；第6章使用Audio元素给游戏添加声音效果和背景音乐；第7章使用新的本地存储API保存和恢复游戏进度，进一步增强游戏；第8章讨论如何实现多人联网玩游戏；第9章讲解如何把Box2D集成到Canvas游戏中。本书以实例为导向，系统介绍网络游戏开发技术，结合具体示例的操作步骤讲解，浅显易懂，适合网络游戏开发人员、管理人员阅读。
审校者简介译者序前言第1章　HTML5游戏概述1.1　探索HTML5新功能1.1.1　Canvas1.1.2　音频1.1.3　GeoLocation1.1.4　WebGL1.1.5　WebSocket1.1.6　本地存储1.1.7　离线应用程序1.2　探索CSS3新功能1.2.1　CSS3转换1.2.2　CSS3变换1.2.3　CSS3动画1.3　HTML5和CSS3新功能的更多细节1.4　创建HTML5游戏的好处1.4.1　不需要第三方插件1.4.2　不需要插件就能支持iOS设备1.4.3　突破常规浏览器游戏限制1.4.4　创建HTML5游戏1.5　HTML5还能做些什么1.5.1　《记忆配对》游戏1.5.2　Sinuous1.5.3　小行星式书签小程序1.5.4　Quake1.5.5　蝌蚪聊天室1.5.6　Scrabb.ly1.5.7　Aves引擎1.6　浏览更多HTML5游戏1.7　本书主要涉及哪些游戏1.8　总结第2章　DOM游戏开发入门2.1　准备开发工具2.2　为DOM游戏准备HTML文档2.2.1　新式HTML5 doctype声明2.2.2　页眉和页脚2.2.3　JavaScript代码最佳位置2.2.4　页面加载完后运行代码2.3　设置《乒乓球》游戏元素2.3.1　jQuery简述2.3.2　jQuery选择器基础知识2.3.3　jQuery css函数2.3.4　使用jQuery的好处2.3.5　使用jQuery操纵DOM游戏元素2.3.6　绝对位置的行为2.4　获取玩家的键盘输入2.4.1　了解按键代码2.4.2　让常数更具可读性2.4.3　用parseInt函数将字符串转换为数字2.4.4　在控制台面板中直接执行JavaScript表达式2.4.5　检查控制台窗口2.5　支持玩家多键盘同时输入2.5.1　更好地声明全局变量2.5.2　用setInterval函数创建JavaScript定时器2.5.3　理解游戏主循环2.6　通过JavaScript间隔移动DOM对象2.7　开始碰撞检测2.8　动态显示HTML文本2.9　总结第3章　用CSS3构建《纸牌记忆配对》游戏3.1　用CSS3转换和变换模块移动游戏对象3.1.1　2D变换函数3.1.2　3D变换函数3.1.3　用CSS3转换实现样式间过渡3.2　创建翻牌效果3.2.1　使用jQuery toggleClass函数切换类3.2.2　通过z-index控制重叠元素的可见性3.2.3　介绍CSS perspective属性3.2.4　介绍背面可见性3.3　创建《纸牌记忆配对》游戏3.3.1　下载纸牌精灵表图像3.3.2　设置游戏开发环境3.3.3　使用jQuery复制DOM元素3.3.4　使用jQuery的子节点过滤器选择首个子元素3.3.5　垂直对齐DOM元素3.3.6　通过背景位置来使用CSS精灵3.4　给配对游戏添加游戏逻辑3.4.1　在CSS转换完后执行代码3.4.2　翻牌后延迟代码的执行3.4.3　在JavaScript中随机化数组3.4.4　通过HTML5自定义数据属性保存内部自定义数据3.4.5　用JQuery访问自定义数据属性3.4.6　制作其他纸牌游戏3.5　在游戏中嵌入Web字体3.6　总结第4章　用Canvas和绘图API构建《解题》游戏4.1　介绍HTML5 Canvas元素4.2　在Canvas中绘制圆形4.2.1　当Web浏览器不支持Canvas时的反馈信息4.2.2　用Canvas的arc函数绘制圆和图形4.2.3　把角度转换为弧度4.2.4　在Canvas中执行路径绘制的操作4.2.5　在切换路径样式时先调用BeginPath4.2.6　关闭路径4.2.7　将画圆功能封装成函数4.2.8　在JavaScript中生成随机数4.2.9　保存圆的位置4.3　在Canvas中画线4.4　通过Canvas中的鼠标事件与绘制对象交互4.4.1　在Canvas元素中获取鼠标位置4.4.2　在Canvas中检测鼠标事件是否发生在圆上4.4.3　游戏主循环4.4.4　清除Canvas4.5　在Canvas中检测线的交点4.6　制作《解题》游戏4.6.1　定义关卡数据4.6.2　判断是否过关4.6.3　显示当前关卡和完成进度4.7　总结第5章　构建大师级Canvas游戏5.1　用渐变色来填充图形5.1.1　给渐变添加色标5.1.2　填充径向渐变色5.2　在Canvas中绘制文本5.3　在Canvas中绘制图像5.3.1　使用drawImage函数5.3.2　装点Canvas游戏5.4　在Canvas中播放精灵表动画5.5　创建多层Canvas游戏5.6　总结第６章　给游戏添加声音效果6.1　给PLAY按钮添加声音效果6.1.1　定义audio元素6.1.2　播放声音6.1.3　暂停声音6.1.4　调整音量大小6.1.5　使用jQuery 的hover事件6.1.6　创建Ogg格式的音频以支持Mozilla Firefox6.1.7　不同Web浏览器所支持的音频格式6.2　构建迷你钢琴音乐游戏6.2.1　在HTML5游戏中创建场景6.2.2　让音乐播放可视化6.2.3　为音乐游戏选择正确的歌曲6.2.4　存储和提取歌曲关卡数据6.2.5　获取游戏的流逝时间6.2.6　创建音乐点6.2.7　移动音乐点6.3　将PLAY按钮与音乐游戏场景链接起来6.4　构建键盘驱动的迷你钢琴音乐游戏6.4.1　通过按键来击打三条音乐线6.4.2　判断按键是否击中音乐点6.4.3　通过给定索引将元素从数组中移除6.5　给迷你钢琴游戏添加额外的功能6.5.1　 根据玩家的表现而调整音乐音量6.5.2　从游戏中删除音乐点6.5.3　保存最近5个音乐点的成功率计数6.5.4　记录音符来得到关卡数据6.6　音乐播放完后处理audio事件6.7　总结第7章　利用本地存储技术保存游戏数据7.1　使用HTML5本地存储技术保存数据7.1.1　创建游戏结束对话框7.1.2　在浏览器中保存成绩7.1.3　通过本地存储技术保存和加载数据7.1.4　本地存储只保存字符串值7.1.5　将本地存储对象看做关联数组7.2　在本地存储中保存对象7.2.1　在JavaScript中获取当前日期和时间7.2.2　使用原生JSON将对象编码成字符串7.2.3　从JSON字符串中加载所保存的对象7.2.4　在控制台窗口中检测本地存储7.3　用一种漂亮的彩带效果来告诉玩家破记录了7.4　保存整个游戏的进度7.4.1　保存游戏进度7.4.2　从本地存储中删除记录7.4.3　在JavaScript中复制数组7.4.4　恢复游戏进度7.5　总结第8章　利用WebSocket构建多人 游戏—《我画你猜》8.1　初试WebSocket Web应用程序8.2　安装WebSocket服务器8.2.1　安装Node.JS WebSocket服务器8.2.2　创建广播连接数的WebSocket服务器8.2.3　初始化WebSocket服务器8.2.4　在服务器端监听连接事件8.2.5　在服务器端获取已连接的客户端数8.2.6　向所有已连接的浏览器广播消息8.2.7　创建客户端来连接WebSocket服务器并获取总连接数8.2.8　建立WebSocket连接8.2.9　WebSocket客户端事件8.3　使用WebSocket构建聊天室8.3.1　向服务器发送消息8.3.2　从客户端发送消息到服务器8.3.3　在服务器端接收消息8.4　通过在服务端广播接收到的消息来创建聊天室8.5　使用Canvas和WebSocket制作共享绘图板8.5.1　构建本地绘图板8.5.2　广播绘图数据给所有已连接的浏览器8.5.3　定义用于在客户端与服务器之间进行通信的数据对象8.5.4　将画线数据打包成JSON以便于广播8.5.5　再现从其他客户端接收到的画线数据8.6　构建多人游戏：《我画你猜》8.6.1　控制多人游戏的游戏流程8.6.2　在服务器端罗列出所有已连接客户端8.6.3　在服务器端发送消息给指定的连接8.6.4　改进现有游戏8.7　用CSS装点《我画你猜》游戏8.8　总结第9章　用Box2D和Canvas构建物理类汽车游戏9.1　安装Box2d JavaScript库9.1.1　用b2World创建新的物理世界对象9.1.2　用b2AABB定义物理边界9.1.3　给物理世界设置重力9.1.4　设置 Box2D忽略休眠物体9.2　在物理世界中创建静态地面9.2.1　创建物体形状9.2.2　创建物理物体9.3　在Canvas上绘制物理世界9.4　在物理世界里创建动态的长方形9.5　推进物理世界的时间9.6　给游戏安装车轮9.7　创建物理汽车9.8　通过键盘给汽车施加动力9.8.1　向物体施加动力9.8.2　理解ApplyForce与ApplyImpulse之间的不同点9.8.3　给游戏环境添加坡道9.9　在Box2D世界检测碰撞9.10　重启游戏9.11　让游戏支持关卡9.12　为Box2D绘制图形轮廓9.12.1　使用形状和物体的userData属性9.12.2　根据物理物体的状态来绘制每一帧图像9.12.3　在Canvas中旋转和翻转图片9.13　给游戏添加装饰，让游戏更具趣味性9.13.1　用燃料的限制加速9.13.2　用CSS3进度条显示剩余燃料9.14　总结9.14.1　HTML5 游戏引擎9.14.2　游戏精灵以及贴图9.14.3　声音效果附录　突击测验答案
　　这是因为当调用第2条fill命令时，Canvas中的路径列表还包含两个圆。因此，fill命令用绿色填充这两个圆，也就是重新填充原来红色的圆。 　　为了解决这个问题，需要确保在每次绘制一个新形状前都调用beginPath。 　　beginPath清空路径列表，所以下次调用fill和stroke命令时，它将只应用上次调用beginPath之后的所有路径。 　　牛刀小试 　　刚才我们讨论了一段代码，其中原打算绘制两个圆并分别用红色和绿色填充，而却绘制了两个绿色的圆。怎样添加beginPath命令才能让代码按原来的打算来绘制圆呢？ 　　4.2.6 关闭路径 　　closePath函数将会从最新路径的终点到路径的起点之间绘制一条直线，用于闭合路径。如果我们只打算填充路径而不打算对其进行描边，closePath函数将不会影响结果。对比同一个半圆的两种结果，其中一个调用closePath而另一个没有调用closePath函数。　　……
　　《HTML5游戏开发实战》清晰而全面地展示了如何使用最新的HTML5 和CSS3 标准来构建纸牌、绘图、物理等各种常见类型的游戏。
图书标签Tags
评论、评分、阅读与下载
用户评论&(总计7条)
&&&&很适合入门看，能了解很多
&&&&不错的
大致上翻了翻
&&&&HTML5游戏开发实战
&&&&内容还行，不过实例不多
&&&&还可以吧，不能算特别经典
&&&&HTML5实战的书
&&&&金典金典金典
250万本中文图书简介、评论、评分，PDF格式免费下载。
第一图书网() @ 2014您所在的位置： &
HTML5 Canvas游戏开发实战 目录（1）
HTML5 Canvas游戏开发实战 目录（1）
机械工业出版社
《HTML5 Canvas游戏开发实战》本书主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。本节为目录部分。
第一部分　准备工作篇
第1章　准备工作 / 2
1.1　HTML5介绍 / 2
1.1.1　什么是HTML5 / 2
1.1.2　HTML5的新特性 / 2
1.2　Canvas简介 / 5
1.2.1　Canvas标签的历史 / 5
1.2.2　Canvas的定义和用法 / 6
1.2.3　如何使用Canvas来绘图 / 6
1.2.4　Canvas的限制 / 7
1.3　开发与运行环境的准备 / 7
1.3.1　浏览器的支持 / 7
1.3.2　准备一个本地的服务器 / 8
1.4　开发工具的选择 / 8
1.5　测试与上传代码 / 12
1.6　JavaScript中的面向对象 / 13
1.6.1　类 / 13
1.6.2　静态类 / 16
1.6.3　继承 / 16
1.7　小结 / 17
第二部分　基础知识篇
第2章　Canvas基本功能 / 20
2.1　绘制基本图形 / 20
2.1.1　画线 / 20
2.1.2　画矩形 / 22
2.1.3　画圆 / 24
2.1.4　画圆角矩形 / 26
2.1.5　擦除Canvas画板 / 27
2.2　绘制复杂图形 / 28
2.2.1　画曲线 / 28
2.2.2　利用clip在指定区域绘图 / 30
2.2.3　绘制自定义图形 / 31
2.3　绘制文本 / 32
2.3.1　绘制文字 / 32
2.3.2　文字设置 / 33
2.3.3　文字的对齐方式 / 38
2.4　图片操作 / 41
2.4.1　利用drawImage绘制图片 / 41
2.4.2　利用getImageData和putImageData绘制图片 / 45
2.4.3　利用createImageData新建像素 / 47
2.5　小结 / 49
第3章　Canvas高级功能 / 50
3.1　变形 / 50
3.1.1　放大与缩小 / 50
3.1.2　平移 / 53
3.1.3　旋转 / 54
3.1.4　利用transform矩阵实现多样化的变形 / 56
3.2　图形的渲染 / 65
3.2.1　绘制颜色渐变效果的图形 / 65
3.2.2　颜色合成之globalCompositeOperation属性 / 67
3.2.3　颜色反转 / 69
3.2.4　灰度控制 / 70
3.2.5　阴影效果 / 71
3.3　自定义画板 / 72
3.3.1　画板的建立 / 72
3.3.2　Canvas画布的导出功能 / 79
3.4　小结 / 81
第4章　lufylegend开源库件 / 82
4.1　lufylegend库件简介 / 82
4.1.1　工作原理 / 82
4.1.2　库件使用流程 / 83
4.2　图片的加载与显示 / 84
4.2.1　图片显示举例 / 84
4.2.2　LBitmapData对象 / 86
4.2.3　LBitmap对象 / 87
4.3　层的概念 / 88
4.4　使用LGraphics对象绘图 / 90
4.4.1　绘制矩形 / 90
4.4.2　绘制圆 / 91
4.4.3　绘制任意多边形 / 92
4.4.4　使用Canvas的原始绘图函数进行绘图 / 93
4.4.5　使用LSprite对象进行绘图 / 94
4.4.6　使用LGraphics对象绘制图片 / 95
4.5　文本 / 101
4.5.1　文本属性 / 101
4.5.2　输入框 / 102
4.6　事件 / 103
4.6.1　鼠标事件 / 103
4.6.2　循环事件 / 104
4.6.3　键盘事件 / 105
4.7　按钮 / 106
4.8　动画 / 108
4.9　小结 / 113【责任编辑： TEL：（010）】&&&&&&
关于&&&&的更多文章
使用 iOS 6游戏开发入门经典(第2版) ，学习为iPhone 5和新iPad构
本书描述了黑客用默默无闻的行动为数字世界照亮了一条道路的故事。
本书手把手地教读者用C语言制作两种编程语言：crowbar
享誉全球的未来学家理查德.沃森，用科学和多元的视角
本书是图文并茂的Python学习参考书，书中并不包含深奥
Linux是一款开源的操作系统，得到了广大开发者的青睐。掌握Linux系统的指令及其用法是学习Linux系统的基础。本书详细地介绍了常
51CTO旗下网站HTML5游戏开发实战——是男人就下一百层_游戏开发吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：11,794贴子：
HTML5游戏开发实战——是男人就下一百层收藏
HTML5它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现！
HTML5在改变移动领域的格局，这毋容置疑。本次公开课由传智播客李科霈老师在结合实际项目经验与大家分享HTML5在移动应用开发领域的实践。通过6到8小时的在线课程辅导，让你完成不可想象的任务-从零开始带你玩转HTML5!全程辅导完成属于自己的个性化游戏制作----是男人就下一百层！学习本次公开课你将收获和体会到：
伴随着智能手机的普及，各式各样的诸如"割绳子、捕鱼、切水果、愤怒的小鸟"等游戏逐渐 占据了我们日常休息时间和手机内存，在赏玩这些游戏的同时，不少玩家抱怨这些游戏何时才能"搬 家"到自己的个人电脑上，另外一些高端的玩家有很好的游戏设计创意，但是由于不是专业出身，即便能想到好的创意，也不能将其应用到游戏中。新的使命，新的革命，HTML5横空出世，完美解决上述所有问题，成为目前大中型企业相继追捧的前端技术。但是目前市面上相关的技术文章较少，学习资料匮乏，很难让初学者快速入门。喜欢游戏的开发的可以看看：
福利不只是穿多穿少，还要有迷人的微笑!
喜欢html5的可以去看看。这个估计还有两次课吧
刚开始了解html5打算去看看，谢谢分享
11月2日这个就是终结版了，最后一次课了、这个游戏感觉还不错、男人最后会不会下到地狱呢。
这个资料会发布不，楼主，我等着呢
这个是他们资料的地址，我收到了，你自己看吧
谁会图片的缩小放大啊。
楼主，求是男人就下一百层的教学视频，想学习HTML5
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或如果是想学HTML5游戏开发，技能树怎么点？
按时间排序
找一家做HTML5游戏的公司，问免费打工加学习要不要，要的话就OK了，不但有经验还学到了东西并且是免费的。
兄弟，其实没那么麻烦，我现在和一个同事业余时间在做h5游戏，我们用的是cocos2dx-js，很简单，你只需要js和了解cocos2dx框架就行！
加一个技能树路线
-＞ emscripten webgl
Js -& canvas/webGL -& fireball-x, 以下是详细解释:假定题主已经有一定的游戏开发基础, 如果没有的话, 我建议题主做一些游戏开发的基础学习. 那么要最快时间点出 HTML5 游戏开发的技能树, 按照上述路线即可.Javascript: 这个不用说了, 这是 H5 开发的入门语言, 题主完全不用在意目前 H5 领域的其他语言变种, 比如 CoffeeScript, TypeScript. 这些变种只会给你的学习带来混乱, 我们只需要专注掌握 Javascript 即可. canvas/webGL: 要做 H5 游戏自然少不了在上面画东西, 那么根据自己的情况选择一种绘制方案. 如果是初学者, 我推荐 Canvas , H5 的 canvas 2d context 已经包含了比较完备的 2d graphics 绘制 API, 这可以让我们画东西更加快捷. 而如果题主励志要做高效的游戏, 3D 绘制 或者更高阶的绘制技巧, 那么掌握 webGL 是必不可少的. 如果你没有 openGL 方面的知识, 也不用害怕, 因为 webGL 正好是一次让你补习的机会, 他的 API 设计和 openGL ES 非常类似, 其内在的知识点也都是相同的, 而且上手更方便简单, 在这样的环境下, 比起过去学习 openGL 的开发者来说要迅速很多, 也容易获得成就感, 所以我是非常推荐在 canvas 学习的基础上在进一步学习 webGL 的.fireball-x:
是一个类似 Unity3D 的游戏引擎, 他的初衷便是让前端开发人员可以在已有的基础上, 方便地开发 H5 游戏. 目前引擎处于非常早期的内测阶段, 但是已经是一个功能相对完备的开发工具了. 对于以学习为目的的 H5 游戏开发人员, 我非常推荐这个引擎工具. 他不仅提供给你从脚本编写到场景编辑的无缝环境, 而且引入了现在主流游戏开发中的 Entity-Component 的设计体系, 和同类引擎相比, fireball-x 提供了非常好的脚本编写和调试环境, 并且省去了初学者上手设置页面和测试页面等诸多恼人且费时的事情, 所以是入门学习 H5 游戏的好帮手!也欢迎各位加入我们的 fireball-x 开发QQ交流群:
(搜索不到群可以暂时去官网上面的加群按钮加入, 正在修复中...), 和我们一起设计定制 Fireball :D三个阶段后, 我们可以再来看看其他一些技能树:css: 对于游戏开发不是必要的, 如果你不做页面排版, 单纯只是做 h5 游戏开发, 那么掌握 css 对你的帮助更多的是思路上的开阔. css 作为一门较为成熟的排版 DSL, 他归纳了许多优秀的思想, 这些设计思想可以帮助你应用在其他领域, 包括你自己设计的游戏 UI 系统.Dom Event: 你需要掌握一些简单的 Dom Event, 用他们来做 Input 响应. 那么更深入的 Dom Event 学习是否有必要呢? 答案是肯定的, 了解 bubble phase, capture phase 和一些常用消息不会消耗你多少时间, 但是他却能够在你整个 h5 开发过程中解释非常多的疑问, 所以花点时间去学习, 也就一天就搞定的事情.Web Audio: 简单的说, 目前的主流浏览器对这个东西的支持都是渣, 往远处看 Web Audio 确实很好的归纳了声效编程的一些基础知识点. 所以有多余时间就好好的学习一下.题主到了这里, 技能树的基础点大概就点的差不多了, 自己根据需要继续就是了. html5 游戏开发很有趣, 主要是快捷, 写点代码开个 devtools debug 非常的轻松愉快, 题主选了个好方向.
已有帐号？
无法登录？
社交帐号登录人气：100377
访问用户量：98
笔记经验：55
总积分：155
级别：普通会员
搜索本笔记
ta的交流分类
ta的全部笔记
浏览(4352)|(1)
&&交流分类：|笔记分类:
11.1：游戏分析、顶住物体、抛出物体基本动画效果
游戏分析：
o功能： 用蘑菇顶住香焦不给落地，香蕉碰撞完顶部的奖品为赢
o对象： a、蘑菇& b、香蕉&& c、奖品(茄子)
o界面：使用canvas (画布)来描绘游戏
顶住物体、抛出物体基本动画效果
o说明：顶住物体指蘑菇，抛出物体指香蕉 ，先使蘑菇跟随鼠标动起来，然后，让香蕉在画布上实现抛出的效果。
o实现步骤如下：
&&&&&& 1、定义全局变量
&&&&&& 2、定义蘑菇实例
&&&&&& 3、用canvas把蘑菇绘制出来
&&&&&& 4、使蘑菇随鼠标动起来
&&&&&& 5、定义香蕉实例
&&&&&& 6、用canvas把香蕉绘制出来
&&&&&& 7、使香蕉在画布中显现抛出来的效果
o代码编写与效果演示
11.2：抛出物体碰到边界、顶住物体的处理
抛出物体移动碰到边界时的反弹处理
o写一个碰撞处理函数 HasActHitEdge()
o在游戏循环GameLoop()尾部中加入检测边界函数
抛出物体移动碰到顶住物体向上反弹的效果
o写一个通用的判断2个物体是否碰撞的函数 chkHitEach
o2个物体碰撞发生的事件以及处理 HasActHitMov()
o在游戏循环GameLoop()尾部中加入2个物体碰撞函数 HasActHitMov()
o先来分析如何检测两个物体是否碰撞上了，请看示意图：
o1。碰撞前，各位置点说明图。
2。碰撞后，各位置点说明图。
11.3：绘制奖品、抛出物体碰到奖品的处理方法。
使用一个数组装载所有奖品
o& 1、定义全局变量
o& 2、初始化全局变量
o& 3、定义奖品数据及实例
o& 4、把奖品装进数组
o& 5、从数组中取出奖品并描绘
o& 6、在游戏循环GameLoop()中加入描绘奖品的函数
撞到奖品之后的处理
o1、增加奖品的hit属性
o增加奖品的hit属性 ，默认值为false。当奖品撞到的时候，hit的属性值为true。描绘奖品的时候检测该hit值。
o2、增加抛出物体撞到奖品的事件
o3、在描绘奖品函数中检测是否被碰撞，没被撞过，则描绘出来
11.4：增加开关按钮、添加生命数条、添加得分的处理方法。
添加开始按钮
o1、在页面中增加一个位于画布中间的开始按钮
o2、定义控制游戏开始的全局变量
o3、编写一个开始或暂停的函数
o4、为开始按钮增加相应事件
添加生命数条
o1、定义生命所需的全局变量
o2、初始化生命图片
o3、在画布中绘制生命条数图形
o4、当抛出物体碰到底线时，减少1条生命
o5、当生命条数等于0或者奖品消灭完，显示游戏结束的提示，并终止游戏
o1、定义分数所需的全局变量
o2、初始化分数图片
o3、为奖品对象新增加一个分数属性
o4、在初始化奖品数组时，加入分数
o5、当抛出物体撞到奖品时，根据被撞奖品的分数增加总分值
o6、最后绘制该总分数
o代码编写与效果演示
&转载请注明【
相关笔记推荐
浏览(4352)|(1)
&&交流分类：|笔记分类:
学习了，不错
版权所有 Copyright(C) 私塾在线学习网