文章目录

• 【HTML+CSS+JavaScript】实现简单网页版的飞机大战
• • 一. HTML部分代码
  • 二. CSS部分代码
  • 三. JavaScript部分代码
  • 四. 完整的代码和图片获取

【HTML+CSS+JavaScript】实现简单网页版的飞机大战

本文分享的是键盘版飞机大战的代码，且文章末尾有惊喜。

效果图：

一. HTML部分代码

分数：0

二. CSS部分代码

三. JavaScript部分代码

;
(function() {var gamebox = document.querySelector('.gamebox')var oEm = document.querySelector('em')var zscore = 0//1.让背景运动起来var bgposition = 0var bgtimer = setInterval(function() {bgposition += 2gamebox.style.backgroundPosition = '0 ' + bgposition + 'px'}, 30)//2.我方飞机的构造函数function Myplane(w, h, x, y, imgurl, boomurl) {//w,h宽高 x,y位置  imgurl和boomurl我方飞机的图片路径this.w = wthis.h = hthis.x = xthis.y = ythis.imgurl = imgurlthis.boomurl = boomurlthis.createmyplane()}//2.1创建我方飞机Myplane.prototype.createmyplane = function() {this.myplaneimg = document.createElement('img')this.myplaneimg.src = this.imgurlthis.myplaneimg.style.cssText = `width:${this.w}px;height:${this.h}px;position:absolute;left:${this.x}px;top:${this.y}px;`gamebox.appendChild(this.myplaneimg)//飞机创建完成，执行运动和发射子弹this.myplanemove()this.myplaneshoot()}//2.2键盘控制我方飞机移动Myplane.prototype.myplanemove = function() {var that = this//方向定时器var uptimer = null,downtimer = null,lefttimer = null,righttimer = nullvar uplock = true,downlock = true,leftlock = true,rightlock = truedocument.addEventListener('keydown', movekey, false) //movekey:事件处理函数function movekey(ev) {//W:87 A:65 S:83 D:68  K:75var ev = ev || window.eventswitch (ev.keyCode) {case 87:moveup() // 上breakcase 83:movedown() // 下breakcase 65:moveleft() // 左breakcase 68:moveright() // 右break}// 飞机向上移动function moveup() {if (uplock) {uplock = falseclearInterval(downtimer)uptimer = setInterval(function() {that.y -= 4if (that.y <= 0) {that.y = 0}that.myplaneimg.style.top = that.y + 'px'}, 30)}}// 飞机向下移动function movedown() {if (downlock) {downlock = falseclearInterval(uptimer)downtimer = setInterval(function() {that.y += 4if (that.y >= gamebox.offsetHeight - that.h) {that.y = gamebox.offsetHeight - that.h}that.myplaneimg.style.top = that.y + 'px'}, 30)}}// 飞机向左移动function moveleft() {if (leftlock) {leftlock = falseclearInterval(righttimer)lefttimer = setInterval(function() {that.x -= 4if (that.x <= 0) {that.x = 0}that.myplaneimg.style.left = that.x + 'px'}, 30)}}// 飞机向右移动function moveright() {if (rightlock) {rightlock = falseclearInterval(lefttimer)righttimer = setInterval(function() {that.x += 4if (that.x >= gamebox.offsetWidth - that.w) {that.x = gamebox.offsetWidth - that.w}that.myplaneimg.style.left = that.x + 'px'}, 30)}}}document.addEventListener('keyup',function(ev) {var ev = ev || window.eventif (ev.keyCode == 87) {clearInterval(uptimer)uplock = true}if (ev.keyCode == 83) {clearInterval(downtimer)downlock = true}if (ev.keyCode == 65) {clearInterval(lefttimer)leftlock = true}if (ev.keyCode == 68) {clearInterval(righttimer)rightlock = true}},false)}//2.3我方飞机发射子弹Myplane.prototype.myplaneshoot = function() {var that = thisvar shoottimer = nullvar shootlock = truedocument.addEventListener('keydown', shootbullet, false)function shootbullet(ev) {var ev = ev || window.eventif (ev.keyCode == 75) {if (shootlock) {shootlock = falsefunction shoot() {new Bullet(6,14,that.x + that.w / 2 - 3,that.y - 14,'img/bullet.png')}shoot()shoottimer = setInterval(shoot, 200)}}}document.addEventListener('keyup',function(ev) {var ev = ev || window.eventif (ev.keyCode == 75) {clearInterval(shoottimer)shootlock = true}},false)}//3.子弹的构造函数function Bullet(w, h, x, y, imgurl) {//w,h宽高 x,y位置  imgurl图片路径this.w = wthis.h = hthis.x = xthis.y = ythis.imgurl = imgurl//创建子弹this.createbullet()}//3.1创建子弹Bullet.prototype.createbullet = function() {this.bulletimg = document.createElement('img')this.bulletimg.src = this.imgurlthis.bulletimg.style.cssText = `width:${this.w}px;height:${this.h}px;position:absolute;left:${this.x}px;top:${this.y}px;`gamebox.appendChild(this.bulletimg)//子弹创建完成，执行运动。this.bulletmove()}//3.2子弹运动Bullet.prototype.bulletmove = function() {var that = thisthis.timer = setInterval(function() {that.y -= 4if (that.y <= -that.h) {//让子弹消失clearInterval(that.timer)gamebox.removeChild(that.bulletimg)}that.bulletimg.style.top = that.y + 'px'that.bullethit()}, 30)}Bullet.prototype.bullethit = function() {var enemys = document.querySelectorAll('.enemy')for (var i = 0; i < enemys.length; i++) {if (this.x + this.w >= enemys[i].offsetLeft &&this.x <= enemys[i].offsetLeft + enemys[i].offsetWidth &&this.y + this.h >= enemys[i].offsetTop &&this.y <= enemys[i].offsetTop + enemys[i].offsetHeight) {clearInterval(this.timer)try {gamebox.removeChild(this.bulletimg)} catch (e) {return}//血量减1enemys[i].blood--//监听敌机的血量(给敌机添加方法)enemys[i].checkblood()}}}//4.敌机的构造函数function Enemy(w, h, x, y, imgurl, boomurl, blood, score, speed) {this.w = wthis.h = hthis.x = xthis.y = ythis.imgurl = imgurlthis.boomurl = boomurlthis.blood = bloodthis.score = scorethis.speed = speedthis.createenemy()}//4.1创建敌机图片Enemy.prototype.createenemy = function() {var that = thisthis.enemyimg = document.createElement('img')this.enemyimg.src = this.imgurlthis.enemyimg.style.cssText = `width:${this.w}px;height:${this.h}px;position:absolute;left:${this.x}px;top:${this.y}px;`gamebox.appendChild(this.enemyimg)this.enemyimg.className = 'enemy' //给每一架创建的敌机添加类this.enemyimg.score = this.score //给每一架创建的敌机添加分数this.enemyimg.blood = this.blood //给每一架创建的敌机添加自定义的属性--血量this.enemyimg.checkblood = function() {//this==>this.enemyimgif (this.blood <= 0) {//敌机消失爆炸。this.className = '' //去掉类名。this.src = that.boomurlclearInterval(that.enemyimg.timer)setTimeout(function() {gamebox.removeChild(that.enemyimg)}, 300)zscore += this.scoreoEm.innerHTML = zscore}}//子弹创建完成，执行运动。this.enemymove()}//4.2敌机运动Enemy.prototype.enemymove = function() {var that = thisthis.enemyimg.timer = setInterval(function() {that.y += that.speedif (that.y >= gamebox.offsetHeight) {clearInterval(that.enemyimg.timer)gamebox.removeChild(that.enemyimg)}that.enemyimg.style.top = that.y + 'px'that.enemyhit()}, 30)}//4.3敌机碰撞我方飞机Enemy.prototype.enemyhit = function() {if (!(this.x + this.w < ourplane.x ||this.x > ourplane.x + ourplane.w ||this.y + this.h < ourplane.y ||this.y > ourplane.y + ourplane.h)) {var enemys = document.querySelectorAll('.enemy')for (var i = 0; i < enemys.length; i++) {clearInterval(enemys[i].timer)}clearInterval(enemytimer)clearInterval(bgtimer)ourplane.myplaneimg.src = ourplane.boomurlsetTimeout(function() {gamebox.removeChild(ourplane.myplaneimg)alert('game over!!')location.reload()}, 300)}}var enemytimer = setInterval(function() {for (var i = 0; i < ranNum(1, 3); i++) {var num = ranNum(1, 20) //1-20if (num < 15) {//小飞机new Enemy(34,24,ranNum(0, gamebox.offsetWidth - 34), -24,'img/smallplane.png','img/smallplaneboom.gif',1,1,ranNum(2, 4))} else if (num >= 15 && num < 20) {new Enemy(46,60,ranNum(0, gamebox.offsetWidth - 46), -60,'img/midplane.png','img/midplaneboom.gif',3,5,ranNum(1, 3))} else if (num == 20) {new Enemy(110,164,ranNum(0, gamebox.offsetWidth - 110), -164,'img/bigplane.png','img/bigplaneboom.gif',10,10,1)}}}, 3000)function ranNum(min, max) {return Math.round(Math.random() * (max - min)) + min}//实例化我方飞机var ourplane = new Myplane(66,80,(gamebox.offsetWidth - 66) / 2,gamebox.offsetHeight - 80,'img/myplane.gif','img/myplaneBoom.gif')})()

注：键盘的WSAD分别控制飞机的上下左右，K键发射子弹。

四. 完整的代码和图片获取

1. 鼠标版飞机大战资源获取：

   链接：https://pan.baidu.com/s/1NXGjetosHJ4K_pcj4RLUNQ?pwd=yyds 
   提取码：yyds
   

2. 键盘版飞机大战资源获取：

   链接：https://pan.baidu.com/s/1YkH7dCseGJw8ssRl2lHysg?pwd=yyds 
   提取码：yyds