这篇博客介绍了如何使用原生JavaScript编写一款简单的飞机大战游戏。游戏包括地图、飞机、敌人和子弹四个主要部分，玩家可以通过键盘控制飞机移动和射击。代码中定义了Map、Flyer、Diren和Zidan四个类，分别对应游戏的不同元素，并实现了游戏的基本功能，如飞机移动、射击、敌人生成和碰撞检测。
闲时 3小时制作飞机大战，可以自己调整参数进行游戏， 整体分为4大类，地图，飞机，敌人，子弹，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞机大战</title>
</head>
<body>
总积分:<span id="score">0</span>
上下左右，J射击K炸弹
</body>
</html>
<script>
class Map {
// 地图类
static status = false // 开始游戏开关
static height = 400;
static width = 400;
static score = 0
static map = null
static isBound = null
static changeScore(bool, num = 1) {
// 地图分数
if (bool) {
Map.score += num
} else {
Map.score -= num
}
document.getElementById('score').innerText = Map.score
}
constructor() {
Map.status = true
this._initMap()
this.getBound()
}
_initMap() {
// 初始化地图
document.body.style.overflow = 'hidden'
let div = document.createElement('div')
div.style = `height:${Map.height}px;width:${Map.width}px;
border:1px solid;margin:100px auto;`
this.div = div
Map.map = this
document.body.appendChild(div)
}
getBound() {
// 地图边界
let top = this.div.offsetTop
let bottom = this.div.offsetTop + this.div.offsetHeight
let left = this.div.offsetLeft
let right = this.div.offsetLeft + this.div.offsetWidth
Map.isBound = { top, bottom, left, right }
return { top, bottom, left, right }
}
pause() {
// 游戏状态
Map.status = !Map.status
}
}
class Flyer {
static height = 10;
static width = 10;
static speed = 3;
static imgUrl = ''
static boomTime = 3
constructor() {
this.map = Map.map
this.isBound = Map.isBound
最低0.47元/天 解锁文章
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
