新增素材

index.html

@@ -18,13 +18,12 @@
             <!-- this is cemera area -->
             <div class="mod-camera">
                 <video id="cameraVideo" muted playsinline="true"></video>
+                <!-- this is game area s-->
+                <div class="mod-game"></div>
+                <!-- this is game area e-->
             </div>
             <!-- this is cemera area -->
 
-            <!-- this is game area s-->
-            <div class="mod-game"></div>
-            <!-- this is game area e-->
-
             <!-- this is record area -->
             <!-- <div class="mod-record">点击录制</div> -->
             <!-- this is record area -->

module/game.js

@@ -3,77 +3,152 @@ import "pixi-plugin-bump";
 const { Application, Sprite, Container, TextStyle, Text } = PIXI;
 const { resources } = PIXI.loader;
 import { loaderRes } from "./util";
-import GroundData from "./groudData";
+import createGroundData from "./groudData";
 
 const GAME_STATE_ON = "游戏开始";
 const GAME_STATE_OVER = "游戏失败";
 
+const ROLESTATE = {
+    READY: "READY",
+    RUN: "RUN",
+    JUMP: "JUMP",
+    DOWN: "DOWN"
+};
+
 class Game {
     constructor(wrapper) {
+        this.stageWidth = 750;
+        this.stageHeight = 1334;
         this.gameState = GAME_STATE_ON;
         this.wrapper = wrapper;
         this.roleJump = false; //跳起状态
         this.fallingDown = false; //下坠状态
         this.decibel = 0; //分贝总和
         this.init();
+        this.initProxy();
     }
 
     //底部小游戏
     init() {
         this.app = new Application({
-            width: 750,
-            height: 532,
-            backgroundColor: "0xdd4a68"
+            width: this.stageWidth,
+            height: this.stageHeight,
+            transparent: true
         });
         this.wrapper.appendChild(this.app.view);
         this.bump = new PIXI.extras.Bump();
-        loaderRes([`/60064.png`, `/ground.png`], this.loadedSource, this);
+        loaderRes(["/scene.json"], this.loadedSource, this);
+    }
+    initProxy() {
+        Object.defineProperty(this, "roleState", {
+            configurable: true,
+            enumerable: true,
+            get: () => {
+                return this._roleState;
+            },
+            set: value => {
+                this._roleState = value;
+                this.clearRoleStateEffect();
+
+                switch (value) {
+                    case ROLESTATE.READY:
+                        this.roleReadyStep = 0;
+                        this.roleReadyLoop();
+                        break;
+                    case ROLESTATE.RUN:
+                        this.roleRunStep = 0;
+                        this.roleRunLoop();
+                        break;
+                    case ROLESTATE.JUMP:
+                        this.role.texture =
+                            PIXI.utils.TextureCache[`p_jump_0.png`];
+                        break;
+                    case ROLESTATE.DOWN:
+                        this.role.texture =
+                            PIXI.utils.TextureCache[`p_jump_1.png`];
+                        break;
+                }
+            }
+        });
+    }
+    clearRoleStateEffect() {
+        clearTimeout(this.roleReadyTimer);
+        clearTimeout(this.roleRunTimer);
+    }
+    roleReadyLoop() {
+        this.roleReadyTimer = setTimeout(() => {
+            this.role.texture =
+                PIXI.utils.TextureCache[
+                    `p_stand_${this.roleReadyStep % 2}.png`
+                ];
+            this.roleReadyStep++;
+            this.roleReadyLoop();
+        }, 500);
     }
+
+    roleRunLoop() {
+        this.roleRunTimer = setTimeout(() => {
+            this.role.texture =
+                PIXI.utils.TextureCache[`p_run_${this.roleRunStep % 2}.png`];
+            this.roleRunStep++;
+            this.roleRunLoop();
+        }, 100);
+    }
+
     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 = Sprite.fromFrame("people.png");
+        this.role.x = this.stageWidth / 2;
+        this.role.y = this.stageHeight - this.groundData[0].height + 24; //初始化位置
         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);
+        this.roleState = ROLESTATE.READY;
     }
     // 创建地面容器
     initGround() {
         this.groundArr = [];
-        this.groundData = new GroundData({
-            stageHeight: 532,
-            groundNum: 100,
-            gaps: [100, 200],
-            widths: [60, 500],
-            heights: [100, 150]
-        });
+        this.totalWidth = 0;
+        this.groundData = createGroundData();
         this.groundContainer = new Container();
-        this.groundContainer._vx = 2;
+        this.groundContainer._vx = 2.5;
         this.app.stage.addChild(this.groundContainer);
         this.groundData.forEach(this.createGround.bind(this));
-        this.groundWalk();
+        setTimeout(() => {
+            this.groundWalk();
+            this.roleState = ROLESTATE.RUN;
+        }, 3000);
     }
