实现目标
首先判断什么时候需要发射炮弹，我们设置在摁下空格的时候发射炮弹，我们下载键盘监控事件中
所以在键盘检测到我们摁下空格的时候，一个炮弹就自动加载到舞台中，
//键盘的监控事件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;}
