js坦克大战以实现炮弹击中目标消失并且记分
话不多说
下载下面的代码包就能看到效果，
效果图：
js代码如下：/**初始化*/
var shell=document.getElementById('tk');
shell.innerHTML='
';
var w=shell.offsetWidth;h=shell.offsetHeight;
/**初始化*/
function keyDown(e) {
var keycode = e.which;
remove(keycode,2);//坦克移动
if(keycode=='32'){//发射子弹
zidan();
}
}
function keyUp(e){//键位弹起时候记录最后按下方向键,并将其储存到class中去
var keycode = e.which; shell_1=document.getElementById('shell_1');
if(keycode=='37' || keycode=='38' || keycode=='39' || keycode=='40'){
shell_1.className='qin'+keycode;
}
}
/**键位监听*/
document.onkeydown = keyDown;
document.onkeyup = keyUp;
/**键位监听*/
function remove(code,su){//玩家坦克移动函数
var shell_1=document.getElementById('shell_1');
var l;
if(code=='37'){//左移
l=shell_1.style.marginLeft;
l=parseInt(l);
if(l>0){
shell_1.style.marginLeft=(l-su)+'px';
}
}
if(code=='38'){//上移
l=shell_1.style.marginTop;
l=parseInt(l);
if(l>0){
shell_1.style.marginTop=(l-su)+'px';
}
}
if(code=='39'){//右移
l=shell_1.style.marginLeft;
l=parseInt(l);
if(l
shell_1.style.marginLeft=(l+su)+'px';
}
}
if(code=='40'){//下移
l=shell_1.style.marginTop;
l=parseInt(l);
if(l
shell_1.style.marginTop=(l+su)+'px';
}
}
}
function zidan(){//玩家坦克子弹函数
/**获取子弹初始位置*/
var che=document.getElementById('shell_1');
var l=che.style.marginLeft;
var t=che.style.marginTop;
var html=shell.innerHTML;//获取原有html
/**获取子弹初始位置*/
var myDate = new Date();
var myid=myDate.getTime();
/**创建初始子弹*/
shell.innerHTML=html+'
';
/**创建初始子弹*/
/**获取子弹的运行方向*/
var fx=che.className;//子弹方向只能在子弹初始的时候获取
/**获取子弹的运行方向*/
var set=setInterval(function(){
var zd=document.getElementById(myid);//获取子弹
if(fx=='qin39'){//子弹向右
var ls=zd.style.marginLeft;
ls=parseInt(ls);
if(ls
zd.style.marginLeft=(ls+1)+'px';
}else{
rezidan(myid);
clearInterval(set);
}
}
if(fx=='qin37'){//子弹向左
var ls=zd.style.marginLeft;
ls=parseInt(ls);
if(ls>0){
zd.style.marginLeft=(ls-1)+'px';
}else{
rezidan(myid);
clearInterval(set);
}
}
if(fx=='qin38'){//子弹向上
var ls=zd.style.marginTop;
ls=parseInt(ls);
if(ls>0){
zd.style.marginTop=(ls-1)+'px';
}else{
rezidan(myid);
clearInterval(set);
}
}
if(fx=='qin40'){//子弹向下
var ls=zd.style.marginTop;
ls=parseInt(ls);
if(ls
zd.style.marginTop=(ls+1)+'px';
}else{
rezidan(myid);
clearInterval(set);
}
}
},10);
}
function rezidan(id){//删除子弹函数或者坦克
var child=document.getElementById(id);
if(child){
shell.removeChild(child);
}
}
//**电脑坦克*/
function ran(){//随机1到4的方位函数
var kwc=Math.ceil(Math.random()*10);
var kwv;
if(kwc%4==0){kwv=1;}
if(kwc%4==1){kwv=2;}
if(kwc%4==2){kwv=3;}
if(kwc%4==3){kwv=4;}
return kwv;
}
function rantanke(){//随机创建敌方坦克
/**初始坦克随机出现位置*/
var html=shell.innerHTML;//获取原有html
var t=Math.random()*1000;
var l=Math.random()*1000;
if(t>h){t=(t-h)+'px';}else{t=t+'px';}//判断坦克不会超出边界太远
if(l>w){l=(l-w)+'px';}else{l=l+'px';}//判断坦克不会超出边界太远
/**初始坦克随机出现位置*/
var myDate = new Date();
var myid=myDate.getTime();
/**创建坦克*/
shell.innerHTML=html+'
';
/**创建坦克*/
var setz=setInterval(function(){
/**被击中*/
var ztk=document.getElementById(myid);dt=ztk.style.marginTop;dl=ztk.style.marginLeft;
dt=parseInt(dt);dl=parseInt(dl);
var zidanob=document.getElementsByClassName('zidan');
if(zidanob.length!=0){
for(i=0;i
var zt=zidanob[i].style.marginTop;
var zl=zidanob[i].style.marginLeft;
zt=parseInt(zt);zl=parseInt(zl);
if(zt>dt && ztdl && zl
zidanob[i].style.display='none';//隐藏子弹
zidanob[i].className='';//当子弹碰撞后删除子弹的class以防止下次继续击中敌方坦克
rezidan(myid);//删除被击中坦克
clearInterval(setz); //删除被击中坦克的时间函数
fensu();//记录分数
}
}
}
/**被击中*/
var clasz=ztk.className;
var oArr = clasz.split(" ");
var fwz;//每次执行这段代码FWZ就清空,fwz是方向判断变量
if(clasz){//判断是否是创建坦克后第一次移动
if(oArr[0]=='qinr'){//持续向右移动50次
if(parseInt(oArr[1])
var lz=ztk.style.marginLeft;
lz=parseInt(lz);
if(lz
ztk.style.marginLeft=(lz+2)+'px';
}else{
fwz=ran();//撞墙重新选定方位
}
var clsaa=parseInt(oArr[1])+1;
ztk.className='qinr '+clsaa;
}else{
fwz=ran();//重新选定方位
}
}
if(oArr[0]=='qinl'){//持续向左移动50次
if(parseInt(oArr[1])
var lz=ztk.style.marginLeft;
lz=parseInt(lz);
if(lz>0){
ztk.style.marginLeft=(lz-2)+'px';
}else{
fwz=ran();//撞墙重新选定方位
}
var clsaa=parseInt(oArr[1])+1;
ztk.className='qinl '+clsaa;
}else{
fwz=ran();//重新选定方位
}
}
if(oArr[0]=='qint'){//持续向上移动50次
if(parseInt(oArr[1])
var lz=ztk.style.marginTop;
lz=parseInt(lz);
if(lz>0){
ztk.style.marginTop=(lz-2)+'px';
}else{
fwz=ran();//撞墙重新选定方位
}
var clsaa=parseInt(oArr[1])+1;
ztk.className='qint '+clsaa;
}else{
fwz=ran();//重新选定方位
}
}
if(oArr[0]=='qinf'){//持续向下移动50次
if(parseInt(oArr[1])
var lz=ztk.style.marginTop;
lz=parseInt(lz);
if(lz
ztk.style.marginTop=(lz+2)+'px';
}else{
fwz=ran();//撞墙重新选定方位
}
var clsaa=parseInt(oArr[1])+1;
ztk.className='qinf '+clsaa;
}else{
fwz=ran();//重新选定方位
}
}
}else{
fwz=ran();//方位函数
}
if(fwz==2){//方位值为2就执行向右移动
var lz=ztk.style.marginLeft;
lz=parseInt(lz);
ztk.style.marginLeft=(lz+2)+'px';
ztk.className='qinr 1';
}
if(fwz==3){//方位值为3就执行向左移动
var lz=ztk.style.marginLeft;
lz=parseInt(lz);
ztk.style.marginLeft=(lz-2)+'px';
ztk.className='qinl 1';
}
if(fwz==1){//方位值为1就执行向上移动
var lz=ztk.style.marginTop;
lz=parseInt(lz);
ztk.style.marginTop=(lz-2)+'px';
ztk.className='qint 1';
}
if(fwz==4){//方位值为4就执行向下移动
var lz=ztk.style.marginTop;
lz=parseInt(lz);
ztk.style.marginTop=(lz+2)+'px';
ztk.className='qinf 1';
}
},50);
}
function fensu(){//记分函数
var ob=document.getElementById('fs');
var s=ob.innerText;
s=parseInt(s);
s=s+1;
ob.innerText=s;
}
rew.zip
( 33.16 KB 下载：9 次 )
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
10865
