首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现飞机大战小游戏

Posted in Javascript onAugust 26, 2020

本文实例为大家分享了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="js/main.js"></script>
</body>
</html>

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="image/我的飞机.gif";
plan.call(this,1,X,Y,66,80,0,660,0,"image/本方飞机爆炸.gif",imagesrc);
this.imagenode.setAttribute('id','ourplan');
}
 
/*
创建本方飞机
*/
var selfplan=new ourplan(120,485);
//移动事件
var ourPlan=document.getElementById('ourplan');
var yidong=function(){
var oevent=window.event||arguments[0];
var chufa=oevent.srcElement||oevent.target;
var selfplanX=oevent.clientX-500;
var selfplanY=oevent.clientY;
ourPlan.style.left=selfplanX-selfplan.plansizeX/2+"px";
ourPlan.style.top=selfplanY-selfplan.plansizeY/2+"px";
// document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px";
// document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px";
}
/*
暂停事件
*/
var number=0;
var zanting=function(){
if(number==0){
suspenddiv.style.display="block";
if(document.removeEventListener){
mainDiv.removeEventListener("mousemove",yidong,true);
bodyobj.removeEventListener("mousemove",bianjie,true);
}
else if(document.detachEvent){
mainDiv.detachEvent("onmousemove",yidong);
bodyobj.detachEvent("onmousemove",bianjie);
}
clearInterval(set);
number=1;
}
else{
suspenddiv.style.display="none";
if(document.addEventListener){
mainDiv.addEventListener("mousemove",yidong,true);
bodyobj.addEventListener("mousemove",bianjie,true);
}
else if(document.attachEvent){
mainDiv.attachEvent("onmousemove",yidong);
bodyobj.attachEvent("onmousemove",bianjie);
}
set=setInterval(start,20);
number=0;
}
}
//判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件
var bianjie=function(){
var oevent=window.event||arguments[0];
var bodyobjX=oevent.clientX;
var bodyobjY=oevent.clientY;
if(bodyobjX<505||bodyobjX>815||bodyobjY<0||bodyobjY>568){
if(document.removeEventListener){
mainDiv.removeEventListener("mousemove",yidong,true);
}
else if(document.detachEvent){
mainDiv.detachEvent("onmousemove",yidong);
}
}
else{
if(document.addEventListener){
mainDiv.addEventListener("mousemove",yidong,true);
}
else if(document.attachEvent){
mainDiv.attachEvent("nomousemove",yidong);
}
}
}
//暂停界面重新开始事件
//function chongxinkaishi(){
// location.reload(true);
// startdiv.style.display="none";
// maindiv.style.display="block";
//}
var bodyobj=document.getElementsByTagName("body")[0];
if(document.addEventListener){
//为本方飞机添加移动和暂停
mainDiv.addEventListener("mousemove",yidong,true);
//为本方飞机添加暂停事件
selfplan.imagenode.addEventListener("click",zanting,true);
//为body添加判断本方飞机移出边界事件
bodyobj.addEventListener("mousemove",bianjie,true);
//为暂停界面的继续按钮添加暂停事件
suspenddiv.getElementsByTagName("button")[0].addEventListener("click",zanting,true);
// suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true);
//为暂停界面的返回主页按钮添加事件
suspenddiv.getElementsByTagName("button")[2].addEventListener("click",jixu,true);
}
else if(document.attachEvent){
//为本方飞机添加移动
mainDiv.attachEvent("onmousemove",yidong);
//为本方飞机添加暂停事件
selfplan.imagenode.attachEvent("onclick",zanting);
//为body添加判断本方飞机移出边界事件
bodyobj.attachEvent("onmousemove",bianjie);
//为暂停界面的继续按钮添加暂停事件
suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick",zanting);
// suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true);
//为暂停界面的返回主页按钮添加事件
suspenddiv.getElementsByTagName("button")[2].attachEvent("click",jixu,true);
}
//初始化隐藏本方飞机
selfplan.imagenode.style.display="none";
 
/*
敌机对象数组
*/
var enemys=[];
 
