|
|
@@ -0,0 +1,250 @@
|
|
|
+import Hilo from "../hilo/Hilo";
|
|
|
+import { Yc, YcUniapp } from "@ycxxkj/uniapp";
|
|
|
+console.log("#debug#🚀 ~ file: game.ts:2 ~ Hilo:", Hilo);
|
|
|
+import Asset from "./Asset";
|
|
|
+console.log("#debug#🚀 ~ file: game.ts:4 ~ Asset:", Asset);
|
|
|
+let stage: any;
|
|
|
+let stepLong = 200;
|
|
|
+let stepTime = 1000;
|
|
|
+let mapWidth = 1381;
|
|
|
+let mapHeight = 1043;
|
|
|
+let mapMin = 0;
|
|
|
+let map: any;
|
|
|
+let camera: any;
|
|
|
+let bmpHeight = 0; //地图高度
|
|
|
+let bmpWidth = 0; //地图宽度
|
|
|
+let stepArray = [
|
|
|
+ { x: 1400, y: 1000, bomX: 1250, bomY: 1100, position: 1, bomShow: true, workLong: 1000, step: 0 },
|
|
|
+ { x: 1300, y: 1050, bomX: 1150, bomY: 1100, position: 1, bomShow: true, workLong: 1000, step: 1 },
|
|
|
+ { x: 1180, y: 1060, bomX: 1050, bomY: 1100, position: 1, bomShow: true, workLong: 1000, step: 2 },
|
|
|
+ { x: 1100, y: 1060, bomX: 920, bomY: 1100, position: 1, bomShow: true, workLong: 1000, step: 3 },
|
|
|
+ { x: 980, y: 1030, bomX: 720, bomY: 980, position: 1, bomShow: true, workLong: 1000, step: 4 },
|
|
|
+ { x: 720, y: 900, bomX: 600, bomY: 930, position: 1, bomShow: true, workLong: 3000, step: 5 },
|
|
|
+ { x: 620, y: 850, bomX: 500, bomY: 900, position: 1, bomShow: true, workLong: 1000, step: 6 },
|
|
|
+ { x: 520, y: 800, bomX: 420, bomY: 1100, position: 1, bomShow: true, workLong: 1000, step: 7 },
|
|
|
+ { x: 450, y: 1050, bomX: 220, bomY: 1060, position: 1, bomShow: true, workLong: 2000, step: 8 },
|
|
|
+ { x: 220, y: 980, bomX: 230, bomY: 720, position: 1, bomShow: true, workLong: 4000, step: 9 },
|
|
|
+ { x: 340, y: 650, bomX: 250, bomY: 640, position: -1, bomShow: true, workLong: 3000, step: 10 },
|
|
|
+ { x: 370, y: 580, bomX: 260, bomY: 540, position: -1, bomShow: true, workLong: 1000, step: 11 },
|
|
|
+ { x: 390, y: 480, bomX: 320, bomY: 390, position: -1, bomShow: true, workLong: 1000, step: 12 },
|
|
|
+ { x: 430, y: 320, bomX: 460, bomY: 280, position: -1, bomShow: true, workLong: 3000, step: 13 },
|
|
|
+ { x: 560, y: 200, bomX: 460, bomY: 180, position: -1, bomShow: true, workLong: 2000, step: 14 },
|
|
|
+ { x: 560, y: 100, bomX: 730, bomY: 80, position: -1, bomShow: true, workLong: 1000, step: 15 },
|
|
|
+ { x: 860, y: 30, bomX: 830, bomY: 80, position: -1, bomShow: true, workLong: 3000, step: 16 }
|
|
|
+];
|
|
|
+class Game {
|
|
|
+ private stage: any;
|
|
|
+ private asset: any;
|
|
|
+ private bg: any;
|
|
|
+ private width: number;
|
|
|
+ private height: number;
|
|
|
+ private scale: number = 0.5;
|
|
|
+ private man: any;
|
|
|
+ private bom: any;
|
|
|
+ public playing = false;
|
|
|
+
|
|
|
+ constructor(container: any, width = 375, height = 667) {
|
|
|
+ let mapScale = 1; //this.scale;
|
|
|
+ this.width = width;
|
|
|
+ this.height = height;
|
|
|
+ bmpHeight = mapHeight * 2; //地图高度
|
|
|
+ bmpWidth = (mapWidth / mapHeight) * bmpHeight; //地图宽度
|
|
|
+
|
|
|
+ this.stage = stage = new Hilo.Stage({
|
|
|
+ renderType: "canvas",
|
|
|
+ container: container,
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
+ scaleX: this.scale,
|
|
|
+ scaleY: this.scale
|
|
|
+ });
|
|
|
+
|
|
|
+ //设置deadzone区域
|
|
|
+ var dw = 100,
|
|
|
+ dh = 100;
|
|
|
+ var deadzone = [dw, dh, 0, 0];
|
|
|
+
|
|
|
+ //新建摄像机，设置边界，deadzone
|
|
|
+ camera = new Hilo.Camera({
|
|
|
+ width: width,
|
|
|
+ height: height,
|
|
|
+ bounds: [0, 0, mapWidth - width + 100, 0],
|
|
|
+ deadzone: deadzone
|
|
|
+ });
|
|
|
+
|
|
|
+ //创建地图
|
|
|
+ map = new Hilo.Container().addTo(stage);
|
|
|
+
|
|
|
+ Asset.on("complete", () => {
|
|
|
+ Asset.off("complete");
|
|
|
+ this.init();
|
|
|
+ });
|
|
|
+ Asset.load();
|
|
|
+
|
|
|
+ var ticker = new Hilo.Ticker(60);
|
|
|
+ ticker.addTick(stage);
|
|
|
+ ticker.addTick(Hilo.Tween); //需要把Tween加到ticker里才能使用
|
|
|
+ ticker.addTick(camera);
|
|
|
+ //map跟随摄像机滚动
|
|
|
+ ticker.addTick({
|
|
|
+ tick: function () {
|
|
|
+ map.x = -camera.scroll.x;
|
|
|
+ map.y = -camera.scroll.y;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ ticker.start();
|
|
|
+ }
|
|
|
+ init() {
|
|
|
+ let bgImg: any = Asset.bg;
|
|
|
+ let scale = (this.height * 2) / bmpHeight;
|
|
|
+ mapMin = this.width * scale * 2 - bmpWidth;
|
|
|
+ console.log("#debug#🚀 ~ file: Game.ts:68 ~ Game ~ init ~ bmpHeight:", bmpWidth, bmpHeight, scale, mapMin);
|
|
|
+
|
|
|
+ console.log("#debug#🚀 ~ file: Game.ts:72 ~ Game ~ init ~ this.height:", this.height);
|
|
|
+
|
|
|
+ let bg = new Hilo.Bitmap({
|
|
|
+ id: "bg",
|
|
|
+ image: bgImg,
|
|
|
+ rect: [0, 0, mapWidth, mapHeight],
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ scaleX: scale,
|
|
|
+ scaleY: scale
|
|
|
+ }).addTo(map);
|
|
|
+ //计算边界
|
|
|
+ // map.x = mapMin;
|
|
|
+ // map.x = -500;
|
|
|
+ // map.y = 300;
|
|
|
+ //this.map.y = -400;
|
|
|
+
|
|
|
+ //显示deadzone区域
|
|
|
+ // stage.addChild(
|
|
|
+ // new Hilo.View({
|
|
|
+ // x: 100,
|
|
|
+ // y: 500,
|
|
|
+ // width: camera.deadzone[2],
|
|
|
+ // height: camera.deadzone[3],
|
|
|
+ // background: "rgba(255, 0, 0, .3)"
|
|
|
+ // })
|
|
|
+ // );
|
|
|
+ this.initMan();
|
|
|
+ }
|
|
|
+ initMan() {
|
|
|
+ let index = 0; // stepArray.length - 1;
|
|
|
+ this.bom = new Hilo.Sprite({
|
|
|
+ frames: Asset.bom.getSprite("bom"),
|
|
|
+ x: stepArray[index].bomX,
|
|
|
+ y: stepArray[index].bomY,
|
|
|
+ scaleX: 1,
|
|
|
+ scaleY: 1,
|
|
|
+ interval: 8,
|
|
|
+ timeBased: false,
|
|
|
+ loop: true,
|
|
|
+ paused: true, //!stepArray[0].bomShow,
|
|
|
+ onUpdate: function () {}
|
|
|
+ }).addTo(map);
|
|
|
+ console.log("#debug#🚀 ~ file: game.ts:90 ~ Game ~ initMan ~ bom:", this.bom);
|
|
|
+ console.log("#debug#🚀 ~ file: game.ts:65 ~ Game ~ initMan ~ Asset.getman:", Asset.man), Asset.man.getSprite("man");
|
|
|
+ this.man = new Hilo.Sprite({
|
|
|
+ frames: Asset.man.getSprite("man"),
|
|
|
+ x: stepArray[index].x,
|
|
|
+ y: stepArray[index].y,
|
|
|
+ scaleX: 0.5 * stepArray[index].position,
|
|
|
+ scaleY: 0.5,
|
|
|
+ interval: 5,
|
|
|
+ timeBased: false,
|
|
|
+ loop: true,
|
|
|
+ paused: true,
|
|
|
+ onUpdate: function () {
|
|
|
+ /* this.x += this.speed;
|
|
|
+ console.log("#debug#🚀 ~ file: Game.ts:125 ~ Game ~ initMan ~ this.speed:", this.speed);
|
|
|
+ console.log("#debug#🚀 ~ file: Game.ts:125 ~ Game ~ initMan ~ this.x :", this.x);
|
|
|
+ if (this.x > mapWidth - 100 || this.x < 100) {
|
|
|
+ this.speed *= -1;
|
|
|
+ this.scaleX *= -1;
|
|
|
+ } */
|
|
|
+ /* this.y += this.speed;
|
|
|
+ if (this.y > mapHeight - 100 || this.y < 100) {
|
|
|
+ this.speed *= -1;
|
|
|
+ this.scaleX *= -1;
|
|
|
+ } */
|
|
|
+ }
|
|
|
+ }).addTo(map);
|
|
|
+ this.man.speed = 2;
|
|
|
+
|
|
|
+ //摄像机跟谁鱼
|
|
|
+ camera.follow(this.man);
|
|
|
+ console.log("#debug#🚀 ~ file: game.ts:78 ~ Game ~ initMan ~ this.man:", this.man);
|
|
|
+
|
|
|
+ this.animotion();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 动画
|
|
|
+ */
|
|
|
+ animotion() {
|
|
|
+ this.playing = true;
|
|
|
+ console.log("#debug#🚀 ~ file: Game.ts:181 ~ Game ~ 开始动画 ");
|
|
|
+ YcUniapp.toast("开始播放动画");
|
|
|
+ let man = this.man;
|
|
|
+ this.man.x = stepArray[0].x;
|
|
|
+ this.man.y = stepArray[0].y;
|
|
|
+ this.man.scaleX = 0.5 * stepArray[0].position;
|
|
|
+ this.goStep(1);
|
|
|
+ console.log("#debug#🚀 ~ file: Game.ts:181 ~ Game ~ 结束动画 ");
|
|
|
+ }
|
|
|
+ async goStep(step: number) {
|
|
|
+ let that = this;
|
|
|
+ let man = this.man;
|
|
|
+ let bom = this.bom;
|
|
|
+ if (stepArray[step].bomShow) {
|
|
|
+ bom.alpha = 1;
|
|
|
+ bom.paused = !stepArray[step].bomShow;
|
|
|
+ bom.x = stepArray[step - 1].bomX;
|
|
|
+ bom.y = stepArray[step - 1].bomY;
|
|
|
+ await Yc.delay(2500);
|
|
|
+ bom.paused = true;
|
|
|
+ bom.alpha = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ man.paused = false;
|
|
|
+ man.scaleX = 0.5 * stepArray[step].position;
|
|
|
+ Hilo.Tween.to(
|
|
|
+ man,
|
|
|
+ { x: stepArray[step].x, y: stepArray[step].y },
|
|
|
+ {
|
|
|
+ duration: stepArray[step].workLong,
|
|
|
+ onComplete: function () {
|
|
|
+ man.paused = true;
|
|
|
+ console.log("complete 完成第", step, "步,数组步数", stepArray[step].step, man);
|
|
|
+
|
|
|
+ if (step == stepArray.length - 1) {
|
|
|
+ that.playing = false;
|
|
|
+ YcUniapp.toast("播放动画完毕");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (step < stepArray.length - 1) {
|
|
|
+ console.log("#debug#🚀 ~ file: Game.ts:209 ~ Game ~ goStep ~ stepArray.length:", stepArray.length);
|
|
|
+ that.goStep(step + 1);
|
|
|
+ } else {
|
|
|
+ this.playing = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ startBom() {
|
|
|
+ console.log("#debug#🚀 ~ file: game.ts:102 ~ Game ~ startBom ~ startBom:");
|
|
|
+ this.bom.x = parseInt((Math.random() * (700 + 1 - 50)).toString()) + 50;
|
|
|
+ this.bom.y = parseInt((Math.random() * (500 + 1 - 50)).toString()) + 50;
|
|
|
+ this.bom.paused = false;
|
|
|
+ this.bom.alpha = 1;
|
|
|
+ }
|
|
|
+ stopBom() {
|
|
|
+ console.log("#debug#🚀 ~ file: game.ts:107 ~ Game ~ stopBom ~ stopBom:");
|
|
|
+ this.bom.paused = true;
|
|
|
+ this.bom.alpha = 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+export default Game;
|
