html5网页游戏-坦克大战

北京传智播客教育HTML5网页游戏-坦克大战讲师：韩顺平主讲韩顺平介绍朋友们玩过HTML5版本的坦克大战吗?HTML5横空出世，开始了RIA新的革命，直接导致Flex“易主”，Silverlight被“雪藏”，目前绝大多数智能手机浏览器均支持HTML5，基于HTML5的网站也如雨后春笋般出现。带大家完成HTML5版的坦克大战,融入了大量的OOP编程思想。学习完后，你完全有能力编写出属于自己的个性化的游戏(比如贪吃蛇、俄罗斯方块、采蘑菇等)。您需要有:html4javascriptb/s开发的基础|简单演示坦克大战主讲韩顺平学习HTML5的理由①工作需要②HTML5将成为未来WEB技术标准主讲韩顺平HTML5发展简史HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。WHATWG致力于Web表单和应用程序，而W3C（WorldWideWebConsortium，万维网联盟）专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。HTML5[1]草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。主讲韩顺平HTML5优秀的学习网站

主讲韩顺平HTML5是什么和快速体验案例HTML5约等于HTML+CSS3+JAVASCRIPTAPI支持HTML5的浏览器有:目前Firefox、Chrom、Opera、Safari（版本4以上）、InternetExplorer9。你必须使用这些浏览器，才能浏览HTML5页面主讲韩顺平HTML5是什么和快速体验案例支HTML5相对于前几版新增功能:1.增加<canvas>标签2.增加<header>和<footer>标签3.增加音频和视频嵌入功能<video>和<audio>4.增加离线存储功能.主讲韩顺平HTML5是什么和快速体验案例支HTML5相对于前几版新增功能:5.高级应用体验案例语言识别:图像识别:html5游戏:主讲韩顺平HTML5是什么和快速体验案例支HTML5相对于前几版新增功能:5.支持更加强大的css3(参考页面)主讲韩顺平HTML5是什么和快速体验案例支HTML5相对于前几版新增功能:5.支持更加强大的css3主讲韩顺平HTML5是什么和快速体验案例支HTML5相对于前几版新增功能:6.增加拖放，跨文档消息，浏览器历史管理等7.增强各大浏览器的兼容性.主讲韩顺平HTML5不在支持的标签HTML5在引入新标签的同时，废弃了不少常见元素，大抵分为如下几类。第一类：表现性元素basefont/big/center/font/s/strike/tt/u建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果第二类：框架类元素因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。frame/frameset/noframes，但html5支持iframe。主讲韩顺平HTML5不在支持的标签第三类:属性类很多表现性的属性也被新规范移除，如下：align/body标签上的link、vlink、alink、text属性/bgcolor/height和widthiframe元素上的scrolling属性/valign/hspace和vspacetable标签上的cellpadding、cellspacing和border属性header标签上的profile属性img和iframe元素的longdesc属性第四类：其他abbr取代acronym（用于表示缩写）object取代了appletul取代了dir主讲韩顺平HTML5坦克大战游戏■

游戏演示普通版改进版改进版豪华版主讲韩顺平HTML5坦克大战游戏■

为什么选择这个项目 ①好玩 ②涉及到html和js多方面的技术

1.javascript面向对象编程2.界面编程3.绘图技术

4.多个独立定时器协同工作

(java:多线程) 5.网页游戏的编程思想 ③充分体验html+jsapis的强大功能主讲韩顺平HTML5坦克大战游戏■

如何讲解这个项目 我们授课是基于案例教学，项目驱动的方式来教授的，因此只要你有一定的HTML+Javascript基础是完全可以听懂的，最核心的部分我都会带大家一起完成。(我做一个功能，大家跟着做一个功能,增强互动性)记住一点:成为一个编程专家的秘诀就是：

思考------编程-----思考------编程坦克大战是从小到大的过程，

