js实现飞机大战小游戏
(编辑：jimmy 日期: 2024/11/27 浏览：3 次 )
本文实例为大家分享了js实现飞机大战游戏的具体代码，供大家参考，具体内容如下
1.html代码
<html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div id="contentdiv"> <div id="startdiv"> <button οnclick="begin()">开始游戏</button> </div> <div id="maindiv"> <div id="scorediv"> <label>分数：</label> <label id="label">0</label> </div> <div id="suspenddiv"> <button>继续</button><br/> <button>重新开始</button><br/> <button>回到主页</button> </div> <div id="enddiv"> <p>飞机大战分数</p> <p id="planscore">0</p> <div><button οnclick="jixu()">继续</button></div> </div> </div> </div> <script type="text/javascript" src="/UploadFiles/2021-04-02/main.js">2.js主要代码
//获得主界面 var mainDiv=document.getElementById("maindiv"); //获得开始界面 var startdiv=document.getElementById("startdiv"); //获得游戏中分数显示界面 var scorediv=document.getElementById("scorediv"); //获得分数界面 var scorelabel=document.getElementById("label"); //获得暂停界面 var suspenddiv=document.getElementById("suspenddiv"); //获得游戏结束界面 var enddiv=document.getElementById("enddiv"); //获得游戏结束后分数统计界面 var planscore=document.getElementById("planscore"); //初始化分数 var scores=0; /* 创建飞机类 */ function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ this.planX=X; this.planY=Y; this.imagenode=null; this.planhp=hp; this.planscore=score; this.plansizeX=sizeX; this.plansizeY=sizeY; this.planboomimage=boomimage; this.planisdie=false; this.plandietimes=0; this.plandietime=dietime; this.plansudu=sudu; //行为 /* 移动行为 */ this.planmove=function(){ if(scores<=50000){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px"; } else if(scores>50000&&scores<=100000){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+1+"px"; } else if(scores>100000&&scores<=150000){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+2+"px"; } else if(scores>150000&&scores<=200000){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+3+"px"; } else if(scores>200000&&scores<=300000){ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+4+"px"; } else{ this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+5+"px"; } } this.init=function(){ this.imagenode=document.createElement("img"); this.imagenode.style.left=this.planX+"px"; this.imagenode.style.top=this.planY+"px"; this.imagenode.src=imagesrc; mainDiv.appendChild(this.imagenode); } this.init(); } /* 创建子弹类 */ function bullet(X,Y,sizeX,sizeY,imagesrc){ this.bulletX=X; this.bulletY=Y; this.bulletimage=null; this.bulletattach=1; this.bulletsizeX=sizeX; this.bulletsizeY=sizeY; //行为 /* 移动行为 */ this.bulletmove=function(){ this.bulletimage.style.top=this.bulletimage.offsetTop-20+"px"; } this.init=function(){ this.bulletimage=document.createElement("img"); this.bulletimage.style.left= this.bulletX+"px"; this.bulletimage.style.top= this.bulletY+"px"; this.bulletimage.src=imagesrc; mainDiv.appendChild(this.bulletimage); } this.init(); } /* 创建单行子弹类 */ function oddbullet(X,Y){ bullet.call(this,X,Y,6,14,"image/bullet1.png"); } /* 创建敌机类 */ function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ plan.call(this,hp,random(a,b),-100,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc); } //产生min到max之间的随机数 function random(min,max){ return Math.floor(min+Math.random()*(max-min)); } /* 创建本方飞机类 */ function ourplan(X,Y){ var imagesrc="/UploadFiles/2021-04-02/我的飞机.gif">3.css样式
*{ margin: 0; padding: 0; } #contentdiv{ position: absolute; left: 500px; } #startdiv{ width: 320px; height: 568px; background-image: url(../image/开始背景.png); } button{ outline: none; } #startdiv button{ position: absolute; top: 500px; left: 82px; width: 150px; height: 30px; border: 1px solid black; border-radius: 30px; background-color: #c4c9ca; } #maindiv{ width: 320px; height: 568px; background-image:url(../image/background_1.png) ; display: none; } #maindiv img{ position: absolute; z-index: 1; } #scorediv{ font-size: 16px; font-weight: bold; position: absolute; top: 10px; left: 10px; display: none; } #scorediv{ font-size: 18px; font-weight: bold; } #suspenddiv{ position: absolute; top: 210px; left: 82px; display: none; z-index: 2; } #suspenddiv button{ width: 150px; height: 30px; margin-bottom: 20px; border: 1px solid black; border-radius: 30px; background-color: #c4c9ca; } #enddiv{ position: absolute; top: 210px; left: 75px; border: 1px solid gray; border-radius: 5px; text-align: center; background-color:#d7ddde; display: none; z-index: 2; } .plantext{ width: 160px; height: 30px; line-height: 30px; font-size: 16px; font-weight: bold; } #planscore{ width: 160px; height: 80px; line-height: 80px; border-top: 1px solid gray; border-bottom: 1px solid gray; font-size: 16px; font-weight: bold; } #enddiv div{ width: 160px; height: 50px; } #enddiv div button{ margin-top:10px ; width: 90px; height: 30px; border: 1px solid gray; border-radius: 30px; }更多有趣的经典小游戏实现专题，分享给大家：
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
java经典小游戏汇总
javascript经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：JS面向对象实现飞机大战