JavaScript之打飞机小游戏 js css

Posted 2022-11-24 fatinggoodboy

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

            )

        )