2022-05-09 05:33:08 来源 : 软件开发网
本文实例为大家分享了JavaScript实现前端飞机大战的具体代码，供大家参考，具体内容如下
html：
飞机大战 <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/main.js" type="text/javascript" charset="utf-8"></script> 功能切换 背景切换 js：
// var pdirection// var plain// pdirection = [0, 0, 0, 0, 0];// var bulletw = 50;// var bulleth = 65;// var stage// var move = 1// var timerkiss$(function() { //这里写代码的时候是可以控制所有htmldom节点的 //dom var pdirection = [0, 0, 0, 0, 0]; //子弹的宽高 var bulletw = 50; var bulleth = 65; //运动距离 var move = 1 // var timerkiss var stage = document.getElementById("stage"); //获取舞台节点 var bg1 = stage.getElementsByClassName("bg1")[0]; //获取背景图片 // console.log(bg1) //检查是否捕获bg1 var bg2 = stage.getElementsByClassName("bg2")[0]; //获取背景图片 var topval = -200; var topval2 = -968; var k = 0; //玩家飞机对象 var plain = stage.getElementsByClassName("plain")[0]; //定义方向的变量数组，依次表示 上 右 下 左 空格用1表示按下，用0 表示未按下 // pdirection = [0, 0, 0, 0, 0]; // 功能切换 var funcsw=true;//true表示打开键盘 ，关闭鼠标，false表示打开鼠标，关闭键盘 //炮弹对象,宽高速度 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 = 1 //键盘的监控事件 document.onkeydown = function(e) { // console.log(e) //向上运动 // console.log("444") if (e.key == "w") { //cons //console.log("555") pdirection[0] = 1; //console.log(pdirection[0]); // 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") { //向下运动 pdirection[2] = 1; // 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++ } else if (e.key == "a") { //向左运动 pdirection[3] = 1; // 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") { //向右运动 pdirection[1] = 1; // 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==" "){ //炮弹向上运动 //pdirection[4]=1; // 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++ // $("") 转义方法 //$("").css({"left":bulletx,"top":bullety}).appendTo(stage); //}; } //炮弹单独 document.onkeypress = function(e) { if (e.key == " ") { //炮弹向上运动 shoot(); }; } //键盘按键抬起来 document.onkeyup = function(e) { if (e.key == "w") { //cons //console.log("555") pdirection[0] = 0; } else if (e.key == "s") { //向下运动 pdirection[2] = 0; } else if (e.key == "a") { //向左运动 pdirection[3] = 0; } else if (e.key == "d") { //向右运动 pdirection[1] = 0; } else if (e.key == " ") { //炮弹向上运动 pdirection[4] = 0; }; // console.log(pdirection) }; //定义飞机x轴y轴的坐标 // var plainx=e.clientX; // var plainy=e.clientY //鼠标移动事件 stage.onmousemove=function(e){ if(funcsw) return; //关闭鼠标功能 var plainX=e.clientX-parseFloat($(stage).css("margin-left")); var plainY=e.clientY //console.log(e) //如有必要需要去掉子事件。此处并不需要 // e.defaultPrevented; // e.getPreventDefault()//取消事件默认动作 // console.log(e.path[1].id); // ($(plain[0]).css("top"))=e.clientX+"px" $(plain).css({"left":plainX-parseFloat($(plain).width()/2),"top":plainY-parseFloat($(plain).height()/2)}); //$(plain).css({"top":plainY+parseFloat($(plain).css("height")/2)}); // $(plain).css({"top":plainy}); // console.log(e.clientX) // console.log(e.clientY) // console.log($(plain).css("top")) } //绑定功能切换键 $(".func").click(function(){ if($(this).html()=="功能切换"){ if(funcsw){ funcsw=false;//关闭键盘 打开鼠标 clearInterval(timerkey); timerfire=setInterval(shoot,170); }else{ funcsw=true; //关闭鼠标 ，打开键盘 clearInterval(timerfire); timerkey=monitorkey(); } }; }); //控制敌机的时钟 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)); // $("").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; $("").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[i]").css("top")); //$(".bullet").css({"top":(bulltop-10)+"px"}); var bullet = $(".bullet"); // console.log(bullet) // for(var i=0;i tmp_stage) { $(enemy[i]).remove(); // console.log("移除成功"); }; }; }, 500); //时钟控件监控数组pdirection的值 var timerkey=monitorkey();//时钟控件表示每个多少时间发射子弹//第一种方法 键盘模拟事件// setInterval(function(){// var e=jQuery.Event("keypress");// e.key=" "// $(document).trigger(e);// },500)//第二种方法 直接调用函数 function shoot(){ $("#mp3shoot")[0].currentTime=0; $("#mp3shoot")[0].play(); pdirection[4] = 1; // 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++ // $("") 转义方法 //$("").css({"left":bulletx,"top":bullety}).appendTo(stage); //console.log(pdirection[4]); 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++ // $("") 转义方法 $("").css({ "left": bulletx, "top": bullety }).appendTo(stage); } //总结模型 // function kissAB(A,B){ // var iskiss=false; // for(var i=0;i= 5) // plain.style.top.CSSValue=plain.style.top+10 $(plain).css({ "top": parseFloat($(plain).css("top")) - move }); else $(plain).css({"top":0}); // move++ } if (pdirection[2] == 1) { //向下运动 // 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 }); else $(plain).css({"top":$(stage).Height-$(plain).Height}); // move++ } if (pdirection[3] == 1) { //向左运动 // console.log(parseFloat($(plain).css("top"))) if (parseFloat($(plain).css("left")) >= -10) // plain.style.top.CSSValue=plain.style.top+10 $(plain).css({ "left": parseFloat($(plain).css("left")) - move }); // move++ } if (pdirection[1] == 1) { //向右运动 // console.log(parseFloat($(plain).css("top"))) if (parseFloat($(plain).css("left")) <= 270) // plain.style.top.CSSValue=plain.style.top+10 //console.log(parseFloat($(plain).css("right"))) $(plain).css({ "left": parseFloat($(plain).css("left")) + move }); // move++ } if (pdirection[4] == 1) { //炮弹向上运动 // 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++ // $("") 转义方法 //$("").css({"left":bulletx,"top":bullety}).appendTo(stage); } }, 1); } // 载入背景音乐 // $("#mp3bg").play(); var mp3bg=document.getElementById("mp3bg"); // var timerbg= setInterval(function(){ // mp3bg.currentTime=0; // // mp3bg.controls // mp3bg.play(); // clearInterval(timerbg); // }) $("#buttonmusic").click(); $("#buttonmusic").click(function(){ if($(this).html()=="音乐"){ $(this).html("暂停"); //mp3bg.currentTime=0; // mp3bg.controls mp3bg.play(); //clearInterval(timerbg); }else{ //mp3bg.currentTime=0; // mp3bg.controls mp3bg.pause(); $(this).html("音乐"); } }) function startgame(){ //碰撞检测开始 timerkiss=monitorkiss(); //重置方向键盘 console.log(pdirection); pdirection = [0, 0, 0, 0, 0]; //生成玩家飞机 // var timertmp=setInterval(function(){ //var aa=$(stage).height()-$(plain).height()*2 //console.log(aa) // if(parseFloat($(plain).css("top"))<($(stage).height()-$(plain).height()*2)){ // //alert("33"); // console.log("666"); // clearInterval(timertmp); // }else // plain.style.cssText="top:"+(parseFloat($(plain).css("top"))-5)+"px;left:"+$(stage).width()/2-$(plain).width()/2+"px;"; // }); } function gameover(){ //碰撞检测停止 clearInterval(timerkiss); // alert("gameover"); //移除玩家飞机 // plain.remove(); //移除玩家飞机使用隐藏的方法 //plain.hidden=true; //移除所有敌机 $(".enemy").remove(); // console.log(pdirection) //移除玩家飞机，使用隐藏的方法 // $(plain).hide(); plain.style.cssText="top:"+$(stage).height()+"px;left:"+($(stage).width()/2-$(plain).width()/2+"px"); if(confirm("你玩不起，你个小垃圾，你没有实力")){ startgame(); } //重置方向键盘 pdirection = [0, 0, 0, 0, 0]; }});// 第二章图片// $(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; */}/* 按钮 */.func{ width: 40px; height: 20px; position: absolute; z-index: 12; background-color: skyblue; opacity: 0.6; color: white; cursor: pointer;}.func:hover{ opacity: 1; transition-duration: 1s;} 
关于我们 加入我们 广告服务 网站地图
All Rights Reserved, Copyright 2004-2020 www.830036.com
如有意见请与我们联系 邮箱：435 227 67@qq.com
营业执照公示信息