纯原生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 ${speed}px`;
}, 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.w}px;
height:${this.h}px;
position:absolute;
left:${this.x}px;
top:${this.y}px;
`;
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以上是关于纯原生JS使用ES6语法实现飞机大战的主要内容，如果未能解决你的问题，请参考以下文章
[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)