This article shares the specific code for JavaScript to implement the front-end aircraft war for your reference. The specific content is as follows
html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Aircraft War</title> <link rel="stylesheet" type="text/css" href="css/" /> <link rel="stylesheet" type="text/css" href="css/" /> <script src="js/jquery-3.6." type="text/javascript" charset="utf-8"></script> <script src="js/" type="text/javascript" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <body> <div > <div class="bg1"></div> <div class="bg2"></div> <div class="plain"></div> <div class="enemy enemy1"></div> <div class="enemy enemy2"></div> <div class="enemy enemy3"></div> <div class="enemy enemy4"></div> <!-- <div class="bullet"></div> --> <div class="func">Function switching</div> <div class="func" style="left: 50px;">Background switching</div> <audio src="music/background.mp3" autoplay loop> The current browser does not support itaudio </audio> <audio src="music/shoot.mp3" > The current browser does not support itaudio </audio> <audio src="./music/destoryed.mp3" > The current browser does not support itaudio </audio> <button type="button" style="position: absolute;right: 0;bottom: 0;">music</button> </div> </body> </html>
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() {
//When writing code here, you can control all htmldom nodes //dom
var pdirection = [0, 0, 0, 0, 0];
//The width and height of the bullet var bulletw = 50;
var bulleth = 65;
//Movement distance var move = 1
// var timerkiss
var stage = ("stage"); //Get the stage node var bg1 = ("bg1")[0]; //Get background image // (bg1) // Check whether bg1 is captured var bg2 = ("bg2")[0]; //Get background image var topval = -200;
var topval2 = -968;
var k = 0;
//Player aircraft object var plain = ("plain")[0];
//Array of variables that define the direction, represent the upper right lower left space in turn. Pressed with 1, and pressed with 0, indicating that it has not been pressed. // pdirection = [0, 0, 0, 0, 0];
// Function switch var funcsw=true;//true means to open the keyboard, close the mouse, false means to open the mouse, close the keyboard
//Architecture object, width, height, speed var bullet = ("bullet")[0];
// var bulletw = 50;
// var bulleth = 65;
var bullets = 10;
// ="top: -30px;"
var t1 = setInterval(function() {
k += 1;
if (k == 768) {
topval = -968;
} else if (k == 768 * 2) {
topval2 = -968;
k = 0;
}
// ("ddd")
// ()
// =+10;
$(bg1).css({
"top": topval
});
$(bg2).css({
"top": topval2
});
// ="top: "+topval+"px";
topval++;
// ="top: "+topval2+"px";
topval2++;
//topval++ background moves downward
}, 3);
// (); // Clock stops
// Chapter 2 Picture // var stage=("stage"); //Get the stage node
// // (bg1) // Check whether bg1 is captured
// // ="top: -30px;"
// var t1=setInterval(function(){
// // ("ddd")
// // ()
// // =+10;
// ="top: "+topval2+"px";
// topval2+=1
// //topval++ background moves downward
// },70);
// (plain)
// var move = 1
//Keyboard monitoring events = function(e) {
// (e)
//Move upward // ("444")
if ( == "w") {
//cons
//("555")
pdirection[0] = 1;
//(pdirection[0]);
// (parseFloat($(plain).css("top")))
//if(parseFloat($(plain).css("top"))>=5)
// =+10
// $(plain).css({"top":parseFloat($(plain).css("top"))-move});
// move++
} else if ( == "s") { //Move down pdirection[2] = 1;
// (parseFloat($(plain).css("top")))
//if(parseFloat($(plain).css("top"))<=513)
// =+10
// $(plain).css({"top":parseFloat($(plain).css("top"))+move});
// move++
} else if ( == "a") { //Move to the left pdirection[3] = 1;
// (parseFloat($(plain).css("top")))
// =+10
//$(plain).css({"left":parseFloat($(plain).css("left"))-move});
// move++
} else if ( == "d") { //Move to the right pdirection[1] = 1;
// (parseFloat($(plain).css("top")))
// =+10
//$(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
}
//else if(==" "){ //The shell moves upward //pdirection[4]=1;
// (parseFloat($(plain).css("top")))
// var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
// ($(plain).css("left"))
//(parseFloat($(plain).css("left")))
// (parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
//var bullety=parseFloat($(plain).css("top"))-bulleth;
// =+10
// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
// $("<div class=\"bullet\"></div>") Escape method //$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
//};
}
//The shells are alone = function(e) {
if ( == " ") { //The shell moves upward shoot();
};
}
//Release the keyboard keys = function(e) {
if ( == "w") {
//cons
//("555")
pdirection[0] = 0;
} else if ( == "s") { //Move down pdirection[2] = 0;
} else if ( == "a") { //Move to the left pdirection[3] = 0;
} else if ( == "d") { //Move to the right pdirection[1] = 0;
} else if ( == " ") { //The shell moves upward pdirection[4] = 0;
};
// (pdirection)
};
//Define the coordinates of the x-axis y-axis of the aircraft // var plainx=;
// var plainy=
//Mouse Movement Event =function(e){
if(funcsw) return; // Turn off the mouse function var plainX=-parseFloat($(stage).css("margin-left"));
var plainY=
//(e)
//If necessary, remove sub-events. It is not necessary here // ;
// ()//Cancel event default action // ([1].id);
// ($(plain[0]).css("top"))=+"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});
// ()
// ()
// ($(plain).css("top"))
}
//Binding function switching key $(".func").click(function(){
if($(this).html()=="Function Switch"){
if(funcsw){
funcsw=false;//Close the keyboard and turn on the mouse clearInterval(timerkey);
timerfire=setInterval(shoot,170);
}else{
funcsw=true; //Close the mouse and open the keyboard clearInterval(timerfire);
timerkey=monitorkey();
}
};
});
//Control the clock of enemy planes var enemy = ("enemy");
setInterval(function() {
for (var i = 0; i < ; 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);
//Randomly generate enemy planes // setInterval(function(){
// var num=parseInt(()*4)+1;
// var rndwidth_stage=parseInt(()*parseInt($(stage).width()-45));
// $("<div class=\"enemy enemy"+num+"\"></div>").css({"left":rndwidth_stage}).appendTo("#stage")
// },1500);
//Array writing setInterval(function() {
var num = parseInt(() * 4) + 1;
var enemyW = [50, 67, 67, 67];
var rndwidth_stage = parseInt(() * $(stage)
.width()); //Display the three-wood operator (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);
//Animation time control for controlling bullets setInterval(function() {
if ($(".bullet").length == 0) return;
// After setting up the bullet and move it out of the screen, remove the bullet node
// $(".bullet").css({"top":parseFloat($(".bullet").css("top"))-10})
// // ($(this).css("top"))
// (parseFloat($(".bullet").css("top")));
//var bulltop=parseFloat($(".bullet[i]").css("top"));
//$(".bullet").css({"top":(bulltop-10)+"px"});
var bullet = $(".bullet");
// (bullet)
// for(var i=0;i<;i++){
// var bulltop=parseFloat($(bullet[i]).css("top"));
// $(bullet[i]).css({"top":(bulltop-10)+"px"});
// }
for (i = 0; i < ; i++) {
var tmp_bullet = parseFloat($(bullet[i]).css("top"));
// (tmp_bullet);
if (tmp_bullet < 0) {
$(bullet[i]).remove();
} else {
var bulltop = parseFloat($(bullet[i]).css("top"));
$(bullet[i]).css({
"top": (bulltop - 10) + "px"
});
}
};
}, bullets);
//Single monitoring of bullets setInterval(function() {
// var bullet=("bullet");
// Both writing methods are OK var bullet = $(".bullet");
// for(i=0;i<;i++){
// var tmp_bullet=parseFloat($(bullet[i]).css("top"));
// // (tmp_bullet);
// if(tmp_bullet<0){
// $(bullet[i]).remove();
// };
// };
}, 400);
//Remove the dom node if you leave the stage setInterval(function() {
for (i = 0; i < ; i++) {
var tmp_enemy = parseFloat($(enemy[i]).css("top"));
var tmp_stage = $(stage).height();
// (tmp_enemy);
// (typeof($(tmp_stage).height()));
if (tmp_enemy > tmp_stage) {
$(enemy[i]).remove();
// ("Removal successfully");
};
};
}, 500);
//The clock control monitors the value of the array pdirection var timerkey=monitorkey();
//The clock control indicates how many times each bullet is fired//The first method: keyboard simulation event// setInterval(function(){
// var e=("keypress");
// =" "
// $(document).trigger(e);
// },500)
//The second method directly calls the function function shoot(){
$("#mp3shoot")[0].currentTime=0;
$("#mp3shoot")[0].play();
pdirection[4] = 1;
// (parseFloat($(plain).css("top")))
// var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
// ($(plain).css("left"))
//(parseFloat($(plain).css("left")))
// (parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
//var bullety=parseFloat($(plain).css("top"))-bulleth;
// =+10
// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
// $("<div class=\"bullet\"></div>") Escape method //$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
//(pdirection[4]);
var bulletx = parseFloat($(plain).css("left")) + $(plain).width() / 2 - bulletw / 2;
// ($(plain).css("left"))
// (parseFloat($(plain).css("left")))
// (parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
var bullety = parseFloat($(plain).css("top")) - bulleth;
// =+10
// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
// $("<div class=\"bullet\"></div>") Escape method $("<div class='bullet'></div>").css({
"left": bulletx,
"top": bullety
}).appendTo(stage);
}
//Summary of the model // function kissAB(A,B){
// var iskiss=false;
// for(var i=0;i<;i++){
// for(var j=0;j<;j++){
// // var a=$(A[i]).height()/2+parseFloat($(A[i]).css("top"))-$(B[j]).height()/2-parseFloat($(B[j]).css("top"));
// // var b=$(B[j]).width()/2+parseFloat($(B[j]).css("left"))-$(A[i]).width()/2-parseFloat($(A[i]).css("left"));
// // //(a)
// // var c=$(A[i]).height()/2+$(B[j]).width()/2
// // (b);
// // if(a*a+b*b<c*c){
// // // $(B[j]).remove();
// // // $(A[i]).remove();
// // iskiss=true;
// // break;
// // }
// }
// }
// }
//Calling simulated keyboard function //var timerfire=setInterval(shoot,500);
//Define the animation of variable storage bullet launch var timerfire;
//Detection of collision
function kissAB(A,B){
var iskiss=false;
var a=$(A).height()/2+parseFloat($(A).css("top"))-$(B).height()/2-parseFloat($(B).css("top"));
var b=$(B).width()/2+parseFloat($(B).css("left"))-$(A).width()/2-parseFloat($(A).css("left"));
//(a)
var c=$(A).height()/2+$(B).width()/2-10;
//(b);
if(a*a+b*b<c*c){
// $(B[j]).remove();
// $(A[i]).remove();
iskiss=true;
}
return iskiss;
}
var timerkiss=monitorkiss();
function monitorkiss(){
//Get bullets //Detection of whether the bullets collided with the enemy plane return setInterval(function(){
var bullets=$(".bullet");
var enemys=$(".enemy");
for(var i=0;i<;i++){
for(var j=0;j<;j++){
// var a=$(bullets[i]).height()/2+parseFloat($(bullets[i]).css("top"))-$(enemys[j]).height()/2-parseFloat($(enemys[j]).css("top"));
// var b=$(enemys[j]).width()/2+parseFloat($(enemys[j]).css("left"))-$(bullets[i]).width()/2-parseFloat($(bullets[i]).css("left"));
// //(a)
// var c=$(bullets[i]).height()/2+$(enemys[j]).width()/2
// (b);
// if(a*a+b*b<c*c){
// $(enemys[j]).remove();
// $(bullets[i]).remove();
// break;
//("aaa")
// }
if (kissAB(bullets[i],enemys[j])){
//("ttt")
$("#mp3destroy")[0].play();
$(enemys[j]).remove();
$(bullets[i]).remove();
break;
}
}
}
//Detection whether the player collided with the enemy plane for(var j=0;j<;j++){
if(kissAB(plain,enemys[j])){
alert("game over");
gameover();
break;
}
}
},1);
}
function monitorkey(){
return setInterval(function() {
//Move upward //Default direction up right down left if (pdirection[0] == 1) {
// (parseFloat($(plain).css("top")))
if (parseFloat($(plain).css("top")) >= 5)
// =+10
$(plain).css({
"top": parseFloat($(plain).css("top")) - move
});
else
$(plain).css({"top":0});
// move++
}
if (pdirection[2] == 1) { //Move down // (parseFloat($(plain).css("top")))
if (parseFloat($(plain).css("top")) <= 513)
// =+10
$(plain).css({
"top": parseFloat($(plain).css("top")) + move
});
else
$(plain).css({"top":$(stage).Height-$(plain).Height});
// move++
}
if (pdirection[3] == 1) { //Move to the left // (parseFloat($(plain).css("top")))
if (parseFloat($(plain).css("left")) >= -10)
// =+10
$(plain).css({
"left": parseFloat($(plain).css("left")) - move
});
// move++
}
if (pdirection[1] == 1) { //Move to the right // (parseFloat($(plain).css("top")))
if (parseFloat($(plain).css("left")) <= 270)
// =+10
//(parseFloat($(plain).css("right")))
$(plain).css({
"left": parseFloat($(plain).css("left")) + move
});
// move++
}
if (pdirection[4] == 1) { //The shell moves upward // (parseFloat($(plain).css("top")))
//var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
// ($(plain).css("left"))
// (parseFloat($(plain).css("left")))
// (parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
//var bullety=parseFloat($(plain).css("top"))-bulleth;
// =+10
// $(plain).css({"left":parseFloat($(plain).css("left"))+move});
// move++
// $("<div class=\"bullet\"></div>") Escape method //$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
}
}, 1);
}
// Load background music // $("#mp3bg").play();
var mp3bg=("mp3bg");
// var timerbg= setInterval(function(){
// =0;
// //
// ();
// clearInterval(timerbg);
// })
$("#buttonmusic").click();
$("#buttonmusic").click(function(){
if($(this).html()=="music"){
$(this).html("pause");
//=0;
//
();
//clearInterval(timerbg);
}else{
//=0;
//
();
$(this).html("music");
}
})
function startgame(){
//Collision detection begins timerkiss=monitorkiss();
//Reset the direction keyboard (pdirection);
pdirection = [0, 0, 0, 0, 0];
//Generate the player plane // var timertmp=setInterval(function(){
//var aa=$(stage).height()-$(plain).height()*2
//(aa)
// if(parseFloat($(plain).css("top"))<($(stage).height()-$(plain).height()*2)){
// //alert("33");
// ("666");
// clearInterval(timertmp);
// }else
// ="top:"+(parseFloat($(plain).css("top"))-5)+"px;left:"+$(stage).width()/2-$(plain).width()/2+"px;";
// });
}
function gameover(){
//Collision detection stops clearInterval(timerkiss);
// alert("gameover");
//Remove the player's plane // ();
//Remove player plane using hidden method //=true;
//Remove all enemy planes $(".enemy").remove();
// (pdirection)
//Remove the player's plane and use the hidden method // $(plain).hide();
="top:"+$(stage).height()+"px;left:"+($(stage).width()/2-$(plain).width()/2+"px");
if(confirm("You can't afford to play, you little trash, you don't have the strength")){
startgame();
}
//Reset the direction keyboard pdirection = [0, 0, 0, 0, 0];
}
});
// Chapter 2 Picture// $(function(){
// //When writing code here, you can control all htmldom nodes// //dom
// var stage=("stage"); //Get the stage node// var bg2=("bg2")[0];//Get background image// // (bg1) // Check whether bg1 is captured// var topval=-968;
// // ="top: -30px;"
// var t2=setInterval(function(){
// // ("ddd")
// // ()
// // =+10;
// ="top: "+topval+"px";
// topval+=1
// //topval++ background moves downward
// },70);
// // (); // Clock stops
// });
// alert("4444") If you do not use jq, you cannot fully load the pop-up box.
// function myapp(){
// Define the basic format of the function
// }
// function xxxx (){
// // ("ddd")
// ()
// // =+10;
// ="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 */
.bullet{
background-image: url(../img/bullet_01.png);
width: 50px;
height: 65px;
position: absolute;
/* z-index: 10; */
}
/* Button */
.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;
}The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.