html+js打飞机小游戏
2018-09-28 本文已影响7人
不知道取个什么昵称不如娶个媳妇
发现许多前端大佬对于这种类的语法糖表示很不屑，有好多文章表示了否定的态度，老实说我觉得吧！还挺好用的，尤其是可以把方法直接写在class里面很棒。废话这么多，其他的就不说啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/css/index.css">
</head>
<body>
<div class="map">
<div class="start">
<img src="imgs/start_bg.png" alt="">
</div>
<div class="play">
<div class="bg">
<img src="imgs/bg.png" alt="">
</div>
<div class="fly">
<img src="imgs/self.gif" alt="">
</div>
</div>
</div>
</body>
</html>
<script>
function sel(attr){
return document.querySelector(attr);
}
</script>
<script>
class Map {
constructor(width, height, start_element, game_element) {
this.width = 320;
this.height = 568;
this.start_element = sel(".start");
this.game_element = sel(".play");
}
start_click() {
this.start_element.onclick = () => {
this.start_element.style.display = "none";
}
}
}
class Selffly {
constructor(width, height, fly_element, x, y, speed) {
this.width = 66;
this.height = 80;
this.fly_element = sel(".fly");
this.x = 0;
this.y = 0;
this.speed = 5;
}
move() {
let map = new Map();
map.game_element.onmousemove = (event) => {
let mouseX = event.pageX,
mouseY = event.pageY;
let _left = map.game_element.offsetLeft,
_top = map.game_element.offsetTop;
_left = mouseX - _left - this.width / 2;
_top = mouseY - _top - this.height / 2;
if (_left < 0) {
_left = 0;
}
if (_left > map.width - this.width) {
_left = map.width - this.width;
}
if (_top < 0) {
_top = 0;
}
if (_top > map.height - this.width) {
_top = map.height - this.width;
}
this.fly_element.style.left = _left + "px";
this.fly_element.style.top = _top + "px";
this.x = _left;
this.y = _top;
}
}
}
class Base {
constructor(width, height, Dom_element, x, y, speed, imgsrc) {
this.width = width;
this.height = height;
this.Dom_element = null;
this.x = x;
this.y = y;
this.speed = speed;
this.imgsrc = imgsrc;
this.slive = true;
}
createDom() {
this.Dom_element = document.createElement("img");
this.Dom_element.src = this.imgsrc;
this.Dom_element.style.position = "absolute";
this.Dom_element.style.width = this.width + "px";
this.Dom_element.style.height = this.height + "px";
this.Dom_element.style.left = this.x + "px";
this.Dom_element.style.top = this.y + "px";
let map = new Map();
map.game_element.appendChild(this.Dom_element);
}
move() {
this.y += this.speed;
this.Dom_element.style.top = this.y + "px";
let map = new Map();
if (this.y < 0 || this.y > map.height) {
this.Dom_element.parentNode.removeChild(this.Dom_element);
this.slive = false;
}
}
}
class Bullet extends Base {
constructor(width, height, Dom_element, x, y, speed, imgsrc) {
super(width, height, Dom_element, x, y, speed, imgsrc);
this.width = 6;
this.height = 14;
this.Dom_element = null;
this.x = selffly.x + selffly.width / 2;
this.y = selffly.y;
this.speed = -1;
this.imgsrc = "imgs/bullet.png";
}
}
class Enemy extends Base {
constructor(width, height, Dom_element, x, y, speed, imgsrc) {
super(width, height, Dom_element, x, y, speed, imgsrc)
this.width = width;
this.height = height;
this.Dom_element = null;
this.x = x;
this.y = y;
this.speed = speed;
this.imgsrc = imgsrc;
this.createDom();
}
}
class EnemyFactory {
createEnemy(type) {
if (type === "small") {
return new Enemy(
34,
24,
null,
Math.random() * (map.width - 34),
0,
1,
"imgs/small_fly.png");
}
if (type === "middle") {
return new Enemy(
46,
60,
null,
Math.random() * (map.width - 46),
0,
1,
"imgs/mid_fly.png");
}
if (type === "big") {
return new Enemy(
110,
164,
null,
Math.random() * (map.width - 110),
0,
1,
"imgs/big_fly.png");
}
}
}
class Game {
constructor(bulletarr) {
this.bulletarr = [];
this.enemys = [];
}
init() {
map.start_click();
this.play()
selffly.move();
}
createBullet() {
let bullet = new Bullet();
bullet.createDom();
this.bulletarr.push(bullet);
}
play() {
let count = 0;
setInterval(() => {
count++;
if (count % 20 === 0) {
this.createBullet();
}
for (let i = this.bulletarr.length - 1; i >= 0; i--) {
(this.bulletarr[i]).move();
if (!this.bulletarr[i].slive) {
this.bulletarr.splice(i, 1);
}
}
if (count % 30 === 0) {
let en = new EnemyFactory();
let fly_ = en.createEnemy("small");
this.enemys.push(fly_);
}
if (count % 60 === 0) {
let en = new EnemyFactory();
let fly_ = en.createEnemy("middle");
this.enemys.push(fly_);
}
if (count % 90 === 0) {
let en = new EnemyFactory();
let fly_ = en.createEnemy("big");
this.enemys.push(fly_);
}
for (let j = this.enemys.length - 1; j >= 0; j--) {
this.enemys[j].move();
if (!this.enemys[j].slive) {
this.enemys.splice(j, 1);
}
}
for (let i = this.bulletarr.length - 1; i >= 0; i--) {
const bullet = this.bulletarr[i];
for (let j = this.enemys.length - 1; j >= 0; j--) {
const enemy = this.enemys[j];
const b = this.check(bullet, enemy);
if (b) {
bullet.Dom_element.parentNode.removeChild(bullet.Dom_element);
enemy.Dom_element.parentNode.removeChild(enemy.Dom_element);
this.enemys.splice(j, 1);
this.bulletarr.splice(i, 1);
break;
}
}
}
}, 1000 / 240);
}
check(role1, role2) {
return !(role1.y > role2.y + role2.height
|| role1.y + role1.height < role2.y
|| role1.x + role1.width < role2.x
|| role1.x > role2.x + role2.width);
}
}
let map = new Map();
let selffly = new Selffly();
let game = new Game();
game.init();
</script>
飞机