从1.0到1.1….最后版，让大家轻松的 能自己写出坦克大战，同时掌握编写HTML5游戏的核心技术。主讲韩顺平HTML5-canvas画布坐标体系■

坐标体系-介绍 下图说明了canvas画布坐标系。坐标原点位于左上角，以像素为单位。像素是计算机屏幕上最小的显示单位。在canvas画布坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素；第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。主讲韩顺平HTML5-canvas画布坐标体系■

问一个问题? 绘图还必须要搞清一个非常重要的概念-像素一个像素等于多少厘米? 主讲韩顺平HTML5-canvas画布坐标体系■坐标体系-像素 计算机在屏幕上显示的内容都是由屏幕上的每 一个像素组成的。例如，计算机显示器的分辨率 是800×600，表示计算机屏幕上的每一行由800

个点组成，共有600行，整个计算机屏幕共有

480000个像素。现在的计算机可以支持更高的分辨率，也就是说，屏幕上可以显示更多的像素因此,像素是一个密度单位,而厘米是长度单位,两者无法比较主讲韩顺平HTML5绘图-快速入门■快速入门我们熟悉一下绘图的各个函数,这些函数对开发游戏尤为重要! 主讲韩顺平HTML5绘图-CanvasRenderingContext2D对象■

CanvasRenderingContext2D对象 该对象是指向2d渲染环境的引用，你可以理解通过这个对象提供的方法,可以在画布上画各种图形。 ①绘制当前路径边框stroke()填充当前路径fill();说明路径的概念主讲韩顺平HTML5绘图-CanvasRenderingContext2D对象■

CanvasRenderingContext2D对象

②画填充矩形fillRect(x,y,weight,height)；

画出矩形边框

strokeRect(x,y,width,height)

主讲韩顺平HTML5绘图-CanvasRenderingContext2D对象■

CanvasRenderingContext2D对象 ③画圆形边框和填充圆形arc()

主讲韩顺平HTML5绘图-CanvasRenderingContext2D对象■

CanvasRenderingContext2D对象 ④画图片drawImage(Image,x,y,width,height);主讲韩顺平HTML5绘图-CanvasRenderingContext2D对象■

CanvasRenderingContext2D对象

⑤画字符串fillText(str,x,y)

设置字体，字体颜色，大小cxt.fillStyle=“”cxt.font=“大小字体”

主讲韩顺平HTML5坦克大战-实战绘图小练习 坦克大战游戏中，我们会用到坦克，现在我们就利用html5+jsapis绘图技术来画出一个小坦克,完成我们的坦克大战游戏1.0版本!(TankGame1.html) 主讲韩顺平HTML5坦克大战-实战绘图小作业 请大家运用html5绘图技术充分发挥你的想象，画出如下图形: 1.蛤蟆

2.王八

3.小老鼠

主讲韩顺平Javascript事件处理机制■

事件处理机制-一个问题

请大家看一个小程序。(Demo1.html)

怎样让小球受到键盘的控制,上下左右移动.事件源事件监听者事件处理方法事件对象(event)主讲韩顺平HTML5坦克大战-实战■

逐步完善坦克大战游戏(1)用OOP编程设计，实现让你的坦克可以通过按键控制w、d、s、a键上右下左移动[tankGame2.html]主讲韩顺平HTML5坦克大战-实战■

逐步完善坦克大战游戏(2)画出三个敌人的坦克,并解决刷新问题![tankGame3.html]主讲韩顺平HTML5坦克大战-实战■

逐步完善坦克大战游戏(3)自己的坦克可以发送子弹,只能发送一颗[tankGame4.html]主讲韩顺平HTML5坦克大战-实战■

逐步完善坦克大战游戏(4)自己的坦克可以发送子弹,可以连发100颗[tankGame5.html]主讲韩顺平HTML5坦克大战-实战■

逐步完善坦克大战游戏(5)自己的子弹击中敌人坦克时，坦克消失.[tankGame6.html]主讲韩顺平HT