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>Document</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
#main{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 600px;
height: 900px;
margin: 0px auto;
background-color: rgb(104, 224, 214,0.5);
}
#btn{
width: 200px;
height: 40px;
background-color:blueviolet;
font-size: 30px;
text-align: center;
line-height: 40px;
}
</style>
<body>
<div id="main">
<button id="btn">开始游戏</button>
</div>
<script src="./index.js"></script>
</body>
</html>
js:
let btn = document.getElementById('btn')
let mainObj = document.getElementById('main')
let upBtn = false
let downBtn =false
let leftBtn = false
let rightBtn = false
function PlayPlane(img,x,y,blood,speed){ //玩家飞机
this.playNode = document.createElement('img')
this.img = img
this.x = x
this.y = y
this.blood = blood
this.speed =speed
this.shoot = function(){
let bullet = new Bullet('./zidan.jpg',parseInt(this.playNode.style.left)+10,parseInt(this.playNode.style.top)-14,20,5)
bulletArr.push(bullet)
}
this.topMove = function(){
if(parseInt(this.playNode.style.top)>=10){
this.playNode.style.top = parseInt(this.playNode.style.top)-this.speed+'px'
}
else{
this.playNode.style.top = '0px'
}
}
this.leftMove = function(){
if(parseInt(this.playNode.style.left) >=10){
this.playNode.style.left = parseInt(this.playNode.style.left)-this.speed+'px'
}
else{
this.playNode.style.left = '0px'
}
}
this.rightMove = function(){
if(parseInt(this.playNode.style.left)<570){
this.playNode.style.left = parseInt(this.playNode.style.left)+this.speed+'px'
}
else{
this.playNode.style.left = '570px'
}
}
this.bottomMove = function(){
if(parseInt(this.playNode.style.top)<=860){
this.playNode.style.top = parseInt(this.playNode.style.top)+this.speed+'px'
}
else{
this.playNode.style.top = '870px'
}
}
this.init = function(){
this.playNode.src = this.img
this.playNode.style.position ='absolute'
this.playNode.style.left = this.x +'px'
this.playNode.style.top = this.y +'px'
this.playNode.style.width ='30px'
this.playNode.style.height ='30px'
mainObj.appendChild(this.playNode)
}
this.init()
}
function EnemyPlane(img,x,y,blood,speed){ //敌方飞机
this.playNode = document.createElement('img')
this.img = img
this.x = x
this.y = y
this.blood = blood
this.speed =speed
this.isDead = false
this.explosionTime = 10
this.move = function(){
this.playNode.style.top = parseInt(this.playNode.style.top)+this.speed+'px'
}
this.init = function(){
this.playNode.src = this.img
this.playNode.style.position ='absolute'
this.playNode.style.left = this.x +'px'
this.playNode.style.top = this.y +'px'
this.playNode.style.width ='30px'
this.playNode.style.height ='30px'
mainObj.appendChild(this.playNode)
}
this.init()
}
function Bullet(img,x,y,speed,attack){ //子弹
this.playNode = document.createElement('img')
this.img = img
this.x = x
this.y = y
this.attack = attack
this.speed =speed
this.isDead = false
this.move = function(){
this.playNode.style.top =parseInt(this.playNode.style.top)-this.speed+'px'
}
this.init = function(){
this.playNode.src = this.img
this.playNode.style.position ='absolute'
this.playNode.style.left = this.x +'px'
this.playNode.style.top = this.y +'px'
this.playNode.style.width ='10px'
this.playNode.style.height ='10px'
mainObj.appendChild(this.playNode)
}
this.init()
}
let enemyArr = []
function createEnemy(){
let enemy = new EnemyPlane('./R-C.jfif',Math.random()*366,-Math.random()*60,10,Math.random()*10+1)
enemyArr.push(enemy)
}
function enemyPlaneMove(){
for(let i = 0;i<enemyArr.length;i++){
if(enemyArr[i].isDead == false){
enemyArr[i].move()
if(parseInt(enemyArr[i].playNode.style.top)>600){
mainObj.removeChild(enemyArr[i].playNode)
enemyArr.splice(i,1)
}
}
else{
enemyArr[i].explosionTime--;
if(enemyArr[i].explosionTime<=0){
mainObj.removeChild(enemyArr[i].playNode)
enemyArr.splice(i,1)
}
}
}
}
let bulletArr = []
function bulletFly(){
for(let i = 0;i<bulletArr.length;i++){
if(bulletArr[i].isDead ==false){
bulletArr[i].move()
}
else{
mainObj.removeChild(bulletArr[i].playNode)
bulletArr.splice(i,1)
}
}
}
function crashCheck(){
for(let i=0;i<enemyArr.length;i++){
for(let j =0;j<bulletArr.length;j++){
let btLeft = parseInt(bulletArr[j].playNode.style.left)
let btTop = parseInt(bulletArr[j].playNode.style.top)
let plLeft = parseInt(enemyArr[i].playNode.style.left)
let plTop = parseInt(enemyArr[i].playNode.style.top)
if(btLeft>=plLeft&&btLeft<=plLeft+34&&btTop>=plTop&&btTop<=plTop+24){
enemyArr[i].playNode.src = './bong.jfif'
enemyArr[i].isDead = true
bulletArr[i].isDead = true
}
}
}
}
function startGame(){
let playerPlane = new PlayPlane('./R-C.jfif',280,800,101,10)
playerPlane.shoot()
setInterval(createEnemy,3000)
setInterval(enemyPlaneMove,1000)
setInterval(()=>{
playerPlane.shoot()
},100)
setInterval(bulletFly,100)
setInterval(crashCheck,100)
function ctrlPlaneMove(){
if(upBtn == true){playerPlane.topMove()}
if(downBtn == true){playerPlane.bottomMove()}
if(leftBtn == true){playerPlane.leftMove()}
if(rightBtn == true){playerPlane.rightMove()}
}
document.onkeydown = function(){
let e = window.event||arguments[0]
if(e.keyCode ==38){
upBtn = true
}
else if(e.keyCode ==40){
downBtn =true
}
else if(e.keyCode == 37){
leftBtn = true
}
else if(e.keyCode == 39){
rightBtn = true
}
ctrlPlaneMove()
}
document.onkeyup = function(){
let e = window.event||arguments[0]
if(e.keyCode ==38){
upBtn = false
}
else if(e.keyCode ==40){
downBtn =false
}
else if(e.keyCode == 37){
leftBtn = false
}
else if(e.keyCode == 39){
rightBtn = false
}
ctrlPlaneMove()
}
}
btn.οnclick=function(){
btn.style.display = 'none'
startGame()
}