decibel-game/module/game.js

import * as PIXI from "pixi.js";
import "pixi-plugin-bump";
const { Application, Sprite, Container, TextStyle, Text } = PIXI;
const { resources } = PIXI.loader;
import { loaderRes } from "./util";
import GroundData from "./groudData";

const GAME_STATE_ON = "游戏开始";
const GAME_STATE_OVER = "游戏失败";

class Game {
    constructor(wrapper) {
        this.gameState = GAME_STATE_ON;
        this.wrapper = wrapper;
        this.roleJump = false; //跳起状态
        this.fallingDown = false; //下坠状态
        this.decibel = 0; //分贝总和
        this.init();
    }

    //底部小游戏
    init() {
        this.app = new Application({
            width: 750,
            height: 532,
            backgroundColor: "0xdd4a68"
        });
        this.wrapper.appendChild(this.app.view);
        this.bump = new PIXI.extras.Bump();
        loaderRes([`/60064.png`, `/ground.png`], this.loadedSource, this);
    }
    loadedSource() {
        this.initGround();
        this.initRole();
        this.initGameOver();
        this.gameState = GAME_STATE_ON;
        // make the stage interactive...
        // this.app.view.addEventListener("touchstart", this.jump.bind(this));
    }
    //创建角色
    initRole() {
        this.role = new Sprite(resources["/60064.png"].texture);
        this.role.x = 375;
        this.role.y = this.groundData[0].y;
        this.role._vy = 4;
        this.role.anchor.x = 0.5;
        this.role.anchor.y = 1;
        this.role.scale.x = -1;
        this.app.stage.addChild(this.role);
        this.app.ticker.add(this.jumpLoop, this);
    }
    // 创建地面容器
    initGround() {
        this.groundArr = [];
        this.groundData = new GroundData({
            stageHeight: 532,
            groundNum: 100,
            gaps: [100, 200],
            widths: [60, 500],
            heights: [100, 150]
        });
        this.groundContainer = new Container();
        this.groundContainer._vx = 2;
        this.app.stage.addChild(this.groundContainer);
        this.groundData.forEach(this.createGround.bind(this));
        this.groundWalk();
    }
    //生成黑色地面
    createGround({ width, height, x, y }) {
        const ground = new Sprite(resources["/ground.png"].texture);
        ground.x = x;
        ground.y = y;
        ground.width = width;
        ground.height = height;
        this.groundArr.push(ground);
        this.groundContainer.addChild(ground);
    }

    walkLoop() {
        this.groundContainer.x -= this.groundContainer._vx;
        let rolePosX = Math.abs(this.groundContainer.x - 375); //人物所在位置
        let rolePosY = this.role.y;

        if (rolePosY >= 532) {
            console.log("掉坑里挂了");
            this.gameOver();
            return;
        }

        let index = this.groundData.findIndex(
            ground =>
                rolePosX >= ground.x && rolePosX <= ground.x + ground.width
        );
        if (index >= 0) {
            /**
             * 人物下方的方块下标
             * 判断是否和方块有碰撞
             */
            let ground = this.groundArr[index];
            if (ground.y <= rolePosY) {
                let collision = this.bump.hit(
                    this.role,
                    ground,
                    true,
                    true,
                    true
                );
                console.log("collision", collision);
                if (collision) {
                    switch (collision) {
                        case "bottom":
                            console.log("站上了");
                            this.standGround();
                            break;
                        default:
                            console.log("撞上了");
                            this.gameOver();
                            break;
                    }
                }
            }
        } else {
            /**
             * 掉坑里了
             * 如果不是跳起状态，默认下坠
             *  */
            console.log("在坑里的范围内");
            if (!this.roleJump && !this.fallingDown) {
                this.fallDown();
            }
        }
    }

    standGround() {
        this.app.ticker.remove(this.downLoop, this);
        this.roleJump = false;
        this.fallingDown = false;
    }

    initGameOver() {
        this.gameOverContainer = new Container();
        this.gameOverContainer.interactive = true;
        let style = new TextStyle({
            fontFamily: "Arial",
            fontSize: 36,
            fill: "white",
            stroke: "#ff3300",
            strokeThickness: 4,
            dropShadow: true,
            dropShadowColor: "#000000",
            dropShadowBlur: 4,
            dropShadowAngle: Math.PI / 6,
            dropShadowDistance: 6
        });
        this.gameoverText = new Text(`${GAME_STATE_OVER} 重新开始`, style);
        this.gameoverText.interactive = true;
        this.gameoverText.buttonMode = true;

        this.gameOverContainer.addChild(this.gameoverText);
        this.gameoverText.on("pointerdown", this.restartGame, this);

        this.gameOverContainer.visible = false;
        this.gameOverContainer.x = 375 - this.gameOverContainer.width / 2;
        this.gameOverContainer.y = 220;
        this.app.stage.addChild(this.gameOverContainer);
    }

    gameOver() {
        this.roleJump = false;
        this.fallingDown = false;
        this.app.ticker.remove(this.fallDownLoop, this);
        this.gameOverContainer.visible = true;
        this.gameState = GAME_STATE_OVER;
        this.app.ticker.stop();
    }

    restartGame() {
        console.log("restartGame");
        this.gameState = GAME_STATE_ON;
        this.groundContainer.x = 0;
        this.role.y = this.groundData[0].y;
        this.gameOverContainer.visible = false;
        this.decibel = 0;
        this.app.ticker.start();
    }

    groundWalk() {
        this.app.ticker.add(this.walkLoop, this);
    }

    groundStop() {
        this.app.ticker.remove(this.walkLoop, this);
    }
    // 跳起，有一个最高值
    jump(decibel) {
        if (this.gameState === GAME_STATE_OVER) return;
        if (this.decibel >= 80) return;
        this.decibel += decibel;
        this.roleJump = true;
        this.fallingDown = false;
        this.app.ticker.remove(this.fallDownLoop, this);
        this.app.ticker.remove(this.downLoop, this);
    }
    jumpLoop() {
        if (this.decibel > 0) {
            let distance = Math.min(this.role._vy, this.decibel);
            this.role.y -= distance;
            this.decibel -= distance;
            console.log("distance,decibel", distance, this.decibel);
            if (this.decibel === 0) {
                this.app.ticker.add(this.downLoop, this);
            }
        }
    }

    downLoop() {
        this.roleJump = true;
        this.role.y += this.role._vy;
    }

    fallDownLoop() {
        this.role.y += this.role._vy;
    }

    fallDown() {
        this.fallingDown = true;
        this.app.ticker.add(this.fallDownLoop, this);
    }
}

export default Game;