新增倒计时 烟花UI

module/game.js

@@ -1,13 +1,15 @@
 import * as PIXI from "pixi.js";
 import "pixi-plugin-bump";
 const { Application, Sprite, Container, TextStyle, Text } = PIXI;
-const { resources } = PIXI.loader;
+const { TextureCache } = PIXI.utils;
 import { loaderRes } from "./util";
 import createGroundData from "./groudData";
 
-const GAME_STATE_ON = "游戏开始";
-const GAME_STATE_OVER = "游戏失败";
-
+const GAME_RESULT_STATE = {
+    ON: "游戏开始",
+    OVER: "游戏失败",
+    SUCC: "通关完成"
+};
 const ROLESTATE = {
     READY: "READY",
     RUN: "RUN",
@@ -19,11 +21,46 @@ class Game {
     constructor(wrapper) {
         this.stageWidth = 750;
         this.stageHeight = 1334;
-        this.gameState = GAME_STATE_ON;
+
+        this.gameState = GAME_RESULT_STATE.ON;
         this.wrapper = wrapper;
         this.roleJump = false; //跳起状态
         this.fallingDown = false; //下坠状态
         this.decibel = 0; //分贝总和
+        //ui
+        this.uiGameTopTip = null; //游戏顶部提示
+        this.uiCountdown = null; //游戏开始倒计时
+        this.uiFireworksContanier = null; //烟花容器
+        this.fireworkOpts = {
+            green: {
+                delay: 0,
+                pos: {
+                    x: 588,
+                    y: 230
+                }
+            },
+            orange: {
+                delay: 300,
+                pos: {
+                    x: 290,
+                    y: 375
+                }
+            },
+            purple: {
+                delay: 500,
+                pos: {
+                    x: 400,
+                    y: 200
+                }
+            },
+            red: {
+                delay: 600,
+                pos: {
+                    x: 450,
+                    y: 370
+                }
+            }
+        };
         this.init();
         this.initProxy();
     }
@@ -47,6 +84,7 @@ class Game {
                 return this._roleState;
             },
             set: value => {
+                if (this._roleState === value) return;
                 this._roleState = value;
                 this.clearRoleStateEffect();
 
@@ -60,12 +98,10 @@ class Game {
                         this.roleRunLoop();
                         break;
                     case ROLESTATE.JUMP:
-                        this.role.texture =
-                            PIXI.utils.TextureCache[`p_jump_0.png`];
+                        this.role.texture = TextureCache[`p_jump_0.png`];
                         break;
                     case ROLESTATE.DOWN:
-                        this.role.texture =
-                            PIXI.utils.TextureCache[`p_jump_1.png`];
+                        this.role.texture = TextureCache[`p_jump_1.png`];
                         break;
                 }
             }
@@ -78,9 +114,7 @@ class Game {
     roleReadyLoop() {
         this.roleReadyTimer = setTimeout(() => {
             this.role.texture =
-                PIXI.utils.TextureCache[
-                    `p_stand_${this.roleReadyStep % 2}.png`
-                ];
+                TextureCache[`p_stand_${this.roleReadyStep % 2}.png`];
             this.roleReadyStep++;
             this.roleReadyLoop();
         }, 500);
@@ -89,7 +123,7 @@ class Game {
     roleRunLoop() {
         this.roleRunTimer = setTimeout(() => {
             this.role.texture =
-                PIXI.utils.TextureCache[`p_run_${this.roleRunStep % 2}.png`];
+                TextureCache[`p_run_${this.roleRunStep % 2}.png`];
             this.roleRunStep++;
             this.roleRunLoop();
         }, 100);
@@ -98,8 +132,35 @@ class Game {
     loadedSource() {
         this.initGround();
         this.initRole();
-        this.initGameOver();
-        this.gameState = GAME_STATE_ON;
+        this.initGameReady();
+        this.gameState = GAME_RESULT_STATE.ON;
+        this.readyStart();
+        this.initFireworks();
+    }
+    readyStart() {
+        this.uiCountdownTimes = 3;
+        this.uiCountdown.texture = TextureCache[`word_3.png`];
+        this.uiCountdown.visible = true;
+        this.uiCountdownTimer = setTimeout(this.countDownFn.bind(this), 1000);
+    }
+    countDownFn() {
+        this.uiCountdownTimes--;
+        if (this.uiCountdownTimes === 0) {
+            this.uiCountdown.texture = TextureCache[`word_start.png`];
+            this.gameStart();
+        } else if (this.uiCountdownTimes < 0) {
+            clearTimeout(this.uiCountdownTimer);
+            this.uiCountdown.visible = false;
+        } else {
+            this.uiCountdown.texture =
+                TextureCache[`word_${this.uiCountdownTimes}.png`];
+        }
+
+        this.uiCountdownTimer = setTimeout(this.countDownFn.bind(this), 1000);
+    }
+    gameStart() {
+        this.groundWalk();
+        this.roleState = ROLESTATE.RUN;
     }
     //创建角色
     initRole() {
@@ -122,13 +183,10 @@ class Game {
         this.groundContainer._vx = 2.5;
         this.app.stage.addChild(this.groundContainer);
         this.groundData.forEach(this.createGround.bind(this));
-        setTimeout(() => {
-            this.groundWalk();
-            this.roleState = ROLESTATE.RUN;
-        }, 3000);
+        this.totalWidth = this.groundContainer.width;
     }
     //生成地面
-    createGround(groundData) {
+    createGround(groundData, index, arr) {
         let { height, blockNum, gap } = groundData;
         this.totalWidth += gap;
         const groundUnitContainer = new Container();
@@ -142,13 +200,22 @@ class Game {
                 `bg_${i === 0 ? "l" : i === blockNum - 1 ? "r" : "m"}.png`
             );
             ground.x = totalX;
-            ground.y = -24; //负值 用于检测
+            ground.y = -24; //负值，刚好贴着地面。方便碰撞检测
             groundUnitContainer.addChild(ground);
             totalX += ground.width;
         }
         this.totalWidth += groundData.width;
         this.groundArr.push(groundUnitContainer);
         this.groundContainer.addChild(groundUnitContainer);
+
+        //最后一个，需要添加通关门UI
+        if (index === arr.length - 1) {
+            let uiCastle = Sprite.from("castle.png");
+            uiCastle.anchor.x = 0.7;
+            uiCastle.anchor.y = 1;
+            uiCastle.x = totalX;
+            groundUnitContainer.addChild(uiCastle);
+        }
     }
 
     walkLoop() {
@@ -156,9 +223,9 @@ class Game {
         let rolePosX = Math.abs(this.groundContainer.x - 375); //人物所在位置
         let rolePosY = this.role.y;
 
-        if (rolePosX >= this.totalWidth) {
+        if (rolePosX >= this.totalWidth - 375) {
             console.log("完成游戏");
-            this.gameOver();
+            this.gameSucc();
             return;
         } else if (rolePosY >= this.stageHeight) {
             console.log("掉坑里挂了");
@@ -217,52 +284,60 @@ class Game {
         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);
+    //开始倒计时
+    initGameReady() {
+        this.uiGameTopTip = Sprite.from("word_tips.png");
+        this.uiGameTopTip.anchor.x = 0.5;
+        this.uiGameTopTip.x = 375;
+        this.uiGameTopTip.y = 20;
+        this.app.stage.addChild(this.uiGameTopTip);
 
-        this.gameOverContainer.visible = false;
-        this.gameOverContainer.x = 375 - this.gameOverContainer.width / 2;
-        this.gameOverContainer.y = 220;
-        this.app.stage.addChild(this.gameOverContainer);
+        this.uiCountdown = Sprite.from("word_3.png");
+        this.uiCountdown.anchor.x = 0.5;
+        this.uiCountdown.anchor.y = 0.5;
+        this.uiCountdown.x = 375;
+        this.uiCountdown.y = 400;
+        this.app.stage.addChild(this.uiCountdown);
     }
 
     gameOver() {
         this.roleJump = false;
         this.fallingDown = false;
         this.app.ticker.remove(this.fallDownLoop, this);
-        this.gameOverContainer.visible = true;
-        this.gameState = GAME_STATE_OVER;
+        this.gameState = GAME_RESULT_STATE.OVER;
         this.app.ticker.stop();
     }
 
+    gameSucc() {
+        this.groundStop();
+        this.roleWalk();
+    }
+
     restartGame() {
         console.log("restartGame");
-        this.gameState = GAME_STATE_ON;
+        this.gameState = GAME_RESULT_STATE.ON;
         this.groundContainer.x = 0;
+        this.role.x = 375;
         this.role.y = this.groundData[0].y;
-        this.gameOverContainer.visible = false;
+        this.gameResultContainer.visible = false;
         this.decibel = 0;
+        this.roleState = ROLESTATE.RUN;
         this.app.ticker.start();
     }
+    roleWalk(){
+        this.app.ticker.add(this.roleWalkLoop, this);
+    }
+    roleStop(){
+        this.app.ticker.remove(this.roleWalkLoop, this);
+    }
+    roleWalkLoop() {
+        this.role.x += 2.5;
+        if (this.role.x >= 750 + this.role.width / 2) {
+            console.log("人物通关");
+            this.roleStop();
+            this.startFireworks();
+        }
+    }
 
     groundWalk() {
         this.app.ticker.add(this.walkLoop, this);
@@ -273,7 +348,7 @@ class Game {
     }
     // 跳起，有一个最高值
     jump(decibel) {
-        if (this.gameState === GAME_STATE_OVER) return;
+        if (this.gameState === GAME_RESULT_STATE.OVER) return;
         if (this.decibel >= 80) return;
         this.decibel += decibel;
         this.roleJump = true;
@@ -309,6 +384,51 @@ class Game {
         this.roleState = ROLESTATE.DOWN;
         this.app.ticker.add(this.fallDownLoop, this);
     }
+
+    initFireworks() {
+        this.uiFireworksContanier = new Container();
+        Object.keys(this.fireworkOpts).forEach(key => {
+            let firework = this.fireworkOpts[key];
+            firework.frameFirework = 0; //下标
+            firework.timer = null; //计时器
+
+            let uiFirework = Sprite.from(
+                `fireworks_${key}_${firework.frameFirework}.png`
+            ); //ui
+            uiFirework.anchor.x = 0.5;
+            uiFirework.anchor.y = 0.5;
+            uiFirework.x = firework.pos.x;
+            uiFirework.y = firework.pos.y;
+
+            firework.uiFirework = uiFirework;
+
+            this.uiFireworksContanier.addChild(uiFirework);
+        });
+        this.uiFireworksContanier.visible = false;
+        this.app.stage.addChild(this.uiFireworksContanier);
+    }
+
+    startFireworks() {
+        this.uiFireworksContanier.visible = true;
+
+        Object.keys(this.fireworkOpts).forEach(key => {
+            let firework = this.fireworkOpts[key];
+            firework.frameFirework = 0;
+            clearInterval(firework.timer);
+            setTimeout(() => {
+                firework.timer = setInterval(() => {
+                    firework.uiFirework.visible = (firework.frameFirework <= 6);
+                    if (firework.frameFirework <= 6) {
+                        firework.uiFirework.texture =
+                            TextureCache[
+                                `fireworks_${key}_${firework.frameFirework}.png`
+                            ];
+                    }
+                    firework.frameFirework = (firework.frameFirework + 1) % 12;
+                }, 100);
+            }, firework.delay);
+        });
+    }
 }
 
 export default Game;

module/media.js

@@ -56,29 +56,33 @@ class Media {
             // Not adding `{ audio: true }` since we only want video now
             navigator.mediaDevices
                 .getUserMedia({
-                    audio: true,
-                    video: {
-                        facingMode: "user",
-                        width: { min: 640, ideal: 1024, max: 1600 },
-                        height: { min: 480, ideal: 768, max: 1200 }
-                    }
+                    audio: true
+                    // ,
+                    // video: {
+                    //     facingMode: "user",
+                    //     width: { min: 640, ideal: 1024, max: 1600 },
+                    //     height: { min: 480, ideal: 768, max: 1200 }
+                    // }
                 })
                 .then(stream => {
-                    // Older browsers may not have srcObject
-                    if ("srcObject" in this.videoElement) {
-                        this.videoElement.srcObject = stream;
-                    } else {
-                        // Avoid using this in new browsers, as it is going away.
-                        this.videoElement.src = window.URL.createObjectURL(
-                            stream
-                        );
-                    }
-                    this.videoElement.onloadedmetadata = e => {
-                        this.videoElement.play();
-                        this.stream = stream;
-                        this.setAudio();
-                        this.getDecibel();
-                    };
+                    // // Older browsers may not have srcObject
+                    // if ("srcObject" in this.videoElement) {
+                    //     this.videoElement.srcObject = stream;
+                    // } else {
+                    //     // Avoid using this in new browsers, as it is going away.
+                    //     this.videoElement.src = window.URL.createObjectURL(
+                    //         stream
+                    //     );
+                    // }
+                    // this.videoElement.onloadedmetadata = e => {
+                    //     this.videoElement.play();
+                    //     this.stream = stream;
+                    //     this.setAudio();
+                    //     this.getDecibel();
+                    // };
+                    this.stream = stream;
+                    this.setAudio();
+                    this.getDecibel();
                 })
                 .catch(error => {
                     console.error("get access to the camera error:" + error.message);

static/scene.json

@@ -2,7 +2,7 @@
 
 "bg_cactus_b.png":
 {
-	"frame": {"x":159,"y":1029,"w":42,"h":18},
+	"frame": {"x":463,"y":403,"w":42,"h":18},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":4,"y":0,"w":42,"h":18},
@@ -10,7 +10,7 @@
 },
 "bg_cactus_m.png":
 {
-	"frame": {"x":159,"y":973,"w":50,"h":20},
+	"frame": {"x":1054,"y":467,"w":50,"h":20},
 	"rotated": false,
 	"trimmed": false,
 	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":20},
@@ -18,7 +18,7 @@
 },
 "bg_cactus_t.png":
 {
-	"frame": {"x":159,"y":995,"w":44,"h":32},
+	"frame": {"x":758,"y":252,"w":44,"h":32},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":3,"y":0,"w":44,"h":32},
@@ -26,7 +26,7 @@
 },
 "bg_l.png":
 {
-	"frame": {"x":104,"y":2,"w":100,"h":572},
+	"frame": {"x":206,"y":424,"w":100,"h":572},
 	"rotated": false,
 	"trimmed": false,
 	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":572},
@@ -34,7 +34,7 @@
 },
 "bg_m.png":
 {
-	"frame": {"x":2,"y":576,"w":100,"h":572},
+	"frame": {"x":104,"y":424,"w":100,"h":572},
 	"rotated": false,
 	"trimmed": false,
 	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":572},
@@ -42,15 +42,23 @@
 },
 "bg_r.png":
 {
-	"frame": {"x":2,"y":2,"w":100,"h":572},
+	"frame": {"x":2,"y":424,"w":100,"h":572},
 	"rotated": false,
 	"trimmed": false,
 	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":572},
 	"sourceSize": {"w":100,"h":572}
 },
+"castle.png":
+{
+	"frame": {"x":2,"y":2,"w":459,"h":420},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":459,"h":420},
+	"sourceSize": {"w":459,"h":420}
+},
 "danger1_l.png":
 {
-	"frame": {"x":159,"y":919,"w":50,"h":52},
+	"frame": {"x":1160,"y":658,"w":50,"h":52},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":0,"y":2,"w":50,"h":52},
@@ -58,7 +66,7 @@
 },
 "danger1_m.png":
 {
-	"frame": {"x":159,"y":861,"w":50,"h":56},
+	"frame": {"x":1160,"y":600,"w":50,"h":56},
 	"rotated": false,
 	"trimmed": false,
 	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":56},
@@ -66,15 +74,239 @@
 },
 "danger1_r.png":
 {
-	"frame": {"x":159,"y":803,"w":50,"h":56},
+	"frame": {"x":1160,"y":542,"w":50,"h":56},
 	"rotated": false,
 	"trimmed": false,
 	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":56},
 	"sourceSize": {"w":50,"h":56}
 },
+"fireworks_green_0.png":
+{
+	"frame": {"x":1173,"y":36,"w":34,"h":32},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":133,"y":135,"w":34,"h":32},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_green_1.png":
+{
+	"frame": {"x":476,"y":951,"w":54,"h":56},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":123,"y":121,"w":54,"h":56},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_green_2.png":
+{
+	"frame": {"x":1136,"y":860,"w":74,"h":64},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":115,"y":116,"w":74,"h":64},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_green_3.png":
+{
+	"frame": {"x":1054,"y":343,"w":118,"h":122},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":92,"y":92,"w":118,"h":122},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_green_4.png":
+{
+	"frame": {"x":984,"y":494,"w":174,"h":178},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":64,"y":64,"w":174,"h":178},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_green_5.png":
+{
+	"frame": {"x":308,"y":674,"w":252,"h":248},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":25,"y":29,"w":252,"h":248},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_green_6.png":
+{
+	"frame": {"x":808,"y":252,"w":244,"h":240},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":29,"y":33,"w":244,"h":240},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_orange_0.png":
+{
+	"frame": {"x":1083,"y":901,"w":34,"h":32},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":133,"y":135,"w":34,"h":32},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_orange_1.png":
+{
+	"frame": {"x":420,"y":951,"w":54,"h":56},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":123,"y":121,"w":54,"h":56},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_orange_2.png":
+{
+	"frame": {"x":1060,"y":835,"w":74,"h":64},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":115,"y":116,"w":74,"h":64},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_orange_3.png":
+{
+	"frame": {"x":802,"y":887,"w":118,"h":122},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":92,"y":92,"w":118,"h":122},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_orange_4.png":
+{
+	"frame": {"x":808,"y":674,"w":174,"h":178},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":64,"y":64,"w":174,"h":178},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_orange_5.png":
+{
+	"frame": {"x":308,"y":424,"w":252,"h":248},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":25,"y":29,"w":252,"h":248},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_orange_6.png":
+{
+	"frame": {"x":808,"y":252,"w":244,"h":240},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":29,"y":33,"w":244,"h":240},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_purple_0.png":
+{
+	"frame": {"x":758,"y":286,"w":34,"h":32},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":133,"y":135,"w":34,"h":32},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_purple_1.png":
+{
+	"frame": {"x":364,"y":951,"w":54,"h":56},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":123,"y":121,"w":54,"h":56},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_purple_2.png":
+{
+	"frame": {"x":984,"y":835,"w":74,"h":64},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":115,"y":116,"w":74,"h":64},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_purple_3.png":
+{
+	"frame": {"x":682,"y":887,"w":118,"h":122},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":92,"y":92,"w":118,"h":122},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_purple_4.png":
+{
+	"frame": {"x":808,"y":494,"w":174,"h":178},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":64,"y":64,"w":174,"h":178},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_purple_5.png":
+{
+	"frame": {"x":717,"y":2,"w":252,"h":248},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":25,"y":29,"w":252,"h":248},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_purple_6.png":
+{
+	"frame": {"x":562,"y":645,"w":244,"h":240},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":29,"y":33,"w":244,"h":240},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_red_0.png":
+{
+	"frame": {"x":1173,"y":2,"w":34,"h":32},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":133,"y":135,"w":34,"h":32},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_red_1.png":
+{
+	"frame": {"x":308,"y":951,"w":54,"h":56},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":123,"y":121,"w":54,"h":56},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_red_2.png":
+{
+	"frame": {"x":971,"y":182,"w":74,"h":64},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":115,"y":116,"w":74,"h":64},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_red_3.png":
+{
+	"frame": {"x":562,"y":887,"w":118,"h":122},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":92,"y":92,"w":118,"h":122},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_red_4.png":
+{
+	"frame": {"x":971,"y":2,"w":174,"h":178},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":64,"y":64,"w":174,"h":178},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_red_5.png":
+{
+	"frame": {"x":463,"y":2,"w":252,"h":248},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":25,"y":29,"w":252,"h":248},
+	"sourceSize": {"w":300,"h":300}
+},
+"fireworks_red_6.png":
+{
+	"frame": {"x":562,"y":403,"w":244,"h":240},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":29,"y":33,"w":244,"h":240},
+	"sourceSize": {"w":300,"h":300}
+},
 "p_jump_0.png":
 {
-	"frame": {"x":104,"y":955,"w":53,"h":71},
+	"frame": {"x":1028,"y":901,"w":53,"h":71},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":1,"y":8,"w":53,"h":71},
@@ -82,7 +314,7 @@
 },
 "p_jump_1.png":
 {
-	"frame": {"x":104,"y":576,"w":53,"h":79},
+	"frame": {"x":1099,"y":674,"w":53,"h":79},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":1,"y":0,"w":53,"h":79},
@@ -90,7 +322,7 @@
 },
 "p_run_0.png":
 {
-	"frame": {"x":104,"y":882,"w":53,"h":71},
+	"frame": {"x":1154,"y":787,"w":53,"h":71},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":0,"y":7,"w":53,"h":71},
@@ -98,7 +330,7 @@
 },
 "p_run_1.png":
 {
-	"frame": {"x":104,"y":807,"w":53,"h":73},
+	"frame": {"x":922,"y":854,"w":53,"h":73},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":0,"y":6,"w":53,"h":73},
@@ -106,7 +338,7 @@
 },
 "p_run_2.png":
 {
-	"frame": {"x":104,"y":1028,"w":53,"h":69},
+	"frame": {"x":1083,"y":935,"w":53,"h":69},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":0,"y":5,"w":53,"h":69},
@@ -114,7 +346,7 @@
 },
 "p_run_3.png":
 {
-	"frame": {"x":104,"y":732,"w":53,"h":73},
+	"frame": {"x":1154,"y":712,"w":53,"h":73},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":0,"y":4,"w":53,"h":73},
@@ -122,7 +354,7 @@
 },
 "p_run_4.png":
 {
-	"frame": {"x":104,"y":657,"w":53,"h":73},
+	"frame": {"x":1099,"y":755,"w":53,"h":73},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":0,"y":6,"w":53,"h":73},
@@ -130,7 +362,7 @@
 },
 "p_stand_0.png":
 {
-	"frame": {"x":159,"y":576,"w":51,"h":75},
+	"frame": {"x":922,"y":929,"w":51,"h":75},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":2,"y":4,"w":51,"h":75},
@@ -138,7 +370,7 @@
 },
 "p_stand_1.png":
 {
-	"frame": {"x":159,"y":653,"w":51,"h":73},
+	"frame": {"x":975,"y":929,"w":51,"h":73},
 	"rotated": false,
 	"trimmed": true,
 	"spriteSourceSize": {"x":2,"y":6,"w":51,"h":73},
@@ -146,19 +378,59 @@
 },
 "people.png":
 {
-	"frame": {"x":159,"y":728,"w":50,"h":73},
+	"frame": {"x":1160,"y":467,"w":50,"h":73},
 	"rotated": false,
 	"trimmed": false,
 	"spriteSourceSize": {"x":0,"y":0,"w":50,"h":73},
 	"sourceSize": {"w":50,"h":73}
+},
+"word_1.png":
+{
+	"frame": {"x":1147,"y":2,"w":24,"h":159},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":24,"h":159},
+	"sourceSize": {"w":24,"h":159}
+},
+"word_2.png":
+{
+	"frame": {"x":1054,"y":182,"w":113,"h":159},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":113,"h":159},
+	"sourceSize": {"w":113,"h":159}
+},
+"word_3.png":
+{
+	"frame": {"x":984,"y":674,"w":113,"h":159},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":113,"h":159},
+	"sourceSize": {"w":113,"h":159}
+},
+"word_start.png":
+{
+	"frame": {"x":463,"y":252,"w":293,"h":149},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":293,"h":149},
+	"sourceSize": {"w":293,"h":149}
+},
+"word_tips.png":
+{
+	"frame": {"x":308,"y":924,"w":252,"h":25},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":252,"h":25},
+	"sourceSize": {"w":252,"h":25}
 }},
 "meta": {
 	"app": "http://www.texturepacker.com",
 	"version": "1.0",
 	"image": "scene.png",
 	"format": "RGBA8888",
-	"size": {"w":212,"h":1150},
+	"size": {"w":1212,"h":1011},
 	"scale": "1",
-	"smartupdate": "$TexturePacker:SmartUpdate:10e3848d2813d150e0cd0e6777aeec64$"
+	"smartupdate": "$TexturePacker:SmartUpdate:5a99b4e3c2d1f1e26c808244b9c45e77$"
 }
 }

style.scss

@@ -3,6 +3,7 @@
 html,
 body {
     height: 100%;
+    background-color: transparent;
 }