/*
子弹对象数组
*/
var bullets=[];
var mark=0;
var mark1=0;
var backgroundPositionY=0;
/*
开始函数
*/
function start(){
mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
backgroundPositionY+=0.5;
if(backgroundPositionY==568){
backgroundPositionY=0;
}
mark++;
/*
创建敌方飞机
*/
 
if(mark==20){
mark1++;
//中飞机
if(mark1%5==0){
enemys.push(new enemy(6,25,274,46,60,5000,360,random(1,3),"image/中飞机爆炸.gif","image/enemy3_fly_1.png"));
}
//大飞机
if(mark1==20){
enemys.push(new enemy(12,57,210,110,164,30000,540,1,"image/大飞机爆炸.gif","image/enemy2_fly_1.png"));
mark1=0;
}
//小飞机
else{
enemys.push(new enemy(1,19,286,34,24,1000,360,random(1,4),"image/小飞机爆炸.gif","image/enemy1_fly_1.png"));
}
mark=0;
}
 
/*
移动敌方飞机
*/
var enemyslen=enemys.length;
for(var i=0;i<enemyslen;i++){
if(enemys[i].planisdie!=true){
enemys[i].planmove();
}
/*
如果敌机超出边界,删除敌机
*/
if(enemys[i].imagenode.offsetTop>568){
mainDiv.removeChild(enemys[i].imagenode);
enemys.splice(i,1);
enemyslen--;
}
//当敌机死亡标记为true时，经过一段时间后清除敌机
if(enemys[i].planisdie==true){
enemys[i].plandietimes+=20;
if(enemys[i].plandietimes==enemys[i].plandietime){
mainDiv.removeChild(enemys[i].imagenode);
enemys.splice(i,1);
enemyslen--;
}
}
}
 
/*
创建子弹
*/
if(mark%5==0){
bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+31,parseInt(selfplan.imagenode.style.top)-10));
}
 
/*
移动子弹
*/
var bulletslen=bullets.length;
for(var i=0;i<bulletslen;i++){
bullets[i].bulletmove();
/*
如果子弹超出边界,删除子弹
*/
if(bullets[i].bulletimage.offsetTop<0){
mainDiv.removeChild(bullets[i].bulletimage);
bullets.splice(i,1);
bulletslen--;
}
}
 
/*
碰撞判断
*/
for(var k=0;k<bulletslen;k++){
for(var j=0;j<enemyslen;j++){
//判断碰撞本方飞机
if(enemys[j].planisdie==false){
if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){
//碰撞本方飞机，游戏结束，统计分数
selfplan.imagenode.src="image/本方飞机爆炸.gif";
enddiv.style.display="block";
planscore.innerHTML=scores;
if(document.removeEventListener){
mainDiv.removeEventListener("mousemove",yidong,true);
bodyobj.removeEventListener("mousemove",bianjie,true);
}
else if(document.detachEvent){
mainDiv.detachEvent("onmousemove",yidong);
bodyobj.removeEventListener("mousemove",bianjie,true);
}
clearInterval(set);
}
}
//判断子弹与敌机碰撞
if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){
if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){
//敌机血量减子弹攻击力
enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach;
//敌机血量为0，敌机图片换为爆炸图片，死亡标记为true，计分
if(enemys[j].planhp==0){
scores=scores+enemys[j].planscore;
scorelabel.innerHTML=scores;
enemys[j].imagenode.src=enemys[j].planboomimage;
enemys[j].planisdie=true;
}
//删除子弹
mainDiv.removeChild(bullets[k].bulletimage);
bullets.splice(k,1);
bulletslen--;
break;
}
}
}
}
}
}
/*
开始游戏按钮点击事件
*/
var set;
function begin(){
 
startdiv.style.display="none";
mainDiv.style.display="block";
selfplan.imagenode.style.display="block";
scorediv.style.display="block";
/*
调用开始函数
*/
set=setInterval(start,20);
}
//游戏结束后点击继续按钮事件
function jixu(){
location.reload(true);
}
 
/*
完成界面的初始化
敌方小飞机一个
我方飞机一个
*/

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;
}

更多有趣的经典小游戏实现专题，分享给大家：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现飞机大战小游戏

- Author -

张张张的博客

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
JS event使用方法详解
Apr 28 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
javascript中this指向详解
Apr 23 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
JS面向对象实现飞机大战
Aug 26 #Javascript
JavaScript Image对象实现原理实例解析
Aug 26 #Javascript
js实现飞机大战游戏
Aug 26 #Javascript
JS+Canvas实现五子棋游戏
Aug 26 #Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 #Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 #Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 #Javascript
flex-shrink(1) 代理(2) 外键(1) 选择器(1) flex(1) 克隆(1) SQL注入(2) #{}(1) canvas(2) 图片模糊(1)
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
React styled-components设置组件属性的方法
2018/08/07 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
如何利用Python写个坦克大战
2020/11/18 Python
在线服装零售商：SheIn
2016/07/22 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
运动会入场词50字
2014/02/20 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
英文辞职信范文
2015/05/13 职场文书
品德与社会教学反思
2016/02/24 职场文书
公司转让协议书
2016/03/19 职场文书
党员公开承诺书2016
2016/03/24 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
python接口测试返回数据为字典取值方式
2022/02/12 Python
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技