飞机大战(简易版)
作者：互联网
数据集没有发出来，只有完整版的代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>飞机大战</title>
<style>
html,body{
position: relative;
width: 100%;
height: 100%;
}
h1{
font-size: 6rem;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%,-50%);
background: linear-gradient(to bottom,red,blue);
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
z-index: 1;
cursor: progress;
}
#tips{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
font-size: 20px;
}
#tips svg{
width: 30px;
height: 30px;
}
#tips span{
display: inline-block;
height: 30px;
line-height: 30px;
}
#start{
font-size: 16px;
font-weight: 800;
text-align: center;
line-height: 60px;
width: 120px;
height: 60px;
border-radius: 80px 70px;
margin: 0 auto;
/*设置手型*/
cursor: pointer;
box-shadow: 1px 2px 0 1px #606060,
-1px 0 0 1px #606060;
}
#start:hover{
font-size: 20px;
font-weight: 1.2em;
background: url('img/start.gif');
background-size: 100% 100%;
}
#canvas{
background: url('img/background.png') repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 0;
}
</style>
</head>
<body>
<h1>飞机大战</h1>
<div id="tips">
<div>
<svg t="1586957990263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4430" width="200" height="200"><path d="M489.90890884 1017.28884579l0-662.73273745L551.27305136 354.55610835 551.27305135 1017.28884579l-61.3641425-2e-8z" fill="" p-id="4431"></path><path d="M306.28092891 358.28692148L515.86227332 1.43220042l215.24570478 356.85472106-424.82704919 0z" fill="" p-id="4432"></path></svg>
<svg t="1586958009679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551" width="200" height="200"><path d="M533.74591785 14.43962576l0 652.37753843L473.34059007 666.81716419 473.34059007 14.43962576l60.40532778 1e-8z" fill="" p-id="4552"></path><path d="M714.5047106 673.81131166L508.1980747 1025.0901777l-211.88249064-351.27886604 418.18912654 0z" fill="" p-id="4553"></path></svg>
<svg t="1586958037827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5320" width="200" height="200"><path d="M1017.28884579 534.09109115l-662.73273745 1e-8L354.55610835 472.72694864 1017.28884579 472.72694864l-2e-8 61.36414251z" fill="" p-id="5321"></path><path d="M358.28692148 717.71907109L1.43220042 508.13772668l356.85472106-215.24570478 0 424.82704919z" fill="" p-id="5322"></path></svg>
<svg t="1586958054232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6089" width="200" height="200"><path d="M6.71115421 489.90890885l662.73273745-1e-8L669.44389165 551.27305136 6.71115421 551.27305136l2e-8-61.36414251z" fill="" p-id="6090"></path><path d="M665.71307852 306.28092891L1022.56779958 515.86227332l-356.85472106 215.24570478 0-424.82704919z" fill="" p-id="6091"></path></svg>
<span>移动方向</span></div>
<div id="start">开始游戏</div>
</div>
<canvas id="canvas" width="600" height="700"></canvas>
<script>
var canvas=document.getElementById("canvas");
if(canvas.getContext){
var cxt=canvas.getContext("2d");
}else{
console.log("你的浏览器不支持HTML5画板");
}
var scores=0; //分数
var bumps=[]; //数组，存放炮弹
var armys=[]; //敌机
var armyBumps=[]; //敌机炮弹
//敌机类
function Army(){
this.x=parseInt(Math.random()*19)*30;
this.y=20;
this.w=30;
this.h=30;
armys.push(this);
}
//画敌机
Army.prototype.paintArmy=function(){
const img=new Image();
img.src='img/plane-1.png';
img.onload=()=>{
cxt.drawImage(img,this.x,this.y,this.w,this.h);
}
}
//敌机自动向前移动
Army.prototype.move=function(){
const img=new Image();
img.src='img/plane-1.png';
let armyY=armys.filter((item)=>{
return item.y<=700;
})
armyY.forEach((item)=>{
cxt.clearRect(item.x,item.y,item.w,item.h);
item.y+=20;
})
armyY.forEach((item)=>{
cxt.drawImage(img,item.x,item.y,item.w,item.h);
})
}
/*
//敌机开火
Army.prototype.Fire=function(){
const img=new Image();
img.src='img/fire-1.png';
img.οnlοad=()=>{
armys.forEach((item)=>{
cxt.drawImage(img,item.x+5,item.y+20,20,20);
armyBumps.push([item.x+5,item.y+20]);
})
//定时器，0.3s一次
setInterval(()=>{
//过滤出界的
armyBumps.filter((item)=>{
return item[1]+20<=700;
})
armyBumps.forEach((item)=>{
cxt .clearRect(item[0],item[1],20,20);
item[1]+=20;
})
armyBumps.forEach((item)=>{
cxt.drawImage(img,item[0],item[1],20,20);
})
},500)
}
}
*/
//碰撞检测
Army.prototype.boom=function(){
armys.forEach((item,index)=>{
bumps.forEach((em,dx)=>{
if(em[0]>=item.x && em[0]<=item.x+item.w && Math.abs(item.y-em[1])<=item.h){
setTimeout(()=>{
//清除子弹
cxt.clearRect(em[0],em[1],6,10);
//清除敌机
cxt.clearRect(item.x,item.y,item.w,item.h);
},200)
//重新弄画图
let img1=new Image();
img1.src="img/over-0.png";
img1.onload=()=>{
cxt.drawImage(img1,item.x,item.y,item.w,item.h);
}
setTimeout(()=>{
cxt.clearRect(item.x,item.y,item.w,item.h);
},150)
let img2=new Image();
img2.src="img/over-1.png";
img2.onload=()=>{
cxt.drawImage(img2,item.x,item.y,item.w,item.h);
}
setTimeout(()=>{
cxt.clearRect(item.x,item.y,item.w,item.h);
},150)
let img3=new Image();
img3.src="img/over-2.png";
img3.onload=()=>{
cxt.drawImage(img3,item.x,item.y,item.w,item.h);
}
setTimeout(()=>{
cxt.clearRect(item.x,item.y,item.w,item.h);
},150)
let img4=new Image();
img4.src="img/over.png";
img4.onload=()=>{
cxt.drawImage(img4,item.x,item.y,item.w,item.h);
}
setTimeout(()=>{
cxt.clearRect(item.x,item.y,item.w,item.h);
},150)
//把两者从存储的数组中删除
bumps.splice(dx,1);
armys.splice(index,1);
scores++;
cxt.clearRect(0,0,100,20);
score();
}
})
})
}
//自己类
function plane(){
this.w=40;
this.h=40;
this.x=canvas.width/2-this.w/2;
this.y=canvas.height-this.h;
}
//显示自己的飞机
plane.prototype.paintPlane=function(){
const img=new Image();
img.src="img/plane-2.png";
//等到图片加载完成才可以使用,否则width===0 && height===0
//写一个回调函数
img.onload=()=>{
cxt.drawImage(img,this.x,this.y,this.w,this.h);
}
}
//清除函数
plane.prototype.clearPlane=function(){
cxt.clearRect(this.x,this.y,40,40);
}
plane.prototype.moveLeft=function(){
this.clearPlane();
if(this.x>0){
this.x-=10;
}
this.paintPlane();
}
plane.prototype.moveRight=function(){
this.clearPlane();
if(this.x+40<canvas.width){
this.x+=10;
}
this.paintPlane();
}
/*
plane.prototype.moveUp=function(){
this.clearPlane();
if(this.y>40){
this.y-=10;
}
this.paintPlane();
}
plane.prototype.moveDown=function(){
this.clearPlane();
if(this.y+40<canvas.height){
this.y+=10;
}
this.paintPlane();
}
*/
//发射炮弹
plane.prototype.fire=function(){
const img=new Image();
img.src="img/fire-0.png";
img.onload=()=>{
//定时器，0.3s一次
setInterval(()=>{
//过滤出界的
let bump=bumps.filter((item)=>{
return item[1]>=0;
})
//添加新的
cxt.drawImage(img,this.x+17,this.y-10,6,10);
//添加进存储的数组
bumps.push([this.x+17,this.y-10]);
//先清除
bump.forEach((item)=>{
cxt.clearRect(item[0],item[1],6,10);
item[1]-=20;
})
//再绘画
bump.forEach((item)=>{
cxt.drawImage(img,item[0],item[1],6,10);
})
},100)
}
}
plane.prototype.gameOver=function(){
armys.forEach((item)=>{
if(item.x+30>=this.x && item.x<=this.x+this.w && this.y===item.y+30){
return true;
}
})
}
//显示分数
function score(){
cxt.font="20px Arial";
cxt.fillStyle="#000";
cxt.fillText("分数:"+scores,3,20);
}
(function game(){
var startgame=document.getElementById("start");
startgame.addEventListener('click',startGame);
function startGame(){
document.getElementById("tips").style.opacity="0";
document.getElementsByTagName("h1")[0].style.opacity="0";
startgame.removeEventListener('click',startgame);
score();
var planes=new plane();
planes.paintPlane();
planes.fire();
let time=setInterval(()=>{
let army=new Army();
army.paintArmy();
army.move();
//army.Fire();
(function over(){
army.boom();
//canvas动画，自动补帧 window.requestAnimationFrame()函数
window.requestAnimationFrame(over);
})()
},300)
//键盘监听移动
document.addEventListener('keydown',(event)=>{
//left 37
//right 39
//up 38
//down 40
switch(event.keyCode){
case 37:
planes.moveLeft();
break;
case 39:
planes.moveRight();
break;
/*
case 38:
planes.moveUp();
break;
case 40:
planes.moveDown();
break;
*/
}
})
}
})()
</script>
</body>
</html>
标签：function,飞机,cxt,img,大战,item,简易版,plane,20 来源： https://blog.csdn.net/m0_46104664/article/details/113663356