纯原生JS使用ES6语法实现飞机大战
Posted 我是真的不会前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯原生JS使用ES6语法实现飞机大战相关的知识，希望对你有一定的参考价值。
1.游戏背景
首先，这是一个采用原生js写的一个demo。用ES6的模块化和class进行构建。如果课设或者什么需要的小伙伴。直接复制代码到html文件就行了。至于图片文件 ，我会把图片放到码云上。直接拉下来就行了。
2.运行截图
3.HTML和CSS源码
<!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>
*
padding: 0px;
margin: 0px;
.gamebox
width: 320px;
height: 568px;
background: url(img/background.png) repeat-y 0 0;
margin: 50px auto;
position: relative;
cursor: none;
overflow: hidden;
.gamebox span
position: absolute;
right: 5px;
top: 5px;
.gamebox strong
font-weight: normal;
</style>
</head>
<body>
<div class="gamebox">
<span>
分数：<strong>0</strong>
</span>
</div>
</body>
</html>
4.JS源码
! function()
//1.获取元素
//外部暴露变量
const gamebox = document.querySelector('.gamebox');
const score = document.querySelector('.gamebox strong');
let allscore = 0;
//随机数设定范围
//2.背景运动起来
let speed = 0;
let bgtimer = setInterval(() =>
speed += 3;
gamebox.style.backgroundPosition = `0 $speedpx`;
, 1000 / 60);
//3.飞机和子弹图片类，被继承的类
class Role
constructor(w, h, x, y, imgurl, boomurl) //w宽h高x水平位置y垂直位置imgurl图片路径boourl爆炸图片路径
this.w = w;
this.h = h;
this.x = x;
this.y = y;
this.imgurl = imgurl;
this.boomurl = boomurl;
createRole()
this.roleImg = document.createElement('img');
this.roleImg.src = this.imgurl;
this.roleImg.style.cssText = `
width:$this.wpx;
height:$this.hpx;
position:absolute;
left:$this.xpx;
top:$this.ypx;
`;
gamebox.appendChild(this.roleImg);
//4.我方飞机的类
class Myplane extends Role
constructor(w, h, x, y, imgurl, boomurl)
super(w, h, x, y, imgurl, boomurl); //继承属性
this.createRole(); //继承的，直接调用，创建角色图片
this.myplaneMove(); //我方飞机移动。
this.myplaneShooot(); //我方飞机发射子弹
;
//我方飞机移动
myplaneMove()
let _this = this,
uptimer = null,
downtimer = null,
lefttimer = null,
righttimer = null;
//事件绑定，document绑定多个事件。
document.addEventListener('keydown', planemove);
function planemove(ev) //事件处理函数
var ev = ev || window.event;
switch (ev.keyCode)
case 87:
moveup();
break;
case 83:
movedown();
break;
case 65:
moveleft();
break;
case 68:
moveright();
break;
function moveup()
clearInterval(uptimer); //防止定时器的叠加
clearInterval(downtimer); //向上运动的时候，关闭向下运动的定时器。
uptimer = setInterval(() =>
_this.y -= 4;
if (_this.y <= 0) //限定范围
_this.y = 0;
_this.roleImg.style.top = _this.y + 'px'; //设置
, 1000 / 60)
function movedown()
clearInterval(downtimer); //防止定时器的叠加
clearInterval(uptimer);
downtimer = setInterval(() =>
_this.y += 4;
if (_this.y >= gamebox.offsetHeight - _this.h) //限定范围
_this.y = gamebox.offsetHeight - _this.h;
_this.roleImg.style.top = _this.y + 'px'; //设置
, 1000 / 60)
function moveleft()
clearInterval(lefttimer);
clearInterval(righttimer);
lefttimer = setInterval(() =>
_this.x -= 4;
if (_this.x <= 0) //限定范围
_this.x = 0;
_this.roleImg.style.left = _this.x + 'px'; //设置
, 1000 / 60)
function moveright()
clearInterval(righttimer);
clearInterval(lefttimer);
righttimer = setInterval(() =>
_this.x += 4;
if (_this.x >= gamebox.offsetWidth - _this.w) //限定范围
_this.x = gamebox.offsetWidth - _this.w;
_this.roleImg.style.left = _this.x + 'px'; //设置
, 1000 / 60)
document.addEventListener('keyup', function(ev)
if (ev.keyCode === 87)
clearInterval(uptimer);
if (ev.keyCode === 83)
clearInterval(downtimer);
if (ev.keyCode === 65)
clearInterval(lefttimer);
if (ev.keyCode === 68)
clearInterval(righttimer);
);
myplaneShooot()
let _this = this;
let flag = true;
let shoottimer = null;
document.addEventListener('keydown', shootbullet);
function shootbullet(ev) //发射子弹的事件处理函数
var ev = ev || window.event;
if (ev.keyCode === 75)
//事件实例化产生子弹。
if (flag) //限定事件触发一次
flag = false;
new Bullet(6, 14, _this.x + _this.w / 2 - 3, _this.y - 14, 'img/bullet.png');
shoottimer = setInterval(() =>
new Bullet(6, 14, _this.x + _this.w / 2 - 3, _this.y - 14, 'img/bullet.png');
, 200);
document.addEventListener('keyup', function(ev) //停止
var ev = ev || window.event;
if (ev.keyCode === 75)
flag = true;
clearInterval(shoottimer);
);
//5.子弹的类
class Bullet extends Role
constructor(w, h, x, y, imgurl)
super(w, h, x, y, imgurl);
this.createRole(); //继承图片创建
this.bulletMove(); //子弹运动方法
;
//子弹运动方法
bulletMove()
this.timer = setInterval(() =>
this.y -= 4;
if (this.y <= -this.h)
gamebox.removeChild(this.roleImg);
clearInterval(this.timer);
this.roleImg.style.top = this.y + 'px';
this.bullethit();
, 1000 / 60);
;
//子弹碰撞敌机
bullethit()
const enemys = document.querySelectorAll('.enemy'); //获取所有的敌机
for (let 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)
//子弹碰上了敌机，子弹消失，子弹定时器关闭，
//敌机：血量-1
//敌机检测是否该消失了
clearInterval(this.timer);
try //解决一个子弹同时碰撞多个敌机，无法消失多次的问题。
gamebox.removeChild(this.roleImg); //子弹消失
catch (e)
return;
enemys[i].blood--;
enemys[i].checkblood();
//6.敌方飞机的类
class Enemy extends Role
constructor(w, h, x, y, imgurl, boomurl, speed, blood, score) //speed速度,blood血量,score分数
super(w, h, x, y, imgurl, boomurl); //继承的
this.speed = speed; //自身的
this.blood = blood;
this.score = score;
this.createRole(); //继承创建敌机的图片
this.enemyMove();
this.setEnemyAttrbute(); //给敌机添加属性(包括自定义和默认的)
enemyMove()
this.roleImg.timer = setInterval(() =>
this.y += this.speed;
if (this.y > gamebox.offsetHeight)
clearInterval(this.roleImg.timer);
gamebox.removeChild(this.roleImg);
this.roleImg.style.top = this.y + 'px';
this.enemyhit();
, 1000 / 60);
//给每个敌机添加属性(自定义和默认)
setEnemyAttrbute()
this.roleImg.className = 'enemy'; //通过类名获取敌机
this.roleImg.blood = this.blood; //自定义属性，将敌机的血量绑定在敌机上面。
this.roleImg.score = this.score;
let _this = this;
this.roleImg.checkblood = function() //每个敌机上面绑定的血量的方法
//this->this.roleImg 角色图片
if (this.blood === 0) //敌机消失
this.className = ''; //清除里面的类名。
this.src = _this.boomurl; //替换图片
clearInterval(this.timer); //关闭敌机定时器
setTimeout(() => //敌机延迟300ms消失
gamebox.removeChild(this);
, 300);
allscore += this.score;
score.innerHTML = allscore;
//敌机碰撞我方飞机。
enemyhit()
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)
const enemys = docu以上是关于纯原生JS使用ES6语法实现飞机大战的主要内容，如果未能解决你的问题，请参考以下文章
[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)