飞机大战 （面向对象）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.box{
width: 320px;
height: 568px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background:url('./data/img/开始背景.png');
overflow:hidden;
}
.animate{
animation: animate 20s linear infinite normal;
}
@keyframes animate {
0%{
background-position:0 0;
}
100%{
background-position: 0 568px;
}
}
button{
position: absolute;
width: 200px;
height: 50px;
left: 50%;
margin-left:-100px;
bottom:60px;
}
.myPlane{
width: 66px;
height: 80px;
position: absolute;
z-index:999;
}
.bullets{
width: 6px;
height: 14px;
position: absolute;
}
.score{
display: none;
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
}
.score span{
flex:1;
background:white;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box">
<div class="score">
得分：
<span>00</span>
</div>
<button>开始游戏</button>
</div>
</body>
<script>
let oBtn = document.querySelector('button');
let oBox = document.querySelector(".box");
let oBoxW = oBox.offsetWidth,oBoxH = oBox.offsetHeight;
const MEWIDTH = 66,MEHEIGHT = 80;
let Score=0;
const enemy = [{
live:3,
width:34,
height:24,
speed:3,
imgSrc:'./data/img/enemy1_fly_1.png',
beatImg:'./data/img/enemy1_fly_1.png',
boomImg:'./data/img/小飞机爆炸.gif'
},{
live:4,
width:46,
height:60,
speed:2,
imgSrc:'./data/img/enemy2_fly_1.png',
beatImg:'./data/img/中飞机挨打.png',
boomImg:'./data/img/中飞机爆炸.gif'
},{
live:5,
width:110,
height:164,
speed:1,
imgSrc:'./data/img/enemy3_fly_1.png',
beatImg:'./data/img/大飞机挨打.png',
boomImg:'./data/img/大飞机爆炸.gif'
}];
let count = 0;
oBtn.onclick=function(){
oBox.style.backgroundImage="url(./data/img/background_1.png)"
oBox.classList.add('animate')
this.remove()
document.querySelector('.score').style['display']='flex';
let myPlane = new MyPlane(oBox.clientWidth/2-MEWIDTH/2,oBox.clientHeight-MEHEIGHT);
myPlane.init()
setInterval(()=>{
count++;
let index = count%10>=7?getRan(1,2):0;
let {live,width,height,speed,imgSrc,beatImg,boomImg} = enemy[index];
new EnemyPlan(getRan(30,oBoxW-30-width),-height,speed+count/30,width,height,live,imgSrc,beatImg,boomImg);
},2000)
}
//获取随机数
function getRan(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
//我方飞机
class MyPlane{
constructor(x,y,imgSrc='./data/img/我的飞机.gif',boomImg='./data/img/本方飞机爆炸.gif'){
this.x=x;
this.y=y;
this.imgSrc=imgSrc;
this.boomImg=boomImg;
}
init(){
//创建我方飞机
this.createMyPlane();
//管理事件
this.handleEvent()
this.hit()
}
handleEvent(){
oBox.addEventListener('mousemove', this.myPlaneMove.bind(this),false);
oBox.addEventListener('mousedown',this.myPlaneShoot.bind(this),false)
document.addEventListener('mouseup',this.stopShoot.bind(this),false)
}
myPlaneShoot(){
//创建子弹
clearInterval(this.timer)
new Bullet(this.x-3,this.y-MEHEIGHT/2)
this.timer = setInterval(()=>{
new Bullet(this.x-3,this.y-MEHEIGHT/2)
},300)
return false;
}
stopShoot(){
clearInterval(this.timer)
}
myPlaneMove(e){
let ev = e||event;
let disX = ev.clientX-oBox.offsetLeft;
let disY = ev.clientY-oBox.offsetTop;
//设置边界
this.x = this.setBound(disX,MEWIDTH/2,'width');
this.y = this.setBound(disY,MEHEIGHT/2,'height');
this.setStyle(this.element,{
left:this.x-MEWIDTH/2+'px',
top:this.y-MEHEIGHT/2+'px'
})
return false;
}
hit(){
this.timer1 = window.requestAnimationFrame(this.hit.bind(this))
//获取敌方的飞机
let enemys = document.querySelectorAll(".enmeny");
[...enemys].forEach(item=>{
let enemyT = item.offsetTop;
let enemyL = item.offsetLeft;
let enemyW = item.offsetWidth;
let enemyH = item.offsetHeight;
if(this.element.offsetTop<enemyT+enemyH && this.element.offsetTop>enemyT-this.element.offsetHeight && this.element.offsetLeft>enemyL-this.element.offsetWidth && this.element.offsetLeft<enemyL+enemyW){
console.log("碰撞")
window.cancelAnimationFrame(this.timer1)
this.setStyle(this.element,{
backgroundImage:`url(${this.boomImg})`
})
setTimeout(()=>{
alert('GAME OVER')
location.reload()
},100)
};
})
}
setBound(direction,num,attr){
return direction<num?num:direction>(this.getMax(attr)+MEWIDTH/2)?(this.getMax(attr)+MEWIDTH/2):direction;
}
getMax(attr){
return this.getStyle(oBox,attr) - this.getStyle(this.element,attr)
}
createMyPlane(){
this.element = document.createElement('div');
this.element.className="myPlane";
this.setStyle(this.element,{
left:this.x+'px',
top:this.y+'px',
backgroundImage:`url(${this.imgSrc})`
})
oBox.appendChild(this.element)
}
getStyle(obj,attr){
return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr]);
}
setStyle(obj,attr){
for(let [key,value] of Object.entries(attr)){
obj.style[key]=value;
}
}
}
//创建子弹类
class Bullet{
constructor(x,y,imgSrc="./data/img/bullet1.png"){
this.x= x;
this.y = y;
this.imgSrc=imgSrc;
this.init()
this.bulletMove()
}
init(){
//创建子弹
this.bulletNode = document.createElement('div');
this.bulletNode.className="bullets"
this.setStyle(this.bulletNode,{
left:this.x+'px',
top:this.y+'px',
backgroundImage:`url(${this.imgSrc})`
})
oBox.appendChild(this.bulletNode)
}
bulletMove(){
clearInterval(this.timer)
this.timer = setInterval(()=>{
this.setStyle(this.bulletNode,{
top:this.getStyle(this.bulletNode,'top')-10+'px'
})
if(this.getStyle(this.bulletNode,'top')<=-14){
this.bulletNode.remove()
clearInterval(this.timer)
}
},30)
}
getStyle(obj,attr){
return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr]);
}
setStyle(obj,attr){
for(let [key,value] of Object.entries(attr)){
obj.style[key]=value;
}
}
}
//创建敌机
class EnemyPlan{
constructor(x,y,iSpeed,w,h,live,imgSrc,beatImg,boomImg){
this.x = x;
this.y = y;
this.iSpeed = iSpeed;
this.w =w;
this.h = h;
this.live=live;
this.imgSrc=imgSrc;
this.beatImg = beatImg;
this.boomImg = boomImg;
this.score = this.live;
this.init();
}
init(){
//创建敌机
this.createEnemyPlane()
}
createEnemyPlane(){
this.enemyNode = document.createElement("div")
this.enemyNode.className="enmeny";
this.setStyle(this.enemyNode,{
position:'absolute',
left:this.x+'px',
top:this.y+'px',
width:this.w+'px',
height:this.h+'px',
background:`url(${this.imgSrc})`
})
oBox.appendChild(this.enemyNode)
//让敌机开始运动
this.enemyMove()
}
enemyMove(){
clearInterval(this.timer)
this.timer= setInterval(()=>{
this.setStyle(this.enemyNode,{
top:this.getStyle(this.enemyNode,'top')+this.iSpeed+'px'
})
if(this.getStyle(this.enemyNode,'top')>oBoxH){
this.enemyNode.remove()
clearInterval(this.timer)
}
//检测敌机是否与子弹碰撞
this.hit()
},30)
}
hit(){
let enemyL = this.enemyNode.offsetLeft;
let enemyT = this.enemyNode.offsetTop;
//获取页面所有的子弹
let bullets = document.querySelectorAll(".bullets");
[...bullets].forEach(item=>{
let bulletL = item.offsetLeft;
let bulletT = item.offsetTop;
let bulletW = this.getStyle(item,'width')
if(bulletT<enemyT+this.h && bulletL>enemyL-bulletW && bulletL<enemyL+this.w){
this.live--;
this.setStyle(this.enemyNode,{
background:`url(${this.beatImg})`
})
item.remove()
if(this.live == 0){
Score+=this.score;
this.setStyle(this.enemyNode,{
background:`url(${this.boomImg})`
})
document.querySelector(".score span").innerHTML=Score.toString().padStart('2','0');
clearInterval(this.timer)
setTimeout(()=>{
this.enemyNode.remove()
},500)
}
}
})
}
getStyle(obj,attr){
return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr]);
}
setStyle(obj,attr){
for(let [key,value] of Object.entries(attr)){
obj.style[key]=value;
}
}
}
</script>
</html>
文件中图片此连接下载
浙公网安备 33010602011771号