HTML5全民飞机大战网页小游戏源码-大资源网

资源介绍
更新记录
安装教程

HTML5全民飞机大战网页小游戏源码，html+js实现飞机大战网页小游戏，玩法比较为简单，左右移动鼠标打击，不让前面的小飞机经过。飞机掉落速度越来越快，游戏结束后有分数显示，可以用来做分数比拼。

1、html页面代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>HTML5全民飞机大战小游戏 – bokequ.com</title>
<style>
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
background-image: linear-gradient(#2C3E50,#4CA1AF);

}

.canvasbig {
position: absolute;
left: calc(50% – 260px);
top: calc(50% – 400px);
width: 520px;
height: 800px;

}

.canvasdiv {
position: absolute;
cursor: pointer;
left: 160px;
top: 500px;
width: 200px;
height: 53px;
background-image: url(img/starting.png);
}

.none {
display: none;
}
</style>
</head>
<body>
<!– <script src=”js/circle.js”></script> –>
<div class=”canvasbig”>
<div class=”canvasdiv”></div>
<canvas width=”520″ height=”800″ id=”canvas1″></canvas>
</div>
<script src=”js/index.js”></script>
</body>
</html>

2、js代码

var canvas1 = document.getElementById(“canvas1”);
var context = canvas1.getContext(‘2d’);
var canvasbig = document.getElementsByClassName(“canvasbig”)[0];
//背景图片
var bg = new Image();
bg.src = “img/bg.jpg”;
//全民飞机大战标题
var starthead = new Image();
starthead.src = “img/starthead.png”;
//加载时候的狗子和文字
var load = new Image();
var loadnum = 1,
loadtime = 0,
loadrect = 1;
var loadtextblur = true,
loadtextnum = –1,
pointnum = 1;
//我方战斗机
var myplane = new Image();
myplane.src = “img/myplane1.png”;
var myplaneX = canvas1.width / 2,
myplaneY = 730;
//战斗机子弹
var bullet = new Image();
bullet.src = “img/bullet.png”;
var bullettime = 0,
bulletnum = 0,
bulletarr = [];
//敌机
var enemytime = 0,
enemyarr = [];
var enemy1 = new Image();
enemy1.src = `img/enemy1.png`;
var enemy2 = new Image();
enemy2.src = `img/enemy2.png`;
var enemy3 = new Image();
enemy3.src = `img/enemy3.png`;
var enemy4 = new Image();
enemy4.src = `img/enemy4.png`;
var enemyall = [enemy1, enemy2, enemy3, enemy4];
//战斗机爆炸
var myplane1boom = new Image();
var myboomnum = 1,
myboomtime = 0;
//敌机爆炸
var enemychangearr = [];
//boss警告
var warning1 = new Image();
warning1.src = “img/warning1.png”
var warning2 = new Image();
warning2.src = “img/warning2.png”;
var warningtime = 0,
warningchange = 0;
//boss出场背景
var bossbg = new Image();
bossbg.src = “img/bg2.jpg”;
var boss = new Image();
boss.src = “img/planeboss.png”;
//boss改变飞机速度
var bossattacktime = 0;
var bossattacknum = 1;
var obj = {
gamestart: 1,
gameload: 0,
gamerun: 0,
gameover: 0,
dead: 0,
score: 0,
life: 3,
bgy1: –854,
bgy2: 0,
warnon: 0,
bosstime: 0,
bossattack: 0,
bgon: function () {
context.drawImage(bg, 0, this.bgy1, 520, 854);
context.drawImage(bg, 0, this.bgy2, 520, 854);
},
bgchange: function () {
this.bgy1++;
this.bgy2++;
if (this.bgy1 == 0) {
this.bgy1 = –854;
this.bgy2 = 0;
}
},
scoring: function () {
var gradient = context.createLinearGradient(0, 0, 120, 60);
gradient.addColorStop(0, ‘#ff9569’);
gradient.addColorStop(1, ‘#e92758’);
context.font = ’30px sans-serif’;
context.fillStyle = gradient;
context.fillText(“SCORE:” + this.score, 10, 50);
},
lifeing: function () {
context.font = ’30px sans-serif’;
context.fillStyle = “#D28140”;
context.fillText(“LIFE:” + this.life, 400, 50);
if (obj.dead == 1 && myboomnum == 9 && obj.life > 0) {
obj.dead = 0;
bullettime = 0;
bulletnum = 0;
bulletarr = [];
enemytime = 0;
enemyarr = [];
myboomnum = 1;
myboomtime = 0;
enemychangearr = [];
myplane1boom.src = `img/myplane1boom${myboomnum}.png`;
} else if (obj.dead == 1 && obj.life == 0) {
obj.gameover = 1;
}
},
gameovering: function () {
if (obj.gameover == 1) {
obj.gamestart = 1;
obj.gameover = 0;
obj.dead = 0;
obj.gamerun = 0;
}
},
starting: function () {
canvasdiv.className = “canvasdiv”;
obj.life = 3;
obj.score = 0;
loadnum = 1;
loadtime = 0;
loadrect = 1;
loadtextblur = true;
loadtextnum = –1;
pointnum = 1;
myplaneX = canvas1.width / 2;
myplaneY = 730;
bullettime = 0;
bulletnum = 0;
bulletarr = [];
enemytime = 0;
enemyarr = [];
myboomnum = 1;
myboomtime = 0;
enemychangearr = [];
warningtime = 0;
warningchange = 0;
bossattacktime = 0;
bossattacknum = 1;
obj.bossbgy1 = –2420,
obj.bossbgy2 = –1640,
obj.bossbgy3 = –860,
obj.bg2boss = –262,
obj.bosstimeblur = true,
obj.bossattack = 0;
context.drawImage(starthead, 110, 200);
},
loading: function () {
loadtime++;
loadrect++;
if (loadtime == 5) {
loadtime = 0;
loadnum++;
if (loadnum == 10) {
loadnum = 1;
}
load.src = `img/load${loadnum}.png`;
}
context.beginPath();
context.fillStyle = ‘white’;
context.fillRect(0, 0, 520, 800);
var gradient = context.createLinearGradient(20, 500, 397, 30);
gradient.addColorStop(0, ‘#29bdd9’);
gradient.addColorStop(1, ‘#276ace’);
context.fillStyle = gradient;
context.fillRect(20, 500, loadrect, 30);
context.closePath();
context.drawImage(load, loadrect + 20, 480, 102, 72);
},
loadtext: function () {
if (loadtextblur == false) {
loadtextnum–;
} else if (loadtextblur == true) {
loadtextnum += 2;
}
context.beginPath();
context.font = ’40px sans-serif’;
context.fillStyle = ‘black’;
context.fillText(“加载中 “, 50, 450);
context.beginPath();
context.font = ’80px sans-serif’;
if (pointnum == 1) {
context.fillText(“. “, 200, 450 – loadtextnum);
context.fillText(“. “, 240, 450);
context.fillText(“. “, 280, 450);
if (loadtextnum < 0) {
pointnum = 2;
loadtextnum = 0;
loadtextblur = true;
} else if (loadtextnum > 39) {
loadtextblur = false;
}
} else if (pointnum == 2) {
context.fillText(“. “, 200, 450);
context.fillText(“. “, 240, 450 – loadtextnum);
context.fillText(“. “, 280, 450);
if (loadtextnum < 0) {
pointnum = 3;
loadtextnum = 0;
loadtextblur = true;
} else if (loadtextnum > 39) {
loadtextblur = false;
}
} else if (pointnum == 3) {
context.fillText(“. “, 200, 450);
context.fillText(“. “, 240, 450);
context.fillText(“. “, 280, 450 – loadtextnum);
if (loadtextnum < 0) {
pointnum = 1;
loadtextnum = 0;
loadtextblur = true;
} else if (loadtextnum > 39) {
loadtextblur = false;
}
}
context.closePath();
},
myplane: function (e) {
myplaneX = e.offsetX;
myplaneY = e.offsetY;
context.drawImage(myplane, myplaneX – myplane.width / 2, myplaneY – myplane.height / 2);
},
bulleton: function () {
bullettime++;
var bulletX = myplaneX – bullet.width / 2;
var bulletY = myplaneY – myplane.height / 2 – bullet.height;
var num;
if (obj.bossattack == 1) {
num = 10
}else{
num = 20
}
if (bullettime >= num) {
var changearr = [bulletX, bulletY, 0];
bulletarr.push(changearr);
bullettime = 0;
}
},
bulletchange: function () {
var result = [];
for (var i = 0; i < bulletarr.length; i++) {
if (bulletarr[i][1] – bulletarr[i][2] >= 0) {
context.drawImage(bullet, bulletarr[i][0], bulletarr[i][1] – bulletarr[i][2]);
bulletarr[i][2] += 4;
result.push(bulletarr[i]);
}
}
bulletarr = result;
},
enemy: function () {
enemytime++;
var enemynum = parseInt(Math.random() * 4);
if (obj.bossattack == 1) {
num = 10
}else{
num = 25
}
if (enemytime >= num) {
if (enemynum == 3 && Math.random() < 0.9) {
return;
} else {
var enemylife = 1
if (enemynum == 3) {
enemylife = 5
}
var changearr = [Math.random() * 520 – enemyall[enemynum].width / 2, –enemyall[enemynum].height, 0, enemynum, enemylife];
enemyarr.push(changearr);
enemytime = 0;
}
}
},
enemychange: function () {
var result = [];
if (obj.bossattack == 1) {
bossattacktime++;
if (bossattacktime == 80) {
bossattacknum += 0.05;
bossattacktime = 0;
}
}
for (let i = 0; i < enemyarr.length; i++) {
if (enemyarr[i][1] + enemyarr[i][2] <= canvas1.height) {
context.drawImage(enemyall[enemyarr[i][3]], enemyarr[i][0], enemyarr[i][1] + enemyarr[i][2]);
if (enemyall[enemyarr[i][3]] == enemy4) {
enemyarr[i][2] += 1.5* bossattacknum;
} else {
enemyarr[i][2] += 2* bossattacknum;
}
result.push(enemyarr[i]);
}
}
enemyarr = result;
},
myplaneboom: function () {
obj.dead = 1;
myboomtime++;
if (myboomtime >= 10) {
myplane1boom.src = `img/myplane1boom${myboomnum}.png`;
myboomnum++;
myboomtime = 0;
}
context.drawImage(myplane1boom, myplaneX – myplane.width / 2, myplaneY – myplane.height / 2);
if (myboomnum == 9) {
obj.life -= 1;
bulletarr = [];
enemyarr = [];
myplaneX = canvas1.width / 2;
myplaneY = 750;
}
},
myplaneisbroke: function () {
for (let i = 0; i < enemyarr.length; i++) {
if (enemyarr[i][0] < myplaneX – myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] < myplaneY – myplane.height / 2 + myplane.height) {
if (enemyarr[i][0] + enemyall[enemyarr[i][3]].width > myplaneX – myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] + enemyall[enemyarr[i][3]].height > myplaneY – myplane.height / 2) {
obj.myplaneboom();
}
} else if (enemyarr[i][0] > myplaneX – myplane.width / 2 && enemyarr[i][1] + enemyarr[i][2] < myplaneY – myplane.height / 2 + myplane.height) {
if (enemyarr[i][0] < myplaneX – myplane.width / 2 + myplane.width && enemyarr[i][1] + enemyarr[i][2] + enemyall[enemyarr[i][3]].height > myplaneY – myplane.height / 2) {
obj.myplaneboom();
}
}
}
},
enemyboom: function () {
var result = [];
for (let i = 0; i < enemychangearr.length; i++) {
enemychangearr[i][3]++;
if (enemychangearr[i][3] >= 10) {
enemychangearr[i][5].src = `img/enemy${enemychangearr[i][2]}boom${enemychangearr[i][4]}.png`;
enemychangearr[i][4]++;
enemychangearr[i][3] = 0;
}
context.drawImage(enemychangearr[i][5], enemychangearr[i][0], enemychangearr[i][1]);
if (enemychangearr[i][4] < 6) {
result.push(enemychangearr[i]);
}
};
enemychangearr = result;
},
enemyisbroke: function () {
for (let i = 0; i < bulletarr.length; i++) {
for (let x = 0; x < enemyarr.length; x++) {
if (bulletarr[i][0] < enemyarr[x][0] && bulletarr[i][1] – bulletarr[i][2] < enemyarr[x][1] + enemyarr[x][2] + enemyall[enemyarr[x][3]].height && bulletarr[i][1] – bulletarr[i][2] > enemyarr[x][1] + enemyarr[x][2]) {
if (bulletarr[i][0] + bullet.width > enemyarr[x][0]) {
enemyarr[x][4]–;
if (enemyarr[x][4] == 0) {
var enemyboom = new Image();
enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]);
if (enemyarr[x][3] == 3) {
obj.score += 10;
} else {
obj.score += 2;
}
enemyarr.splice(x, 1);
}
bulletarr.splice(i, 1);
}
} else if (bulletarr[i][0] > enemyarr[x][0] && bulletarr[i][1] – bulletarr[i][2] < enemyarr[x][1] + enemyarr[x][2] + enemyall[enemyarr[x][3]].height && bulletarr[i][1] – bulletarr[i][2] > enemyarr[x][1] + enemyarr[x][2]) {
if (bulletarr[i][0] < enemyarr[x][0] + enemyall[enemyarr[x][3]].width) {
enemyarr[x][4]–;
if (enemyarr[x][4] == 0) {
var enemyboom = new Image();
enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]);
if (enemyarr[x][3] == 3) {
obj.score += 10;
} else {
obj.score += 2;
}
enemyarr.splice(x, 1);
}
bulletarr.splice(i, 1);
}
}
}
}
},
warning: function () {
warningchange++;
warningtime++;
if (warningtime >= 20) {
context.drawImage(warning1, 150, 200);
context.drawImage(warning2, 190, 400);
if (warningtime >= 80) {
warningtime = 0;
}
}
if (warningchange == 500) {
obj.warnon = 0;
obj.bosstime = 1;
}
},
bossbgy1: –2420,
bossbgy2: –1640,
bossbgy3: –860,
bg2boss: –262,
bosstimeblur: true,
bossbgon: function () {
context.drawImage(bossbg, 0, this.bossbgy1)
context.drawImage(bossbg, 0, this.bossbgy2);
context.drawImage(bossbg, 0, this.bossbgy3);
if (obj.bosstime == 1) {
context.drawImage(boss, 0, this.bg2boss);
}
},
bossbgchange: function () {
this.bossbgy1 += 2;
this.bossbgy2 += 2;
this.bossbgy3 += 2;
this.bg2boss += 2;
if (this.bg2boss == 800) {
this.bosstime = 0;
this.bossattack = 1;
};
if (this.bossbgy3 == 800) {
this.bossbgy1 = –1540;
this.bossbgy2 = –760;
this.bossbgy3 = 20;
}
},
// bossY : -262,
// bossX : 0,
// bossfirstime : 0,
// bosssecondtime : 0,
// beatboss : function(){
// context.drawImage(boss,this.bossX,this.bossY);
// if(obj.bossY <= 0){
// obj.bossfirstime ++;
// if( obj.bossfirstime == 4){
// obj.bossY++;
// obj.bossfirstime = 0;
// }
// }else{
// obj.bosssecondtime++;
// if(obj.bosssecondtime == 2){
// obj.bossX++;
// obj.bossfirstime = 0;
// }
// }
// },
gua: function () {
enemychangearr = [];
for (let x = 0; x < enemyarr.length; x++) {
var enemyboom = new Image();
enemychangearr.push([enemyarr[x][0], enemyarr[x][1] + enemyarr[x][2], enemyarr[x][3] + 1, 0, 1, enemyboom]);
}
enemyarr = [];
}
}
setInterval(function () {
obj.bgon();
obj.bgchange();
if (obj.gamestart == 1) {
obj.starting();
}
if (obj.gameload == 1) {
if (loadrect >= 397) {
obj.gameload = 0;
obj.gamerun = 1;
}
obj.loading();
obj.loadtext();
}
if (obj.gamerun == 1) {
if (obj.score >= 300 && obj.bosstimeblur == true) {
obj.warnon = 1;
obj.gua();
obj.bosstimeblur = false;
}
if (obj.bosstime == 1 || obj.bossattack == 1) {
obj.bossbgon();
obj.bossbgchange();
}
if (obj.dead == 0) {
context.drawImage(myplane, myplaneX – myplane.width / 2, myplaneY – myplane.height / 2);
if (obj.bosstime == 0 && obj.warnon == 0) {
obj.enemy();
obj.enemychange();
}
obj.bulleton();
obj.bulletchange();
if (obj.warnon == 1) {
obj.warning();
}
}
obj.myplaneisbroke();
obj.enemyisbroke();
obj.enemyboom();
obj.lifeing();
obj.gameovering();
obj.scoring();
}
}, 10)
var canvasdiv = document.getElementsByClassName(“canvasdiv”)[0];
canvasdiv.onclick = function () {
canvasdiv.className = “canvasdiv none”;
obj.gamestart = 0;
obj.gameload = 1;
}
canvas1.onmousemove = function (e) {
if (obj.gamerun == 1 && obj.dead == 0) {
obj.myplane(e);
this.style.cursor = “none”;
} else {
this.style.cursor = “”;
}
}
document.onkeydown = function (event) {
if (event.keyCode == 8 && obj.gamerun == 1) {
obj.gua();
};
}

