从零开始飞机大战（五）实现子弹定位和动画

实现目标

首先判断什么时候需要发射炮弹，我们设置在摁下空格的时候发射炮弹，我们下载键盘监控事件中
所以在键盘检测到我们摁下空格的时候，一个炮弹就自动加载到舞台中，

//键盘的监控事件
document.onkeydown=function(e){if(e.key==" "){  //炮弹向上运动$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);}}

其次就是要讨论炮弹加载在哪里的位置问题，我们之前同样在讨论过敌机加载在舞台的位置问题，那个时候我们利用random方法实现了随机型号的敌机在舞台上方的随机位置出现;但是炮弹我们却不能使用这个想法，我们需要炮弹在我们按下空格键是出现在紧贴在飞机坐在位置的上方，炮弹出现的位置时根线对于飞机的位置确定的，并且在我们加如炮弹节点在html中时就应该同时规定好他出现的位置，所以可以在键盘事件检测到空格键按下的时候在舞台加入节点并且规定好他的位置
我们需要炮弹运动起来所以我们可以规定一个炮弹速度，这个很在设计敌机运动时我们设置的低级运动速度变量move类似，
全局声明

//炮弹对象,宽高速度var bullet=stage.getElementsByClassName("bullet")[0];var bulletw=50;var bulleth=65;var bullets=10;

键盘事件：

//键盘的监控事件
document.onkeydown=function(e){if(e.key==" "){  //炮弹向上运动// console.log(parseFloat($(plain).css("top")))var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;// console.log($(plain).css("left"))console.log(parseFloat($(plain).css("left")))// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));var bullety=parseFloat($(plain).css("top"))-bulleth;// plain.style.top.CSSValue=plain.style.top+10// $(plain).css({"left":parseFloat($(plain).css("left"))+move});// move++// $("<div class=\"bullet\"></div>")   转义方法$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);}}

这时键盘监控事件可以随时在我们摁下空格键的时候将炮弹加入到我们的舞台中
所以需要设置炮弹移动的问题了
设计思路跟敌机一样

 //控制子弹的动画时间控件setInterval(function(){if($(".bullet").length==0) return;//设置好子弹移出屏幕后，移除子弹节点// $(".bullet").css({"top":parseFloat($(".bullet").css("top"))-10})// // console.log($(this).css("top"))// console.log(parseFloat($(".bullet").css("top")));var bulltop=parseFloat($(".bullet").css("top"));$(".bullet").css({"top":(bulltop-10)+"px"});},bullets);

最后不要忘记炮弹飞出舞台时需要自动删除，不然优惠出现内存占用的情况

//单独监控子弹
setInterval(function(){// var bullet=document.getElementsByClassName("bullet");//两种写法都可以var bullet=$(".bullet");for(i=0;i<bullet.length;i++){var tmp_bullet=parseFloat($(bullet[i]).css("top"));// console.log(tmp_bullet);if(tmp_bullet<0){$(bullet[i]).remove();};  };
},400);

完整代码：

$(function(){//这里写代码的时候是可以控制所有htmldom节点的//domvar stage=document.getElementById("stage"); //获取舞台节点var bg1=stage.getElementsByClassName("bg1")[0];//获取背景图片// console.log(bg1)  //检查是否捕获bg1var bg2=stage.getElementsByClassName("bg2")[0];//获取背景图片var topval=-200;var topval2=-968;var k=0;//玩家飞机对象var plain=stage.getElementsByClassName("plain")[0];//炮弹对象,宽高速度var bullet=stage.getElementsByClassName("bullet")[0];var bulletw=50;var bulleth=65;var bullets=10;// bg1.style.cssText="top: -30px;"var t1=setInterval(function(){k+=1;if(k==768){topval=-968;}else if(k==768*2){topval2=-968;k=0;}// console.log("ddd")// console.log(bg1.style.cssText)// bg1.scrollTop=bg1.scrollTop+10;$(bg1).css({"top":topval});$(bg2).css({"top":topval2});// bg1.style.cssText="top: "+topval+"px";topval++;// bg2.style.cssText="top: "+topval2+"px";topval2++;//topval++背景向下移动  },3);// t1.clearInterval();  //时钟停止// 第二章图片// var stage=document.getElementById("stage"); //获取舞台节点// // console.log(bg1)  //检查是否捕获bg1// // bg1.style.cssText="top: -30px;"// var t1=setInterval(function(){//   // console.log("ddd")//   // console.log(bg1.style.cssText)//     // bg1.scrollTop=bg1.scrollTop+10;//  bg2.style.cssText="top: "+topval2+"px";//    topval2+=1//  //topval++背景向下移动  // },70);// console.log(plain)var move=5//键盘的监控事件
document.onkeydown=function(e){// console.log(e)//向上运动if(e.key=="w"){// console.log(parseFloat($(plain).css("top")))if(parseFloat($(plain).css("top"))>=5)// plain.style.top.CSSValue=plain.style.top+10$(plain).css({"top":parseFloat($(plain).css("top"))-move});// move++}else if(e.key=="s"){  //向下运动// console.log(parseFloat($(plain).css("top")))if(parseFloat($(plain).css("top"))<=513)// plain.style.top.CSSValue=plain.style.top+10$(plain).css({"top":parseFloat($(plain).css("top"))+move});// move++}if(e.key=="a"){  //向左运动// console.log(parseFloat($(plain).css("top")))// plain.style.top.CSSValue=plain.style.top+10$(plain).css({"left":parseFloat($(plain).css("left"))-move});// move++}else if(e.key=="d"){  //向右运动// console.log(parseFloat($(plain).css("top")))// plain.style.top.CSSValue=plain.style.top+10$(plain).css({"left":parseFloat($(plain).css("left"))+move});// move++}else if(e.key==" "){  //炮弹向上运动// console.log(parseFloat($(plain).css("top")))var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;// console.log($(plain).css("left"))console.log(parseFloat($(plain).css("left")))// console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));var bullety=parseFloat($(plain).css("top"))-bulleth;// plain.style.top.CSSValue=plain.style.top+10// $(plain).css({"left":parseFloat($(plain).css("left"))+move});// move++// $("<div class=\"bullet\"></div>")   转义方法$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);}}//控制敌机的时钟var enemy=document.getElementsByClassName("enemy");setInterval(function(){for(var i=0;i<enemy.length;i++){if($(enemy[i]).attr("class")=="enemy enemy1"){$(enemy[i]).css("top",parseFloat($(enemy[i]).css("top"))+1);}else if($(enemy[i]).attr("class")=="enemy enemy2"){$(enemy[i]).css("top",parseFloat($(enemy[i]).css("top"))+2);}else if($(enemy[i]).attr("class")=="enemy enemy3"){$(enemy[i]).css("top",parseFloat($(enemy[i]).css("top"))+3);}else if($(enemy[i]).attr("class")=="enemy enemy4"){$(enemy[i]).css("top",parseFloat($(enemy[i]).css("top"))+4);}}},10); //随机产生敌机// setInterval(function(){//    var num=parseInt(Math.random()*4)+1;//    var rndwidth_stage=parseInt(Math.random()*parseInt($(stage).width()-45));//    $("<div class=\"enemy enemy"+num+"\"></div>").css({"left":rndwidth_stage}).appendTo("#stage")// },1500);//数组写法setInterval(function(){var num=parseInt(Math.random()*4)+1;var enemyW=[50,67,67,67];var rndwidth_stage=parseInt(Math.random()*$(stage).width()); //展示三木运算符(rndwidth_stage-enemyW[num-1]rndwidth_stage=rndwidth_stage>enemyW[num-1]?rndwidth_stage-enemyW[num-1]:rndwidth_stage;$("<div class=\"enemy enemy"+num+"\"></div>").css({"left":rndwidth_stage}).appendTo("#stage")},1000);//控制子弹的动画时间控件setInterval(function(){if($(".bullet").length==0) return;//设置好子弹移出屏幕后，移除子弹节点// $(".bullet").css({"top":parseFloat($(".bullet").css("top"))-10})// // console.log($(this).css("top"))// console.log(parseFloat($(".bullet").css("top")));var bulltop=parseFloat($(".bullet").css("top"));$(".bullet").css({"top":(bulltop-10)+"px"});},bullets);   //单独监控子弹setInterval(function(){// var bullet=document.getElementsByClassName("bullet");//两种写法都可以var bullet=$(".bullet");for(i=0;i<bullet.length;i++){var tmp_bullet=parseFloat($(bullet[i]).css("top"));// console.log(tmp_bullet);if(tmp_bullet<0){$(bullet[i]).remove();};};},400);//离开舞台的还记移除dom节点setInterval(function(){for(i=0;i<enemy.length;i++){var tmp_enemy=parseFloat($(enemy[i]).css("top"));var tmp_stage=$(stage).height();// console.log(tmp_enemy); // console.log(typeof($(tmp_stage).height()));if(tmp_enemy>tmp_stage){$(enemy[i]).remove();// console.log("移除成功");};};},500);
});// 第二章图片
// $(function(){//  //这里写代码的时候是可以控制所有htmldom节点的
//  //dom//     var stage=document.getElementById("stage"); //获取舞台节点
//  var bg2=stage.getElementsByClassName("bg2")[0];//获取背景图片
//  // console.log(bg1)  //检查是否捕获bg1
//  var topval=-968;
//  // bg1.style.cssText="top: -30px;"
//  var t2=setInterval(function(){//      // console.log("ddd")
//      // console.log(bg1.style.cssText)
//      // bg1.scrollTop=bg1.scrollTop+10;
//      bg2.style.cssText="top: "+topval+"px";
//      topval+=1
//      //topval++背景向下移动  //  },70);//    // t1.clearInterval();  //时钟停止// });
// alert("4444")   不使用jq的话无法完全加载再弹弹框// function myapp(){//  定义函数的基本格式// }// function xxxx (){//      // console.log("ddd")
//      console.log(bg1.style.cssText)
//      // bg1.scrollTop=bg1.scrollTop+10;
//      bg1.style.cssText="top: "+topval+"px";
//      topval+=1//   }

css

#stage{width: 320px;height: 568px;background-color: antiquewhite;color: white;overflow: hidden;margin: auto;position: relative;}
.bg1{background-image: url(../img/bg_01.png);height: 768px;width: 100%;position: absolute;top: -200px;/* z-index: 5; */
}
.bg2{background-image: url(../img/bg_01.png);height: 768px;width: 100%;position: absolute;top: -968px;/* z-index: 5; */
}
.plain{height: 53px;width: 67px;background-image: url(../img/plane_blue_01.png);z-index: 11;position: absolute;bottom: 0;background-size: 100% 100%;
}.enemy{height: 53px;width: 67px;position: absolute;background-size: 100% 100%;}
.enemy1{background-image: url(../img/enemy_04.png);z-index: 10;height: 40px;width: 50px;top:0;left: 20px;
}
.enemy2{background-image: url(../img/enemy_03.png);z-index: 10;top:0;left: 90px;}
.enemy3{background-image: url(../img/enemy_02.png);z-index: 10;top:0;left: 160px;height: 70px;
}
.enemy4{background-image: url(../img/enemy_01.png);z-index: 10;top:0;left: 230px;}
/* 子弹 */
.bullet{background-image: url(../img/bullet_01.png);width: 50px;height: 65px;position: absolute;z-index: 10;}

从零开始飞机大战（五）实现子弹定位和动画相关推荐

Python学习日记-第二十六天-飞机大战（发射子弹和碰撞检测）
系列文章目录 1.发射子弹 2.碰撞检测一.发射子弹 1.1 添加发射子弹事件 Pygame的定时器使用套路非常固定: 定义定时器常量--eventtid 在初始化方法中,调用set_timer ...
python-pygame实现飞机大战-3-发射子弹以及击中敌机
承接上两步: 1.python-pygame实现飞机大战-添加背景以及飞机运动 2.python-pygame实现飞机大战-2-添加敌机以及碰撞爆炸在完成玩家飞机运动,生成敌机飞机以及两者碰撞爆炸后 ...
ES6飞机大战篇-添加子弹追踪功能
既然是飞机大战那必定少不了子弹追踪那么添加子弹追踪功能的实现如下: // 原文链接:https://blog.csdn.net/erweimac/article/details/82256087 ...
Python_从零开始学习_(52) 飞机大战_发射子弹
1. 设计英雄和子弹类英雄需求游戏启动后, 英雄出现在屏幕的水平中间位置, 距离屏幕底部 120 像素英雄每隔 0.5 秒发射一次子弹, 每次连发三枚子弹英雄默认 ...
QT飞机大战五(碰撞爆炸特效类)
如图所示,在子弹碰到敌机时,同时产生爆炸特效,显得不那么突兀那么怎么做到的呢?? 其实也很简单,爆炸特效由一些图片组成,每当我们检测到子弹和敌机相交时就在这个位置播放一个爆炸特效,那么爆炸也可以封 ...
java 中飞机大战碰撞检测,飞机大战开发04子弹与敌机的碰撞检测
先是敌机与玩家子弹的碰撞检测: 代码: GameLayer.h void GameLayer::update(float dt) { for (int i = 0 ;i < m_pEnermyV ...
飞机大战之-添加子弹
现在添加字段对象,子弹,敌机,玩家,都是属于modle包中的对象,所以我们新建一个类Bullet 1/定义子弹需要的一些常量,子弹图片的长宽,子弹的坐标. 然后使用Tooklit.getDefault ...
27飞机大战_发射子弹
1. 设计英雄和子弹类英雄需求游戏启动后, 英雄出现在屏幕的水平中间位置, 距离屏幕底部 120 像素英雄每隔 0.5 秒发射一次子弹, 每次连发三枚子弹英雄默认 ...
Unity飞机大战（发射子弹让子弹向前飞）
1.发射子弹: 2.让子弹向前飞:

从零开始飞机大战（五）实现子弹定位和动画

实现目标

完整代码：

css

从零开始飞机大战（五）实现子弹定位和动画相关推荐

最新文章

热门文章

从零开始 飞机大战（五）实现子弹定位和动画

实现目标

完整代码：

css

从零开始 飞机大战（五）实现子弹定位和动画相关推荐

最新文章

热门文章

从零开始飞机大战（五）实现子弹定位和动画

从零开始飞机大战（五）实现子弹定位和动画相关推荐