码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript之打飞机小游戏 js css

时间:2019-09-22 22:03:03      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:tst   cli   asc   判断   保存   mys   tom   java   location   

先引入    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
            })
        })
    }
}

JavaScript之打飞机小游戏 js css

标签:tst   cli   asc   判断   保存   mys   tom   java   location   

原文地址:https://www.cnblogs.com/fatingGoodboy/p/11569033.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!