JavaScript之打飞机小游戏 js css
先引入 jquery-1.12.4.min.js 和 lodash.min.js
css
.container{
width: 320px;
height: 568px;
margin: 0 auto;
text-align: center;
position: relative;
overflow: hidden;
}
.start-page{
width: 320px;
height: 568px;
background: url('../images/start_bg.png');
/* display: none; */
}
.start-btn{
width: 100px;
height: 40px;
outline: none;
border-radius: 10px;
position: absolute;
top: 450px;
left: calc(50% - 50px);
}
.playing-page{
display: none;
width: 320px;
height: 568px;
background: url('../images/playing_bg.png');
}
.mark-column{
float: left;
}
.game-over{
display: none;
position: absolute;
background-color: #a8aaab;
top: calc(50% - 70px);
left: calc(50% - 70px);
text-align: center;
padding: 20px;
z-index: 2;
}
.player{
width: 66px;
height: 80px;
background: url('../images/player.gif');
position: absolute;
top: calc(50% + 150px);
left: calc(50% - 33px);
}
/* 子弹 */
.bullet{
width: 6px;
height: 14px;
background: url('../images/bullet.png');
position: absolute;
}
/* 小飞机 */
.enemy-s{
width: 34px;
height: 24px;
background: url('../images/enemy1.png');
position: absolute;
}
/* 中飞机 */
.enemy-m{
width: 46px;
height: 60px;
background: url('../images/enemy2.png');
position: absolute;
}
/* 打飞机 */
.enemy-l{
width: 110px;
height: 164px;
background: url('../images/enemy3.png');
position: absolute;
}
js
class Bullet {
constructor() {
this.node = null;
}
init(player) {
this.node = $('<span>').addClass('bullet').appendTo('#playingPage');
this.node.css({
left: player.position().left + player.outerWidth() / 2 - this.node.innerWidth() / 2,
top: player.position().top
});
}
move() {
this.node.css('top', this.node.position().top - 20); // 相对于子弹自己的位置减相应的距离
}
}
class Enemy {
constructor(className, speed, hp, boomBg, score) {
this.node = null; // 保存敌机节点
this.isDie = false;
this.className = className;
this.speed = speed;
this.hp = hp;
this.boomBg = boomBg;
this.dieTime = 5;
this.score = score;
}
init() {
this.node = $('<div>').addClass(this.className).appendTo('#playingPage');
this.node.css({
left: Math.random() * ($('#playingPage').innerWidth() - this.node.outerWidth()), // 敌机上方随机范围内出现
top: -this.node.outerHeight()
})
}
move(totalScore) { // 不同分数传参不同
if (totalScore <= 10000) {
this.node.css('top', this.node.position().top + this.speed);
} else if (totalScore < 20000) {
this.node.css('top', this.node.position().top + this.speed + 3);
} else if (totalScore < 30000) {
this.node.css('top', this.node.position().top + this.speed + 5);
} else {
this.node.css('top', this.node.position().top + this.speed + 10);
}
}
}
class Game {
constructor() {
this.player = null; // 保存玩家节点
this.bulletsAry = []; // 子弹数组
this.enemysAry = []; // 敌机数组
this.totalScore = 0; // 总分
this.playingTime = null; // 时间函数
}
gameStart() {
$('#startBtn').click(() => {
$('#startPage').hide(); // 隐藏
$('#playingPage').show(); // 显示
this.initPage();
this.createPlayer();
})
}
// 游戏页面初始化
initPage() {
let count = 0;
this.playingTime = setInterval(() => {
count++;
this.createBullet(count);
this.moveBg();
this.moveBullet();
this.removeBullet();
this.createEnemy(count);
this.moveEnemy();
this.removeEnemy();
this.boom();
}, 20)
}
moveBg() {
let y = parseInt($('#playingPage').css("background-position-y"));
y++;
if (y >= $('#playingPage').innerHeight()) {
y = 0;
}
$('#playingPage').css("background-position-y", y);
}
// 创建玩家
createPlayer() {
this.player = new Player();
this.player.init();
this.player.move();
}
// 创建子弹
createBullet(count) {
if (count % 5 == 0) {
let bullet = new Bullet();
bullet.init(this.player.node);
this.bulletsAry.push(bullet);
}
}
// 子弹移动
moveBullet() {
for (let bullet of this.bulletsAry) {
bullet.move();
}
}
// 删除子弹
removeBullet() {
for (let i = 0; i < this.bulletsAry.length; i++) {
if (this.bulletsAry[i].node.position().top <= 0) {
this.bulletsAry[i].node.remove(); // 删除子弹节点
this.bulletsAry.splice(i, 1); // 删除数组里面的子弹数据
}
}
}
// 创建敌机
createEnemy(count) {
if (count % 20 == 0) {
let enemy = new Enemy('enemy-s', 5, 1, 'enemy1_boom.gif', 1000); // 实参：背景图、速度、血量、死亡背景图、分数
enemy.init();
this.enemysAry.push(enemy); // 将每一个实例化对象push到数组里面
}
if (count % 80 == 0) {
let enemy = new Enemy('enemy-m', 3, 3, 'enemy2_boom.gif', 2000);
enemy.init();
this.enemysAry.push(enemy);
}
if (count % 300 == 0) {
let enemy = new Enemy('enemy-l', 1, 7, 'enemy3_boom.gif', 3000);
enemy.init();
this.enemysAry.push(enemy);
}
}
// 移动敌机
moveEnemy() {
for (let enemy of this.enemysAry) { // 遍历数组，取到每一个实例化对象enemy
if (!enemy.isDie) { // 判断敌机是否死亡，死亡后不调用移动方法
enemy.move(this.totalScore);
}
}
}
// 删除敌机
removeEnemy() {
for (let i = 0; i < this.enemysAry.length; i++) {
if (this.enemysAry[i].node.position().top >= $('#playingPage').innerHeight()) { // 敌机超出范围删除
this.enemysAry[i].node.remove();
this.enemysAry.splice(i, 1);
} else if (this.enemysAry[i].isDie) { // 判断敌机是否死亡
this.enemysAry[i].dieTime--; // 敌机死亡时间减为0删除敌机
if (this.enemysAry[i].dieTime <= 0) {
this.enemysAry[i].node.remove();
this.enemysAry.splice(i, 1);
}
}
}
}
// 判断碰撞
boom() {
for (let i = 0; i < this.enemysAry.length; i++) { // 获取敌机的每一个边的距离
let enemyTop = this.enemysAry[i].node.position().top;
let enemyBottom = this.enemysAry[i].node.position().top + this.enemysAry[i].node.outerHeight();
let enemyLeft = this.enemysAry[i].node.position().left;
let enemyRight = this.enemysAry[i].node.position().left + this.enemysAry[i].node.outerWidth();
for (let j = 0; j < this.bulletsAry.length; j++) { // 获取子弹每一个边的距离
let bulletsTop = this.bulletsAry[j].node.position().top;
let bulletsBottom = this.bulletsAry[j].node.position().top + this.bulletsAry[j].node.outerHeight();
let bulletsLeft = this.bulletsAry[j].node.position().left;
let bulletsRight = this.bulletsAry[j].node.position().left + this.bulletsAry[j].node.outerWidth();
// 判断子弹是否和飞机碰撞，四个临界点
if (enemyBottom >= bulletsTop && enemyLeft <= bulletsRight && enemyRight >= bulletsLeft && enemyTop <= bulletsBottom) {
this.bulletsAry[j].node.remove();
this.bulletsAry.splice(j, 1);
this.enemysAry[i].hp--;
if (this.enemysAry[i].hp == 0) {
this.enemysAry[i].node.css('background', `url(./images/${this.enemysAry[i].boomBg})`); //敌机死亡换图片
this.enemysAry[i].isDie = true; // 敌机死亡状态变为true
this.totalScore += this.enemysAry[i].score; // 分数
$('#mark').text(this.totalScore);
}
}
}
// 判断飞机是否和敌机相撞
let playerTop = this.player.node.position().top;
let playerBottom = this.player.node.position().top + this.player.node.outerHeight();
let playerLeft = this.player.node.position().left;
let playerRight = this.player.node.position().left + this.player.node.outerWidth();
if (enemyBottom >= playerTop + 40 && enemyLeft <= playerRight && enemyRight >= playerLeft && enemyTop <= playerBottom - 20) {
this.player.node.css('background', 'url(./images/player_boom.gif)');
this.gameOver();
}
}
}
gameOver() {
clearInterval(this.playingTime);
$('#playingPage').off('mousemove'); // JQuery删除事件
$('.game-over').show();
$('#markEnd').text(this.totalScore); // 文本显示内容
$('#continueBtn').click(function () {
location.reload(); // 重新加载页面
// history.go(0); // 返回历史上一个页面
})
}
}
new Game().gameStart();
class Player {
constructor() {
this.node = null;
}
init() {
this.node = $('<div>').addClass('player').appendTo('#playingPage');
}
move() {
$('#playingPage').mousemove((e) => {
let { pageX, pageY } = e;
let moveX = pageX - $('#playingPage').offset().left;
let moveY = pageY - $('#playingPage').offset().top;
this.node.css({
left: moveX - this.node.outerWidth() / 2,
top: moveY - this.node.outerHeight() / 2
})
})
}
}