HTML5全民飞机大战小游戏是一款突破经典的飞行射击类精品网页小游戏，鼠标操作。

猜你在找

全民飞机大战网页小游戏源码

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。

大资源: 一个高级程序员模板开发平台

大资源网会员

分享到：

2026-06-05Hi,初次和大家见面了,请多关照！

售后服务范围	1、商业模板使用范围内问题免费咨询
	2、源码安装、模板安装（一般 ¥50-300）服务答疑仅限SVIP用户
	3、单价超过200元的模板免费一次安装，需提供服务器信息。

付费增值服务	1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
	2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务

	3、服务器环境配置（一般 ¥50-300）
	4、网站的问题处理（需额外付费，500元/次/质保三个月）
售后服务时间	周一至周日（法定节假日除外） 9:00-23:00
免责声明	本站所提供的模板（主题/插件）等资源仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，有部分资源为网上收集或仿制而来，若模板侵犯了您的合法权益，请来信通知我们（Email: 3482249445@qq.com），我们会及时删除，给您带来的不便，我们深表歉意！

猜你喜欢

猜你在找

常见问题FAQ

大资源网 会员

发表评论 取消回复

售后服务：

Hi, 如果你对这款模板有疑问，可以跟我联系哦！

升级SVIP会员

联系我们

大资源网会员

发表评论取消回复