html5的坦克大战的游戏设计与实现
摘 要互联网作为现在人们生活中不可分割一种工具，人们对其的依赖性的不断增加，导致对互联网要能给人们不断地带来更好的感官体验，在关于电脑的各个方面所有的互联网公司都必须追求更好的用户体验。而在网络前端技术这一块，原有的HTML技术已经无法满足用户以及开发者的要求，他们追求更酷，更炫的效果，于是W3C(World Wide Web Consortium)与WHATTWG(Web Hypertext Application Technology Working Group)在2006年的时候决定一起建立一个新的HTML的规范。HTML 5.1也与2013年5月6号正式公布草案。改版后对原来的HTML进行大范围的改进，其中增添相关的API以及新的标签，性能得到了巨大的提升，而我自己的毕业设计主要就是在新增加的Canvas标签上进行编程的。本文先是对所用到的技术以及HTML5中的新标签Canvas进行粗略的介绍，并对开发工具以及为什么选择这款开发工具进行简短的分析，并详细说明了此次坦克大战设计中各模块的主要函数的方法实现，总结在本次调试过程中所遇到的问题和经验等。本论文研究从开始设计到最终实现，主要完成以下内容：一个基于HTML5的坦克大战小游戏。
而最近著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台，设计者可以访问近10万字体的目录。此举一推出，可以帮助网页设计师解决如何获得高质量的字体的问题，使得他们设计效果更佳酷炫。[4]另外一条比较前沿的消息是最近微软在其官方博客中详细讲解了Window 10系统的Edge浏览器Web Audio（网络音频）支持细节。Web Audio提供了在HTML5音频元素中无法实现的紧凑时间同步，包括音频过滤和特效。Web Audio支持使用没提捕捉和getUserMedia的实时音频流，并且支持升级后的HTML5音频元素无缝循环。而Web Audio被制定使用W3C网络音频规范，并且继续在W3C音频工作组指导下发展。北京时间2月26日早间消息，谷歌今天开始讲Adobe Flash广告自动转换成HTML5格式，换句话说，谷歌正在逐渐将所有的Flash广告都转化为HTML5格式，最终[5]，绝大数广告从一开始可能就会直接使用HTML5。由此可见，越来越多的规范被制定出来，越来越多的规范被使用，HTML5作为一种
*好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
新型的语言规范前途无量。
而在我们国内，对HTML5技术的开发也从未停止过，比较出名的就是淘宝的CNodejs团队，他们在基于HTML5的服务器端游大量的测试、实验以及成果的分享。
近日，腾讯推出了HTML5的开源图像处理引擎，这是腾讯的Web前端团队Alloy Team推出了新的开源项目：一个基于HTML5技术的专业级图像处理引擎，该团队以至于HTML5梦工厂这样的的技术公益组织一同推动HTML5技术在业界广泛深入的应用。推出过很多开源的项目，包括此次的AlloyImage[6]。
由此可见，无论是在国内还是国外，HTML5都处于高速的发展和完善阶段，我猜想：HTML5将来必然会成为统一Android 和IOS的语言规范。
1.3 课题的主要内容和功能介绍
1.3.1 课题的主要内容
课题的主要内容包括：
使用HTML5的Canvas标签进行场景以及坦克，子弹，障碍物，基地的绘制。
利用JavaScript编写代码来控制Canvas标签中坦克的移动，碰撞，子弹。 的发射，判断胜利等函数功能。
基于HTML5 Audio来实现控制声音
HTML5 的本地数据库Web Sql Database来储存击中地方坦克次数。
1.3.2 坦克大战游戏功能介绍
玩家打开游戏，进入游戏后，会出生在基地的旁边，有三种墙，一种砖墙，可以打穿；一种水泥墙，不能打穿；一种是水泊，可以直接穿过。玩家子弹击中敌方坦克的时候，敌方坦克速度会加快一格，到达topHitNumber的时候，玩家胜利，跳出程序；只要玩家坦克被击中或者基地被击中，任务失败。
1.4 开发工具及运行环境
1.4.1 Web开发工具及Hbuilder简述
由于制作的Web程序只需要在Web浏览器上实现效果，所以调试和编译都是通过浏览器来进行完成的，这样使我们所选取的开发工具只需要具有编辑器的功能就行了。Web开发工具渐渐的分为两大类，一类是基于编辑器的，如Editplus、vim等，另一个则是由Eclipse构建的[5]。
而我所使用的这款IDE则是基于Eclipse的，是由DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率，但它也存在JS解析不完整的问题，性能偏弱，但它是免费的，这也是我为什么选择这款开发工具的理由之一。
图1.3.3 HBuilder集成开发编译环境
1.4.2浏览器发展及Chrome浏览器介绍
浏览器随着互联网技术的不断发展，自身也在不断发展的过程中，如今我们用浏览器已经不再只是单单的看看网页而已了，人们日常生活中，需要更多的交互，这就使得各大浏览器厂商要无时无刻的关注市场的需求以及众多前沿科技，使其兼容自家的浏览器。目前市面上的浏览器虽然品牌众多，但是其都是根据极大开源内核来构建的，主要分为两大类：IE系列和非IE系列[8]。
基于IE系列的浏览器有：遨游，360，搜狗等等，但由于微软IE对市场的垄断性，很多标准都不按Web标准来，所以使得很多用户的需求不能够被满足。于是非IE的浏览器得到了很大的展示空间，而在在这些非IE的技术中，以Webkit的内核做得最好，像Chrome，safari就是通过这个构建的。而且Webkit里有一个开发者工具，开发者可以通过这个方便的进行开发和调试。
之前我用于测试的浏览器其实是Firefox，但在写坦克移动的时候，按W,A,S,D怎么也移动不了坦克，最后查帮助文档才发现，Firefox接受按键的方法和Chrome中接受按键的方法不一样，而我的代码在Chrome可以实现，最后选择了Chrome浏览器作为我的前端显示。
第2章 相关技术综述
2.1 HTML5的标准简述及意义
HTML5是新型的HTML规范格式，目前还处于完善阶段。这个新型技术的目标是取代当时在90年代所制订的HTML4.01和XHTML1.0标准，以期在互联网高速发展，能够满足人们日益需求碰撞的内心。HTML5强的地方就在于它加入了CSS3的强大的选择器功能以及JavaScript很多新的函数。它希望减少浏览器对于插件的需求，完善互联网对于用户的体验，在插件这一方面，像Adobe公司的Flash，等以后HTML发展成熟了完全可以用
而最近著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台，设计者可以访问近10万字体的目录。此举一推出，可以帮助网页设计师解决如何获得高质量的字体的问题，使得他们设计效果更佳酷炫。[4]另外一条比较前沿的消息是最近微软在其官方博客中详细讲解了Window 10系统的Edge浏览器Web Audio（网络音频）支持细节。Web Audio提供了在HTML5音频元素中无法实现的紧凑时间同步，包括音频过滤和特效。Web Audio支持使用没提捕捉和getUserMedia的实时音频流，并且支持升级后的HTML5音频元素无缝循环。而Web Audio被制定使用W3C网络音频规范，并且继续在W3C音频工作组指导下发展。北京时间2月26日早间消息，谷歌今天开始讲Adobe Flash广告自动转换成HTML5格式，换句话说，谷歌正在逐渐将所有的Flash广告都转化为HTML5格式，最终[5]，绝大数广告从一开始可能就会直接使用HTML5。由此可见，越来越多的规范被制定出来，越来越多的规范被使用，HTML5作为一种
*好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
新型的语言规范前途无量。
而在我们国内，对HTML5技术的开发也从未停止过，比较出名的就是淘宝的CNodejs团队，他们在基于HTML5的服务器端游大量的测试、实验以及成果的分享。
近日，腾讯推出了HTML5的开源图像处理引擎，这是腾讯的Web前端团队Alloy Team推出了新的开源项目：一个基于HTML5技术的专业级图像处理引擎，该团队以至于HTML5梦工厂这样的的技术公益组织一同推动HTML5技术在业界广泛深入的应用。推出过很多开源的项目，包括此次的AlloyImage[6]。
由此可见，无论是在国内还是国外，HTML5都处于高速的发展和完善阶段，我猜想：HTML5将来必然会成为统一Android 和IOS的语言规范。
1.3 课题的主要内容和功能介绍
1.3.1 课题的主要内容
课题的主要内容包括：
使用HTML5的Canvas标签进行场景以及坦克，子弹，障碍物，基地的绘制。
利用JavaScript编写代码来控制Canvas标签中坦克的移动，碰撞，子弹。 的发射，判断胜利等函数功能。
基于HTML5 Audio来实现控制声音
HTML5 的本地数据库Web Sql Database来储存击中地方坦克次数。
1.3.2 坦克大战游戏功能介绍
玩家打开游戏，进入游戏后，会出生在基地的旁边，有三种墙，一种砖墙，可以打穿；一种水泥墙，不能打穿；一种是水泊，可以直接穿过。玩家子弹击中敌方坦克的时候，敌方坦克速度会加快一格，到达topHitNumber的时候，玩家胜利，跳出程序；只要玩家坦克被击中或者基地被击中，任务失败。
1.4 开发工具及运行环境
1.4.1 Web开发工具及Hbuilder简述
由于制作的Web程序只需要在Web浏览器上实现效果，所以调试和编译都是通过浏览器来进行完成的，这样使我们所选取的开发工具只需要具有编辑器的功能就行了。Web开发工具渐渐的分为两大类，一类是基于编辑器的，如Editplus、vim等，另一个则是由Eclipse构建的[5]。
而我所使用的这款IDE则是基于Eclipse的，是由DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率，但它也存在JS解析不完整的问题，性能偏弱，但它是免费的，这也是我为什么选择这款开发工具的理由之一。
图1.3.3 HBuilder集成开发编译环境
1.4.2浏览器发展及Chrome浏览器介绍
浏览器随着互联网技术的不断发展，自身也在不断发展的过程中，如今我们用浏览器已经不再只是单单的看看网页而已了，人们日常生活中，需要更多的交互，这就使得各大浏览器厂商要无时无刻的关注市场的需求以及众多前沿科技，使其兼容自家的浏览器。目前市面上的浏览器虽然品牌众多，但是其都是根据极大开源内核来构建的，主要分为两大类：IE系列和非IE系列[8]。
基于IE系列的浏览器有：遨游，360，搜狗等等，但由于微软IE对市场的垄断性，很多标准都不按Web标准来，所以使得很多用户的需求不能够被满足。于是非IE的浏览器得到了很大的展示空间，而在在这些非IE的技术中，以Webkit的内核做得最好，像Chrome，safari就是通过这个构建的。而且Webkit里有一个开发者工具，开发者可以通过这个方便的进行开发和调试。
之前我用于测试的浏览器其实是Firefox，但在写坦克移动的时候，按W,A,S,D怎么也移动不了坦克，最后查帮助文档才发现，Firefox接受按键的方法和Chrome中接受按键的方法不一样，而我的代码在Chrome可以实现，最后选择了Chrome浏览器作为我的前端显示。
第2章 相关技术综述
2.1 HTML5的标准简述及意义
HTML5是新型的HTML规范格式，目前还处于完善阶段。这个新型技术的目标是取代当时在90年代所制订的HTML4.01和XHTML1.0标准，以期在互联网高速发展，能够满足人们日益需求碰撞的内心。HTML5强的地方就在于它加入了CSS3的强大的选择器功能以及JavaScript很多新的函数。它希望减少浏览器对于插件的需求，完善互联网对于用户的体验，在插件这一方面，像Adobe公司的Flash，等以后HTML发展成熟了完全可以用