首页
所有分类
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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
jQuery 表单验证扩展(三)
Oct 20 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
详解Vue中使用插槽（slot）、聚类插槽
Apr 12 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
详解Vue router路由
Nov 20 Vue.js
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) json_extract(1) 加密(1) Launch Mode(1) netty(1) apt命令(1) JOIN(1) NoSQL(1) Pickle(1) logging(1)
You might like
深入了解php4(2)--重访过去
2006/10/09 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
javascript 弹出层组件（升级版）
2011/05/12 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
python中的sort方法使用详解
2014/07/25 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python编程嵌套函数实例代码
2018/02/11 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
凯伦·米莲女装网上商店：Karen Millen
2017/11/07 全球购物
.net面试题
2016/09/17 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
初三学生个人自我评定
2014/04/06 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
个性婚礼策划方案
2014/05/17 职场文书
软环境建设心得体会
2014/09/09 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
群众路线剖析材料（四风）
2014/11/05 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
公司董事任命书
2015/09/21 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android