-    //生成黑色地面
-    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);
+    //生成地面
+    createGround(groundData) {
+        let { height, blockNum, gap } = groundData;
+        this.totalWidth += gap;
+        const groundUnitContainer = new Container();
+        groundData.x = groundUnitContainer.x = this.totalWidth;
+        groundData.y = groundUnitContainer.y = this.stageHeight - height + 24; //草地高度除外
+        groundData.width = blockNum * 100;
+        groundUnitContainer.cacheAsBitmap = true;
+        let totalX = 0;
+        for (let i = 0; i < blockNum; i++) {
+            const ground = Sprite.fromFrame(
+                `bg_${i === 0 ? "l" : i === blockNum - 1 ? "r" : "m"}.png`
+            );
+            ground.x = totalX;
+            ground.y = -24; //负值 用于检测
+            groundUnitContainer.addChild(ground);
+            totalX += ground.width;
+        }
+        this.totalWidth += groundData.width;
+        this.groundArr.push(groundUnitContainer);
+        this.groundContainer.addChild(groundUnitContainer);
     }
 
     walkLoop() {
@@ -81,7 +156,11 @@ class Game {
         let rolePosX = Math.abs(this.groundContainer.x - 375); //人物所在位置
         let rolePosY = this.role.y;
 
-        if (rolePosY >= 532) {
+        if (rolePosX >= this.totalWidth) {
+            console.log("完成游戏");
+            this.gameOver();
+            return;
+        } else if (rolePosY >= this.stageHeight) {
             console.log("掉坑里挂了");
             this.gameOver();
             return;
@@ -132,6 +211,7 @@ class Game {
     }
 
     standGround() {
+        this.roleState = ROLESTATE.RUN;
         this.app.ticker.remove(this.downLoop, this);
         this.roleJump = false;
         this.fallingDown = false;
@@ -207,6 +287,7 @@ class Game {
             this.role.y -= distance;
             this.decibel -= distance;
             console.log("distance,decibel", distance, this.decibel);
+            this.roleState = ROLESTATE.JUMP;
             if (this.decibel === 0) {
                 this.app.ticker.add(this.downLoop, this);
             }
@@ -215,6 +296,7 @@ class Game {
 
     downLoop() {
         this.roleJump = true;
+        this.roleState = ROLESTATE.DOWN;
         this.role.y += this.role._vy;
     }
 
@@ -224,6 +306,7 @@ class Game {
 
     fallDown() {
         this.fallingDown = true;
+        this.roleState = ROLESTATE.DOWN;
         this.app.ticker.add(this.fallDownLoop, this);
     }
 }

module/groudData.js

@@ -1,3 +1,53 @@
+export default function createGroundData() {
+    return [
+        {
+            height: 572, // px
+            blockNum: 6, // kuai
+            gap: 0 //px
+        },
+        {
+            height: 572,
+            blockNum: 6,
+            gap: 100
+        },
+        {
+            height: 572,
+            blockNum: 6,
+            gap: 200
+        },
+        {
+            height: 572,
+            blockNum: 4,
+            gap: 300
+        },
+        {
+            height: 572,
+            blockNum: 2,
+            gap: 200
+        },
+        {
+            height: 572,
+            blockNum: 6,
+            gap: 100
+        },
+        {
+            height: 572,
+            blockNum: 4,
+            gap: 200
+        },
+        {
+            height: 572,
+            blockNum: 3,
+            gap: 200
+        },
+        {
+            height: 572,
+            blockNum: 6,
+            gap: 300
+        }
+    ];
+}
+
 class GroundData {
     /**
      *
@@ -19,7 +69,10 @@ class GroundData {
         let groundData = [];
         while (groundNum > 0) {
             let gap = this.getRandomBetweenTwoNumbers(gaps[0], gaps[1]);
-            let width = totalWidth === 0 ? 750 : this.getRandomBetweenTwoNumbers(widths[0], widths[1]);
+            let width =
+                totalWidth === 0
+                    ? 750
+                    : this.getRandomBetweenTwoNumbers(widths[0], widths[1]);
             let height = this.getRandomBetweenTwoNumbers(
                 heights[0],
                 heights[1]
@@ -34,7 +87,7 @@ class GroundData {
             groundNum--;
         }
 
-        return groundData
+        return groundData;
     }
 
     getRandomBetweenTwoNumbers(start, end) {
@@ -42,4 +95,4 @@ class GroundData {
     }
 }
 
-export default GroundData;
+// export default GroundData;

module/media.js

@@ -59,8 +59,8 @@ class Media {
                     audio: true,
                     video: {
                         facingMode: "user",
-                        width: { min: 375, ideal: 750, max: 1280 },
-                        height: { min: 800, ideal: 900, max: 1080 }
+                        width: { min: 640, ideal: 1024, max: 1600 },
+                        height: { min: 480, ideal: 768, max: 1200 }
                     }
                 })
                 .then(stream => {
@@ -81,10 +81,10 @@ class Media {
                     };
                 })
                 .catch(error => {
-                    alert("get access to the camera error:" + error.message);
+                    console.error("get access to the camera error:" + error.message);
                 });
         } else {
-            alert("we can not get access to the camera!");
+            console.error("we can not get access to the camera!");
         }
     }
 

static/scene.json

@@ -0,0 +1,164 @@
+{"frames": {
+
+"bg_cactus_b.png":
+{
+	"frame": {"x":159,"y":1029,"w":42,"h":18},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":4,"y":0,"w":42,"h":18},
+	"sourceSize": {"w":50,"h":18}
+},
+"bg_cactus_m.png":
+{
+	"frame": {"x":159,"y":973,"w":50,"h":20},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":20},
+	"sourceSize": {"w":50,"h":20}
+},
+"bg_cactus_t.png":
+{
+	"frame": {"x":159,"y":995,"w":44,"h":32},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":3,"y":0,"w":44,"h":32},
+	"sourceSize": {"w":50,"h":32}
+},
+"bg_l.png":
+{
+	"frame": {"x":104,"y":2,"w":100,"h":572},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":572},
+	"sourceSize": {"w":100,"h":572}
+},
+"bg_m.png":
+{
+	"frame": {"x":2,"y":576,"w":100,"h":572},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":572},
+	"sourceSize": {"w":100,"h":572}
+},
+"bg_r.png":
+{
+	"frame": {"x":2,"y":2,"w":100,"h":572},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":572},
+	"sourceSize": {"w":100,"h":572}
+},
+"danger1_l.png":
+{
+	"frame": {"x":159,"y":919,"w":50,"h":52},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":0,"y":2,"w":50,"h":52},
+	"sourceSize": {"w":50,"h":56}
+},
+"danger1_m.png":
+{
+	"frame": {"x":159,"y":861,"w":50,"h":56},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":56},
+	"sourceSize": {"w":50,"h":56}
+},
+"danger1_r.png":
+{
+	"frame": {"x":159,"y":803,"w":50,"h":56},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":56},
+	"sourceSize": {"w":50,"h":56}
+},
+"p_jump_0.png":
+{
+	"frame": {"x":104,"y":955,"w":53,"h":71},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":8,"w":53,"h":71},
+	"sourceSize": {"w":55,"h":79}
+},
+"p_jump_1.png":
+{
+	"frame": {"x":104,"y":576,"w":53,"h":79},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":0,"w":53,"h":79},
+	"sourceSize": {"w":55,"h":79}
+},
+"p_run_0.png":
+{
+	"frame": {"x":104,"y":882,"w":53,"h":71},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":0,"y":7,"w":53,"h":71},
+	"sourceSize": {"w":55,"h":79}
+},
+"p_run_1.png":
+{
+	"frame": {"x":104,"y":807,"w":53,"h":73},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":0,"y":6,"w":53,"h":73},
+	"sourceSize": {"w":55,"h":79}
+},
+"p_run_2.png":
+{
+	"frame": {"x":104,"y":1028,"w":53,"h":69},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":0,"y":5,"w":53,"h":69},
+	"sourceSize": {"w":55,"h":79}
+},
+"p_run_3.png":
+{
+	"frame": {"x":104,"y":732,"w":53,"h":73},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":0,"y":4,"w":53,"h":73},
+	"sourceSize": {"w":55,"h":79}
+},
+"p_run_4.png":
+{
+	"frame": {"x":104,"y":657,"w":53,"h":73},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":0,"y":6,"w":53,"h":73},
+	"sourceSize": {"w":55,"h":79}
+},
+"p_stand_0.png":
+{
+	"frame": {"x":159,"y":576,"w":51,"h":75},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":2,"y":4,"w":51,"h":75},
+	"sourceSize": {"w":55,"h":79}
+},
+"p_stand_1.png":
+{
+	"frame": {"x":159,"y":653,"w":51,"h":73},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":2,"y":6,"w":51,"h":73},
+	"sourceSize": {"w":55,"h":79}
+},
+"people.png":
+{
+	"frame": {"x":159,"y":728,"w":50,"h":73},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":73},
+	"sourceSize": {"w":50,"h":73}
+}},
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "scene.png",
+	"format": "RGBA8888",
+	"size": {"w":212,"h":1150},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:10e3848d2813d150e0cd0e6777aeec64$"
+}
+}

style.scss

@@ -13,14 +13,15 @@ body {
     height: 100%;
 }
 
-.mod-start{
+.mod-start {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .mod-camera {
-    height: 60%;
+    position: relative;
+    height: 100%;
 
     #cameraVideo {
         display: block;
@@ -28,18 +29,24 @@ body {
         height: 100%;
         object-fit: fill;
     }
-}
 
-.mod-game {
-    height: 40%;
-
-    canvas {
-        display: block;
+    .mod-game {
+        position: absolute;
+        left: 0;
+        bottom: 0;
         width: 100%;
         height: 100%;
+
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
     }
 }
 
+
+
 .mod-record {
     position: absolute;
     left: 50%;
@@ -54,7 +61,8 @@ body {
     background-color: rgba($color: red, $alpha: 1.0);
     color: #fff;
     user-select: none;
-    &:active{
+
+    &:active {
         opacity: .8;
     }
 }