学习了2个多月的js,除了模仿了一些视频的例子,自己没有独立完成过一个成品,因此自己就有了打算写个坦克大战的想法。从开始的找图片素材,到最后的成品完成花了5天时间,虽然其中的代码大都是最基本的,但作品完成后还是挺开心的。

不过该成品依旧有许许多多的缺陷:

1,基本没考虑各浏览器的兼容性问题,等以后浏览器兼容方面知识完善后进行修改。

2,有许多重复的代码可以进行函数封装和赋值局部变量,但我只封装了一个函数(有点懒- -)。

3,没有解决同时按2个键的冲突问题(在网上看到可以用setinterval来解决,可是还是不会 - -!)。

4,框架搭的实在是太差了,东一点,西一点,阅读性较低。

5,可能还存在一些小BUG没有找到。

------------------程序在我的代码分享中,自己下载----------------

接下来是代码的用途与介绍:

1.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

这是我方坦克重生的代码,4-7行是我方坦克的显示以及显示位置,,第8行是坦克方向为上,第9行坦克以重生。

2.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

这是我方坦克向左发射子弹,第1行x判断子弹是否存在,y是判断游戏是否开始。第3-7调整子弹位置并显示。接下来的代码为子弹与边界的碰撞,子弹消失。

3.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该图接上,判断子弹与基地碰撞后的结果,replayshow() 后面会有介绍,大概就是游戏结束。

4.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该图接上,判断子弹与敌方坦克碰撞后的结果,第9 10,12-15行是在敌方坦克处,出现爆炸图片,并出现30毫秒后消失。

5.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该图接上,判断子弹与墙体碰撞后的结果,bulletWallL()后面会有介绍。

!!然后接下来是下,上,右一些差不多的代码就不一一介绍了!!

6.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该函数就是子弹与墙碰撞后的结果。

7.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

第4-19行是从各个方向到左后坦克的显示方式。第20行是将我方坦克的方向变量置为0(左)。第21行坦克向左移tankSpeed像素。第22-24行是我方坦克与边界碰撞后的处理。第25-28行是我方坦克与基地碰撞的处理。第29行是我方坦克与敌方坦克碰撞的处理,第30-34行是我方坦克与墙碰撞后的处理。impactL( , )后面会有介绍。

!!接下来是右,上,下的代码就不一一赘述了!!

8.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该函数就是坦克与物体碰撞后的处理。

9.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该函数就是地方坦克,第4-7行是敌方坦克的显示位置。第8行敌方坦克方向向下。第9行地方坦克已重生。

10.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

这是敌方坦克自动移动的函数,第5-8是敌方坦克与边界碰撞的处理,第9,10是敌方坦克与基地,我方坦克碰撞的处理。第11-14是敌方坦克与墙碰撞的处理。

!!接下来是右,上,下的重复代码!!

11.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该函数是敌方坦克自动转向函数,第2行是随机产生一个500-2499的随机数,让定时器能在500ms到2499ms之间换个方向。第4行是随机产生一个0-3的随机数,第5-20行是得到j,并处理敌方坦克方向问题。

12.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该函数是敌方子弹处理函数,第5-9行调整子弹位置并显示。第10行判断子弹已存在。第16-22判断子弹与边界碰撞的处理。

13.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

判断敌方子弹与基地碰撞后的处理。

14.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

判断敌方子弹与我方坦克相撞后的处理。

15.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

判断敌方子弹与墙相撞后的处理。

!!接下来是右,上,下的重复代码!!

16.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该函数就是显示一个div,该div的功能为重新开始(点击重新开始或按回车键)。

17.


用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区

该函数是创建墙,第3行是创建一个img。第4行是赋值该img的id。第5行是添加该图片的路径,第6行是将该img置于地图当中。第7-12行是该墙的css。第13行是将该id置入wall数组,方便读取。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 开源浏览器变量冲突
分页:12
转载请注明
本文标题:用原生js以及少量jq的简易坦克大战 - kejiacheng - 开源中国社区
本站链接:http://www.codesec.net/view/482864.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(48)