首页
所有分类
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 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
javascript中expression的用法整理
May 13 Javascript
JS中字符串trim()使用示例
May 26 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
xmlplus组件设计系列之选项卡（Tabbar)（5）
May 03 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
express express-session的使用小结
Dec 12 Javascript
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
高放电路(1) 发烧友(1) 灵敏度(1) 实习报告(1) 鉴频器(1) 频率(1) 数调机(1) 频偏(1) 手调机(1) AM(1)
You might like
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
javascript实现数独解法
2015/03/14 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python文件处理
2016/02/29 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
大学应届生的自我评价
2014/03/06 职场文书
PyCharm 安装与使用配置教程（windows,mac通用）
2021/05/12 Python
Python实现排序方法常见的四种
2021/07/15 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
2022微信温控新功能上线
2022/05/09 数码科技