链接:https://pan.baidu.com/s/1T-fO7b9em1gCzM7SaZkZrw
提取码:u1ef
复制这段内容后打开百度网盘手机App,操作更方便哦
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雷霆战机</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <canvas id="canvas" width="480" height="650"></canvas> -->
<div id="canvas"></div>
<div class="background" id="background">
<div class="btn" id="btn"></div>
</div>
<!-- <div class="hero" id="hero"></div> -->
</body>
<script src="index.js"></script>
<!-- <script src="myplane.js"></script> -->
</html>
style.css
.loading{
background-image: url(start_logo.jpg);
width: 512px;
height: 768px;
position: absolute;
left: 500px;
top: 0px;
}
.small{
background-image: url(enemy1.png);
width: 80px;
height: 115px;
position: absolute;
left: 0px;
top: 0px;
}
.mid{
background-image: url(enemy2.png);
width: 102px;
height: 79px;
position: absolute;
left: 0px;
top: 0px;
}
.big{
background-image: url(super_boss.png);
width: 200px;
height: 302px;
position: absolute;
left: 0px;
top: 0px;
}
.hero{
background-image: url(hero.png);
width: 117px;
height: 120px;
position: absolute;
left: 700px;
top: 600px;
}
.background{
background-image: url(bg.jpg);
width: 512px;
height: 768px;
position: absolute;
left: 500px;
top: 0px;
}
.bullet{
background-image: url(bullet.png);
width: 31px;
height: 68px;
position: absolute;
left:0px;
top: 0px;
}
.give{
background-image: url(supply.png);
width: 40px;
height: 41px;
position: absolute;
left:0px;
top: 0px;
}
.btn{
width: 512px;
height: 768px;
margin: 20px auto;
text-align: center;
line-height: 60px;
font-size: 26px;
cursor: pointer;
}
.boom{
background-image: url(轰雷击1.png);
width: 533px;
height: 533px;
position: absolute;
left:0px;
top: 0px;
}
.boom1{
background-image: url(boom1.png);
width: 80px;
height: 120px;
position: absolute;
left:0px;
top: 0px;
}
.boom2{
background-image: url(boom2.png);
width: 94px;
height: 119px;
position: absolute;
left:0px;
top: 0px;
}
.boom3{
background-image: url(boom3.png);
width: 90px;
height: 120px;
position: absolute;
left:0px;
top: 0px;
}
.boom4{
background-image: url(boom4.png);
width: 81px;
height: 120px;
position: absolute;
left:0px;
top: 0px;
}
.boom5{
background-image: url(boom5.png);
width: 78px;
height: 120px;
position: absolute;
left:0px;
top: 0px;
}
.boom6{
background-image: url(boom6.png);
width: 71px;
height: 120px;
position: absolute;
left:0px;
top: 0px;
}
index.js
var enemys1 = [];
var enemys2 = [];
var enemys3 = [];
var score=0;
var canvas = document.getElementById("canvas");
// var context = canvas.getContext("2d");
function random(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function paintText(){
// canvas.clearRect(20,20,480,685);
// canvas.font = "bold 30px 微软雅黑";
canvas.innerHTML = "SCORE:" + score;
}
var cont = document.getElementById("background");
// 选择按钮元素
var btn = document.getElementById("btn");
btn.onclick = function(){
begin();
}
function begin(){
myPlane.init();
myPlane.fire();
paintText();
setInterval(() => {
var t=new enemy1();
enemys1.push(t);
}, 2000);
setInterval(() => {
var t=new enemy2();
enemys2.push(t);
}, 3000);
setInterval(() => {
var t=new enemy3();
enemys3.push(t);
}, 7000);
setInterval(() => {
new give();
}, 5000);
}
class Bullet{
constructor(){
// 选择容器
this.cont = document.getElementById("background");
// 创建子弹元素
this.bulletEle = document.createElement("div");
this.bulletEle.className = "bullet";
this.cont.appendChild(this.bulletEle);
// 设置子弹的初始位置
this.bulletEle.style.left = myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth/2 - this.bulletEle.offsetWidth/2 + "px";
this.bulletEle.style.top = myPlane.meElement.offsetTop - this.bulletEle.offsetHeight + "px";
// 开始运动
this.move();
}
move(){
var that = this;
// 开启计时器
that.t = setInterval(function(){
// 判断是否到顶
if(that.bulletEle.offsetTop < 0){
// 停止计时器
clearInterval(that.t);
// 让子弹爆炸
that.die();
}else{
// 持续向上运动
that.bulletEle.style.top = that.bulletEle.offsetTop - 5 + "px";
}
}, 10);
}
die(){
var that=this;
clearInterval(that.t);
for(var i=0;i<myPlane.bullets.length;i++)
if(myPlane.bullets[i].bulletEle === this.bulletEle){
myPlane.bullets.splice(i, 1);
that.bulletEle.remove();
break;
}
// 将当前这个子弹对象,从子弹数组中删除
}
}
var myPlane = {
init() {
var that = this;
var contElement = document.getElementById("background");
that.meElement = document.createElement("div");
that.meElement.className = "hero";
contElement.appendChild(that.meElement);
var maxLeft = contElement.offsetWidth - that.meElement.offsetWidth;
var maxTop = contElement.offsetHeight - that.meElement.offsetHeight;
that.meElement.style.top = maxTop + "px";
that.meElement.style.left = contElement.offsetWidth / 2 - that.meElement.offsetWidth / 2 + "px";
// 为了游戏体验,给整个网页添加移动事件
document.onmousemove = function (e) {
// console.log("鼠标移动了")
// 获取鼠标在页面上的坐标,准备用来计算出我的飞机的位置
// console.log(e.pageX, e.pageY)
// 提前计算我的飞机的位置
var l = e.pageX - 500 - that.meElement.offsetWidth / 2;
var t = e.pageY - that.meElement.offsetHeight / 2;
// 对我的飞机的位置进行边界限定
// 右
if (l > maxLeft) {
l = maxLeft
}
// 左
if (l < 0) {
l = 0
}
// 上
if (t < 0) {
t = 0
}
// 将边界限定后的位置,设置给我的飞机
that.meElement.style.left = l + "px";
that.meElement.style.top = t + "px";
}
// setInterval(() => {
// var plane = document.createElement("div");
// contElement.appendChild(plane);
// plane.className = "bullet";
// plane.style.left = that.meElement.style.left;
// plane.style.top = that.meElement.style.top;
// // alert(plane.style.left,plane.style.top);
// var t = setInterval(function () {
// if (plane.offsetTop === contElement.style.offsetTop) {
// clearInterval(t);
// }
// else {
// plane.style.top = plane.offsetTop - 5 + "px";
// }
// }, 50);
// }, 1000);
},
die() {
// 为了游戏体验,当飞机要爆炸了,就不能再跟着鼠标走了
document.onmousemove = null;
var that = this;
// 切换我的飞机的爆炸图
var num = 1;
var t = setInterval(function () {
if (num === 7) {
clearInterval(t);
that.meElement.remove();
alert("游戏结束,您的分数为:"+score);
if(confirm("是否重新开始")){
location.reload();
}else{
close();
}
} else {
that.meElement.style.background = "url(boom" + num + ".png)";
num++
}
}, 100);
},
fire(){
var that = this;
that.t = setInterval(function(){
// 创建子弹对象
var b = new Bullet();
// 将子弹对象保存到我的飞机对象身上的一个数组属性内
that.bullets.push(b);
}, 300);
},
bullets:[]
}
class enemy1 {
constructor() {
var that = this;
var cont = document.getElementById("background");
that.plane = document.createElement("div");
cont.appendChild(that.plane);
that.plane.className = "small";
that.plane.style.left = random(0, cont.offsetWidth - that.plane.offsetWidth) + "px";
that.plane.style.top = -that.plane.offsetHeight + "px";
that.t = setInterval(function(){
if(that.plane.offsetTop > cont.offsetHight){
clearInterval(that.t);
that.die();
}else{
that.plane.style.top = that.plane.offsetTop + 5 + "px";
for(var i=0;i<myPlane.bullets.length;i++){
if(
// 左边
myPlane.bullets[i].bulletEle.offsetLeft + myPlane.bullets[i].bulletEle.offsetWidth > that.plane.offsetLeft
&&
// 右边
that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft
&&
// 上边
myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop
&&
// 下边
that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop
){
myPlane.bullets[i].die();
that.die();
}
}
// 敌机和我的飞机的碰撞检测
if(
// 左边
myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft
&&
// 右边
that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft
&&
// 上边
myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop
&&
// 下边
that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop
){
// 我的飞机爆炸
// 游戏结束的功能,在我的飞机的爆炸内部实现
myPlane.die();
clearInterval(that.t);
}
}
}, 30);
}
die() {
score+=10;
paintText();
var that = this;
var num = 1;
clearInterval(that.t);
var t = setInterval(function () {
if (num === 7) {
clearInterval(t);
that.plane.remove();
} else {
that.plane.className="boom"+num;
num++;
}
}, 100);
}
}
class enemy2 {
constructor() {
this.hp=3;
var cont = document.getElementById("background");
this.plane = document.createElement("div");
cont.appendChild(this.plane);
this.plane.className = "mid";
this.plane.style.left = random(0, cont.offsetWidth - this.plane.offsetWidth) + "px";
this.plane.style.top = -this.plane.offsetHeight + "px";
var that=this;
that.t = setInterval(function(){
if(that.plane.offsetTop > cont.offsetHight){
clearInterval(that.t);
that.die();
}else{
that.plane.style.top = that.plane.offsetTop + 4 + "px";
for(var i=0;i<myPlane.bullets.length;i++){
if(
// 左边
myPlane.bullets[i].bulletEle.offsetLeft + myPlane.bullets[i].bulletEle.offsetWidth > that.plane.offsetLeft
&&
// 右边
that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft
&&
// 上边
myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop
&&
// 下边
that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop
){
that.hp--;
myPlane.bullets[i].die();
if(that.hp===0){
that.die();
}
}
}
// 敌机和我的飞机的碰撞检测
if(
// 左边
myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft
&&
// 右边
that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft
&&
// 上边
myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop
&&
// 下边
that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop
){
// 我的飞机爆炸
// 游戏结束的功能,在我的飞机的爆炸内部实现
myPlane.die();
clearInterval(that.t);
}
}
}, 50);
}
// var t = setInterval(function () {
// if (that.plane.offsetTop > cont.offsetHeight - 300) {
// that.die();
// clearInterval(t);
// }
// else {
// that.plane.style.top = that.plane.offsetTop + 3 + "px";
// }
// }, 50);
die() {
score+=20;
paintText();
var that = this;
clearInterval(that.t);
var num = 1;
var t = setInterval(function () {
if (num === 5) {
clearInterval(t);
that.plane.remove();
} else {
that.plane.style.background = "url(enemy_down" + num + ".png)";
num++;
}
}, 150);
}
}
class enemy3 {
constructor() {
this.hp=5;
var cont = document.getElementById("background");
this.plane = document.createElement("div");
cont.appendChild(this.plane);
this.plane.className = "big";
this.plane.style.left = random(0, cont.offsetWidth - this.plane.offsetWidth) + "px";
this.plane.style.top = -this.plane.offsetHeight + "px";
var that=this;
that.t = setInterval(function(){
if(that.plane.offsetTop > cont.offsetHight){
clearInterval(that.t);
that.die();
}else{
that.plane.style.top = that.plane.offsetTop + 3 + "px";
for(var i=0;i<myPlane.bullets.length;i++){
if(
// 左边
myPlane.bullets[i].bulletEle.offsetLeft + myPlane.bullets[i].bulletEle.offsetWidth > that.plane.offsetLeft
&&
// 右边
that.plane.offsetLeft + that.plane.offsetWidth > myPlane.bullets[i].bulletEle.offsetLeft
&&
// 上边
myPlane.bullets[i].bulletEle.offsetTop + myPlane.bullets[i].bulletEle.offsetHeight > that.plane.offsetTop
&&
// 下边
that.plane.offsetTop + that.plane.offsetHeight > myPlane.bullets[i].bulletEle.offsetTop
){
that.hp--;
myPlane.bullets[i].die();
if(that.hp===0){
that.die();
}
}
}
// 敌机和我的飞机的碰撞检测
if(
// 左边
myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > that.plane.offsetLeft
&&
// 右边
that.plane.offsetLeft + that.plane.offsetWidth > myPlane.meElement.offsetLeft
&&
// 上边
myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > that.plane.offsetTop
&&
// 下边
that.plane.offsetTop + that.plane.offsetHeight > myPlane.meElement.offsetTop
){
// 我的飞机爆炸
// 游戏结束的功能,在我的飞机的爆炸内部实现
myPlane.die();
clearInterval(that.t);
}
}
}, 150);
}
die() {
score+=30;
paintText();
var that = this;
clearInterval(that.t);
var num = 1;
var t = setInterval(function () {
if (num === 7) {
clearInterval(t);
that.plane.remove();
} else {
that.plane.style.background = "url(super_boss_down" + num + ".png)";
num++;
}
}, 200);
}
}
class give {
constructor() {
var cont = document.getElementById("background");
var plane = document.createElement("div");
cont.appendChild(plane);
plane.className = "give";
plane.style.left = random(0, cont.offsetWidth - plane.offsetWidth) + "px";
plane.style.top = 0
var t = setInterval(function () {
if (plane.offsetTop == "1000px") {
clearInterval(t);
}
else {
plane.style.top = plane.offsetTop + 8 + "px";
}
if(
// 左边
myPlane.meElement.offsetLeft + myPlane.meElement.offsetWidth > plane.offsetLeft
&&
// 右边
plane.offsetLeft + plane.offsetWidth > myPlane.meElement.offsetLeft
&&
// 上边
myPlane.meElement.offsetTop + myPlane.meElement.offsetHeight > plane.offsetTop
&&
// 下边
plane.offsetTop + plane.offsetHeight > myPlane.meElement.offsetTop
){
plane.remove();
new boom();
}
}, 50);
}
}
class boom{
constructor() {
var that = this;
var cont = document.getElementById("background");
that.plane = document.createElement("div");
cont.appendChild(that.plane);
that.plane.className = "boom";
that.plane.style.left = cont.offsetLeft-that.plane.offsetWidth+"px";
that.plane.style.top = "0px";
var num = 1;
var t = setInterval(function () {
if (num === 11) {
clearInterval(t);
that.plane.remove();
} else {
that.plane.style.background = "url(轰雷击" + num + ".png)";
num++;
for(var i=0;i<enemys1.length;i++){
enemys1[i].die();
enemys1.splice(i,1);
}
for(var i=0;i<enemys2.length;i++){
enemys2[i].die();
enemys2.splice(i,1);
}
for(var i=0;i<enemys3.length;i++){
enemys3[i].die();
enemys3.splice(i,1);
}
}
}, 100);
}
}