Commit 3c4591f2 authored by jtwu's avatar jtwu

1

parent f1afc867
This diff is collapsed.
......@@ -88,6 +88,7 @@
<body>
<div id="root"></div>
<!-- <script src="https://yun.duiba.com.cn/db_games/RB_yanxue/250620/js/output.js"></script> -->
<script type="module" src="/src/App.tsx"></script>
</body>
......
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>{title}</title>
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #060a47;
}
</style>
</head>
<body>
<div id="__loading__" style="position:absolute;left:50%;top:50%;margin-left:-45px;color:#ffffff">拼命加载中...</div>
<div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<script>
window.addEventListener("load", async function () {
// import { Game } from "./output.js" | window[Game]
//实例,传入资源路径
let game = new Game("https://yun.duiba.com.cn/db_games/RB_yanxue/250620/resource/")
//可预加载资源
game.preLoad();
//初始化舞台,及加载资源,传入canvas标签
// <div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
// <canvas id="canvas" style="width: 100%;height: 100%"></canvas> //需要的canvas给个全屏,尽量用div包下
// </div>
await game.initStage(document.getElementById("canvas"))
//加鼠标事件,
game.stage.addWebMouseEvent();
//监听窗口尺寸改变
window.addEventListener('resize', function () { game.stage.resize() });
//展示游戏,传入数据
game.showGame({
targetStudy: 1,//背包数量
targetTravel: 1,//飞机数量
time: 120,//时间,秒计
})
//监听事件,比如游戏结果,gameResult|exitGame
game.addGlobalEvent("gameResult", (e) => {
console.log(e.data)//成功
if (e.data === true) {
//成功
} else {
console.log(e.data)
// {
// targetStudy: 1,//还差合成数量
// targetTravel: 2,
// }
}
})
game.addGlobalEvent("exitGame", (e) => {
//自行切换,游戏有需要就销毁
game.destroy()
})
//派发事件,比如倒计时暂停,pauseGame|continueGame|restartGame
//暂停游戏
game.dispatchGlobalEvent("pauseGame")
//继续游戏
game.dispatchGlobalEvent("continueGame")
//重玩游戏
game.dispatchGlobalEvent("restartGame", { targetStudy: 1, targetTravel: 1, time: 120 })
////////不需要后销毁////////////////
// game.destroy()
})
</script>
<script src="js/output.js" crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"groups": [
{
"keys": "comCloseBtn.png,toastBg.png,waitingBg.png,waitingRot.png",
"name": "common",
"atlas": {
"toastBg.png": {
"x": 2,
"y": 2,
"w": 460,
"h": 130,
"ox": 0,
"oy": 0,
"sw": 460,
"sh": 130,
"ro": false
},
"waitingBg.png": {
"x": 2,
"y": 134,
"w": 160,
"h": 180,
"ox": 0,
"oy": 0,
"sw": 160,
"sh": 180,
"ro": true
},
"waitingRot.png": {
"x": 184,
"y": 134,
"w": 56,
"h": 56,
"ox": 0,
"oy": 0,
"sw": 56,
"sh": 56,
"ro": false
},
"comCloseBtn.png": {
"x": 184,
"y": 192,
"w": 48,
"h": 48,
"ox": 0,
"oy": 0,
"sw": 48,
"sh": 48,
"ro": false
}
}
},
{
"keys": "时间到.png,格子被占满.png,横幅通用.png,通用横幅.svga",
"name": "CommonBannerPanel",
"atlas": {
"横幅通用.png": {
"x": 2,
"y": 2,
"w": 750,
"h": 339,
"ox": 0,
"oy": 0,
"sw": 750,
"sh": 339,
"ro": false
},
"格子被占满.png": {
"x": 2,
"y": 343,
"w": 406,
"h": 107,
"ox": 0,
"oy": 0,
"sw": 406,
"sh": 107,
"ro": false
},
"时间到.png": {
"x": 2,
"y": 452,
"w": 397,
"h": 159,
"ox": 0,
"oy": 0,
"sw": 397,
"sh": 159,
"ro": false
}
}
},
{
"keys": "关闭按钮.png,确认按钮.png,确认退出弹框背景.png,继续游戏按钮.png",
"name": "ExitConfirmPanel",
"atlas": {
"确认退出弹框背景.png": {
"x": 2,
"y": 2,
"w": 596,
"h": 432,
"ox": 0,
"oy": 0,
"sw": 596,
"sh": 432,
"ro": false
},
"确认按钮.png": {
"x": 2,
"y": 436,
"w": 250,
"h": 106,
"ox": 0,
"oy": 0,
"sw": 250,
"sh": 106,
"ro": false
},
"继续游戏按钮.png": {
"x": 254,
"y": 436,
"w": 250,
"h": 106,
"ox": 0,
"oy": 0,
"sw": 250,
"sh": 106,
"ro": false
},
"关闭按钮.png": {
"x": 506,
"y": 436,
"w": 66,
"h": 66,
"ox": 0,
"oy": 0,
"sw": 66,
"sh": 66,
"ro": false
}
}
},
{
"keys": "引导1.png,引导2.png",
"name": "GuidePanel",
"atlas": {
"引导2.png": {
"x": 2,
"y": 2,
"w": 722,
"h": 992,
"ox": 0,
"oy": 0,
"sw": 722,
"sh": 992,
"ro": false
},
"引导1.png": {
"x": 726,
"y": 2,
"w": 698,
"h": 919,
"ox": 0,
"oy": 0,
"sw": 698,
"sh": 919,
"ro": false
}
}
},
{
"keys": "倒计时.svga,倒计时背景.png,出行元素1.png,出行元素2.png,出行元素3.png,出行元素4.png,出行元素5.png,出行元素6.png,可解锁研学城市路线.png,合成效果.svga,抽奖机会+1.png,游戏背景.png,目标1.png,目标2.png,目标横幅.svga,目标横幅组.png,目标背景.png,研学元素1.png,研学元素2.png,研学元素3.png,研学元素4.png,研学元素5.png,研学元素6.png,返回按钮.png",
"name": "PlayScene",
"atlas": {
"游戏背景.png": {
"x": 2,
"y": 2,
"w": 750,
"h": 1624,
"ox": 0,
"oy": 0,
"sw": 750,
"sh": 1624,
"ro": false
},
"目标横幅组.png": {
"x": 754,
"y": 2,
"w": 750,
"h": 399,
"ox": 0,
"oy": 0,
"sw": 750,
"sh": 399,
"ro": true
},
"可解锁研学城市路线.png": {
"x": 754,
"y": 754,
"w": 581,
"h": 95,
"ox": 0,
"oy": 0,
"sw": 581,
"sh": 95,
"ro": true
},
"目标背景.png": {
"x": 851,
"y": 754,
"w": 403,
"h": 196,
"ox": 0,
"oy": 0,
"sw": 403,
"sh": 196,
"ro": true
},
"抽奖机会+1.png": {
"x": 754,
"y": 1337,
"w": 285,
"h": 74,
"ox": 0,
"oy": 0,
"sw": 285,
"sh": 74,
"ro": true
},
"倒计时背景.png": {
"x": 830,
"y": 1337,
"w": 246,
"h": 180,
"ox": 0,
"oy": 0,
"sw": 246,
"sh": 180,
"ro": true
},
"目标1.png": {
"x": 1012,
"y": 1159,
"w": 131,
"h": 81,
"ox": 0,
"oy": 0,
"sw": 131,
"sh": 81,
"ro": false
},
"出行元素5.png": {
"x": 1012,
"y": 1242,
"w": 127,
"h": 66,
"ox": 2,
"oy": 32,
"sw": 130,
"sh": 130,
"ro": false
},
"出行元素2.png": {
"x": 1012,
"y": 1310,
"w": 123,
"h": 74,
"ox": 4,
"oy": 28,
"sw": 130,
"sh": 130,
"ro": false
},
"出行元素6.png": {
"x": 1012,
"y": 1386,
"w": 121,
"h": 71,
"ox": 4,
"oy": 29,
"sw": 130,
"sh": 130,
"ro": false
},
"出行元素3.png": {
"x": 1012,
"y": 1459,
"w": 119,
"h": 67,
"ox": 6,
"oy": 31,
"sw": 130,
"sh": 130,
"ro": false
},
"出行元素4.png": {
"x": 1012,
"y": 1528,
"w": 116,
"h": 68,
"ox": 7,
"oy": 31,
"sw": 130,
"sh": 130,
"ro": false
},
"研学元素4.png": {
"x": 1049,
"y": 754,
"w": 71,
"h": 108,
"ox": 29,
"oy": 11,
"sw": 130,
"sh": 130,
"ro": false
},
"目标2.png": {
"x": 1049,
"y": 864,
"w": 90,
"h": 104,
"ox": 0,
"oy": 0,
"sw": 90,
"sh": 104,
"ro": true
},
"研学元素5.png": {
"x": 1049,
"y": 956,
"w": 103,
"h": 68,
"ox": 13,
"oy": 31,
"sw": 130,
"sh": 130,
"ro": false
},
"出行元素1.png": {
"x": 1049,
"y": 1026,
"w": 60,
"h": 101,
"ox": 35,
"oy": 14,
"sw": 130,
"sh": 130,
"ro": true
},
"研学元素6.png": {
"x": 851,
"y": 1159,
"w": 81,
"h": 95,
"ox": 24,
"oy": 17,
"sw": 130,
"sh": 130,
"ro": true
},
"研学元素3.png": {
"x": 851,
"y": 1242,
"w": 90,
"h": 92,
"ox": 20,
"oy": 19,
"sw": 130,
"sh": 130,
"ro": false
},
"研学元素1.png": {
"x": 1155,
"y": 2,
"w": 91,
"h": 89,
"ox": 19,
"oy": 20,
"sw": 130,
"sh": 130,
"ro": true
},
"研学元素2.png": {
"x": 1155,
"y": 95,
"w": 87,
"h": 73,
"ox": 21,
"oy": 28,
"sw": 130,
"sh": 130,
"ro": false
},
"返回按钮.png": {
"x": 948,
"y": 1159,
"w": 62,
"h": 62,
"ox": 0,
"oy": 0,
"sw": 62,
"sh": 62,
"ro": false
}
}
}
]
}
\ No newline at end of file
{
"name": "root",
"children": [
{
"name": "PlayScene",
"children": [
{
"name": "游戏背景",
"type": "sprite",
"props": {
"source": "游戏背景.png"
}
},
{
"name": "返回按钮",
"x": 39,
"y": 234,
"type": "sprite",
"props": {
"source": "返回按钮.png"
},
"anchorX": 31,
"anchorY": 31,
"scripts": [
"addClickZoom"
],
"id": "return_btn"
},
{
"name": "倒计时",
"x": 275,
"y": 221,
"children": [
{
"name": "倒计时背景",
"type": "sprite",
"props": {
"source": "倒计时背景.png"
}
},
{
"name": "0s",
"x": 9,
"y": 86,
"type": "text",
"props": {
"text": "0s",
"size": 51.92,
"fillColor": "#479e7e",
"textAlpha": 1,
"lineHeight": 51.92,
"textAlign": "center",
"textWidth": 200
},
"id": "timeCount"
}
]
},
{
"name": "目标",
"x": 104,
"y": 416,
"children": [
{
"name": "目标背景",
"type": "sprite",
"props": {
"source": "目标背景.png"
}
},
{
"name": "目标2",
"type": "sprite",
"props": {
"source": "出行元素6.png"
},
"x": 39,
"y": 20,
"id": "targetTravel"
},
{
"name": "目标1",
"type": "sprite",
"props": {
"source": "研学元素6.png"
},
"x": 229,
"y": 19,
"id": "targetStudy"
},
{
"name": "目标数量2",
"x": 115,
"y": 112,
"type": "text",
"props": {
"text": "0/2",
"size": 27.78,
"fillColor": "#f4f3ef",
"textAlpha": 1,
"lineHeight": 27.78,
"strokeColor": "#4f1600",
"stroke": 4,
"textAlign": "center",
"textWidth": 70
},
"id": "targetTravelNum"
},
{
"name": "目标数量1",
"x": 306,
"y": 112,
"type": "text",
"props": {
"text": "0/1",
"size": 27.78,
"fillColor": "#f4f3ef",
"textAlpha": 1,
"lineHeight": 27.78,
"strokeColor": "#4f1600",
"stroke": 4,
"textAlign": "center",
"textWidth": 70
},
"id": "targetStudyNum"
}
]
},
{
"name": "倒计时动画",
"type": "svgaAni",
"props": {
"aniData": "倒计时.svga"
},
"y": 760,
"id": "count123_ani"
}
],
"resGroups": "PlayScene"
},
{
"name": "TargetBannerPanel",
"children": [
{
"name": "目标横幅组",
"y": 612,
"type": "sprite",
"props": {
"source": "目标横幅组.png"
},
"visible": false
},
{
"name": "动画",
"type": "svgaAni",
"props": {
"aniData": "目标横幅.svga"
},
"y": 134,
"id": "ani"
},
{
"name": "组",
"children": [
{
"name": "内容",
"x": 67,
"y": 659,
"children": [
{
"name": "目标2",
"type": "sprite",
"props": {
"source": "出行元素6.png"
},
"x": 244,
"y": 2,
"id": "targetTravel"
},
{
"name": "目标1",
"type": "sprite",
"props": {
"source": "研学元素6.png"
},
"x": 400.4,
"y": -11.9,
"id": "targetStudy"
},
{
"name": "60s内合成",
"y": 62,
"type": "text",
"props": {
"text": "60s内合成",
"size": 43.19,
"fillColor": "#4f1600",
"textAlpha": 1,
"lineHeight": 43.19,
"stroke": 5,
"bold": true,
"textWidth": 250
},
"id": "timeCount"
},
{
"name": "目标数目2",
"x": 321,
"y": 62,
"type": "text",
"props": {
"text": "X2",
"size": 43.19,
"fillColor": "#4f1600",
"textAlpha": 1,
"lineHeight": 43.19,
"stroke": 5,
"textAlign": "center",
"textWidth": 80,
"bold": true
},
"id": "targetTravelNum"
},
{
"name": "目标数目1",
"x": 472,
"y": 54,
"type": "text",
"props": {
"text": "X1",
"size": 43.19,
"fillColor": "#4f1600",
"textAlpha": 1,
"lineHeight": 43.19,
"textAlign": "center",
"textWidth": 80,
"stroke": 5,
"bold": true
},
"id": "targetStudyNum"
}
]
},
{
"name": "可解锁研学城市路线",
"x": 60,
"y": 776,
"type": "sprite",
"props": {
"source": "可解锁研学城市路线.png"
}
},
{
"name": "抽奖机会+1",
"x": 60,
"y": 873,
"type": "sprite",
"props": {
"source": "抽奖机会+1.png"
}
}
],
"id": "content"
}
],
"resGroups": "PlayScene"
},
{
"name": "CommonBannerPanel",
"children": [
{
"name": "横幅通用",
"y": 612,
"type": "sprite",
"props": {
"source": "横幅通用.png"
},
"visible": false
},
{
"name": "动画",
"type": "svgaAni",
"props": {
"aniData": "通用横幅.svga"
},
"y": 134,
"id": "ani"
},
{
"name": "格子被占满",
"x": 173,
"y": 720,
"type": "sprite",
"props": {
"source": "格子被占满.png"
},
"id": "full_sp"
},
{
"name": "时间到",
"x": 177,
"y": 699,
"type": "sprite",
"props": {
"source": "时间到.png"
},
"id": "time_sp"
}
],
"resGroups": "CommonBannerPanel"
},
{
"name": "GuidePanel",
"children": [
{
"name": "引导1",
"x": 26,
"y": 365,
"type": "sprite",
"props": {
"source": "引导1.png"
},
"id": "guide1"
},
{
"name": "引导2",
"x": 14,
"y": 377,
"type": "sprite",
"props": {
"source": "引导2.png"
},
"id": "guide2"
}
],
"resGroups": "GuidePanel",
"hasBlackBg": true
},
{
"name": "ExitConfirmPanel",
"children": [
{
"name": "确认退出弹框背景",
"x": 77,
"y": 508,
"type": "sprite",
"props": {
"source": "确认退出弹框背景.png"
}
},
{
"name": "关闭按钮",
"x": 342,
"y": 1050,
"type": "sprite",
"props": {
"source": "关闭按钮.png"
},
"scripts": [
"addClickZoom"
],
"anchorX": 33,
"anchorY": 33,
"id": "close_btn"
},
{
"name": "确认按钮",
"x": 381,
"y": 782,
"type": "sprite",
"props": {
"source": "确认按钮.png"
},
"anchorX": 125,
"anchorY": 53,
"scripts": [
"addClickZoom"
],
"id": "confirm_btn"
},
{
"name": "继续游戏按钮",
"x": 120,
"y": 782,
"type": "sprite",
"props": {
"source": "继续游戏按钮.png"
},
"anchorX": 125,
"anchorY": 53,
"scripts": [
"addClickZoom"
],
"id": "continue_btn"
}
],
"resGroups": "ExitConfirmPanel",
"hasBlackBg": true,
"showAnimation": "topBackIn",
"removeAnimation": "bottomBackOut"
}
]
}
\ No newline at end of file
import { Assets, PointData, Sprite, Ticker } from "pixi.js";
import 'pixi.js/math-extras';
import { Base } from "@/core/pixi/base/Base.ts";
import { observer, reactor } from "./mobx/decorators.ts";
import { GameEvent, globalEvent } from "./GameEvent.ts";
import { Level1 } from "@/pages/GamePage/Level/Level1.ts";
import { Level2 } from "@/pages/GamePage/Level/Level2.ts";
import { Level3 } from "@/pages/GamePage/Level/Level3.ts";
import { Level4 } from "@/pages/GamePage/Level/Level4.ts";
import { Level5 } from "@/pages/GamePage/Level/Level5.ts";
import { Level6 } from "@/pages/GamePage/Level/Level6.ts";
import { Level7 } from "@/pages/GamePage/Level/Level7.ts";
import { Level8 } from "@/pages/GamePage/Level/Level8.ts";
import { Level9 } from "@/pages/GamePage/Level/Level9.ts";
import { Level10 } from "@/pages/GamePage/Level/Level10.ts";
import { Level11 } from "@/pages/GamePage/Level/Level11.ts";
import { Level12 } from "@/pages/GamePage/Level/Level12.ts";
import { Level13 } from "@/pages/GamePage/Level/Level13.ts";
import { Level14 } from "@/pages/GamePage/Level/Level14.ts";
import { Level15 } from "@/pages/GamePage/Level/Level15.ts";
import { Level18 } from "@/pages/GamePage/Level/Level18.ts";
import { Level19 } from "@/pages/GamePage/Level/Level19.ts";
import { Level20 } from "@/pages/GamePage/Level/Level20.ts";
import { Level21 } from "@/pages/GamePage/Level/Level21.ts";
import { Level22 } from "@/pages/GamePage/Level/Level22.ts";
import { Level23 } from "@/pages/GamePage/Level/Level23.ts";
import { Level24 } from "@/pages/GamePage/Level/Level24.ts";
import gameStore from "@/store/gameStore.ts";
import { LevelArr } from "@/pages/GamePage/Level/LevelConfig.ts";
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Level16 } from "./Level/Level16.ts";
import { Level17 } from "./Level/Level17.ts";
import { Level25 } from "./Level/Level25.ts";
@observer
export class Game extends Base {
level: LevelBase = null;
pauseCd: boolean = false;
setPauseCd = (pause: boolean) => {
this.pauseCd = pause;
};
onLoad() {
const qsBg = this.addChild(new Sprite(Assets.get("问题.png")));
qsBg.position.set(49, 316);
// this.level = this.addChild(new Level8(this.setPauseCd));
globalEvent.on(GameEvent.NextLevel, this.nextLevel, this);
this.nextLevel();
this.startCd();
}
gameOver() {
this.eventMode = "none";
this.interactive = this.interactiveChildren = false;
gameStore.submit(gameStore.gameInfo.levelIndex);
}
intervalId: number = null;
startCd() {
this.intervalId = window.setInterval(() => {
if (this.pauseCd) return;
const newCd = gameStore.gameInfo.cd -= 1;
if (newCd <= 0) {
clearInterval(this.intervalId);
this.gameOver();
return;
}
}, 1000);
}
async nextLevel() {
gameStore.gameInfo.levelIndex++;
const { levelIndex, levelIdxArr } = gameStore.gameInfo;
if (levelIndex > 0) {
if (levelIndex >= LevelArr.length) {
this.setPauseCd(true);
clearInterval(this.intervalId);
await gameStore.middleSubmit(levelIndex);
gameStore.submit(LevelArr.length);
return;
} else {
gameStore.gameInfo.cd = gameStore.gameInfo.countdownSeconds;
this.setPauseCd(false);
gameStore.middleSubmit(levelIndex);
}
} else {
gameStore.gameInfo.cd = gameStore.gameInfo.countdownSeconds;
}
if (levelIndex >= levelIdxArr.length) {
return;
}
const levelIdx = levelIdxArr[levelIndex];
if (this.level) {
this.level.removeFromParent();
this.level.destroy();
}
const { cls } = LevelArr[levelIdx];
this.level = this.addChild(new cls(this.setPauseCd));
// this.level = this.addChild(new Level25());
}
receiveEffect(point: PointData) {
}
onUpdate(time: Ticker) {
// const dt = time.deltaMS / 1000;
}
onDestroy() {
super.onDestroy();
clearInterval(this.intervalId);
globalEvent.removeAllListeners();
}
}
......@@ -4,7 +4,6 @@ import store from "@/store/store.ts";
import styles from "./GamePage.module.less";
import { Application, Assets, Sprite, Ticker } from "pixi.js";
import { Game } from "./Game.ts";
import { initBundle } from "@/core/pixi/Helper.ts";
import { Tween } from "@/core/tween";
import "@/core/pixi/base/mix.ts";
......@@ -16,18 +15,14 @@ import gameStore from "@/store/gameStore.ts";
import.meta.env.DEV && initDevtools({});
import bgImg from "../../assets/GamePage/bg.jpg";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import TipPanel from "@/panels/TipPanel/TipPanel.tsx";
import { LevelArr } from "@/pages/GamePage/Level/LevelConfig.ts";
import ExitPop from '@/components/exitPop/exitPop';
import { _throttle } from "@/utils/utils.ts";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { LOG_KEY, pageView, sensorLog } from "@/utils/sensors";
export function getApp(): Application {
return window["__app"];
}
import "./js/output";
declare const Game: any;
@observer
class GamePage extends React.Component<any, any> {
......@@ -35,149 +30,73 @@ class GamePage extends React.Component<any, any> {
gameCanvas: HTMLCanvasElement = null;
gameDiv: HTMLDivElement = null;
app: Application = null;
game: Game = null;
game = null;
async componentDidMount() {
// import { Game } from "./output.js" | window[Game]
//实例,传入资源路径
// const game = this.game = new Game("./released/resource/")
// https://yun.duiba.com.cn/db_games/RB_yanxue/250620/index.html
const game = this.game = new Game("https://yun.duiba.com.cn/db_games/RB_yanxue/250620/resource/")
//可预加载资源
game.preLoad();
//初始化舞台,及加载资源,传入canvas标签
// <div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
// <canvas id="canvas" style="width: 100%;height: 100%"></canvas> //需要的canvas给个全屏,尽量用div包下
// </div>
await game.initStage(this.gameCanvas)
//加鼠标事件,
game.stage.addWebMouseEvent();
//监听窗口尺寸改变
window.addEventListener('resize', function () { game.stage.resize() });
//展示游戏,传入数据
game.showGame({
targetStudy: 1,//背包数量
targetTravel: 1,//飞机数量
time: 120,//时间,秒计
})
//监听事件,比如游戏结果,gameResult|exitGame
game.addGlobalEvent("gameResult", (e) => {
console.log(e.data)//成功
if (e.data === true) {
//成功
} else {
console.log(e.data)
// {
// targetStudy: 1,//还差合成数量
// targetTravel: 2,
// }
}
})
game.addGlobalEvent("exitGame", (e) => {
//自行切换,游戏有需要就销毁
game.destroy()
})
game.addGlobalEvent("pauseGame", (e) => {
console.log(123123123)
})
//派发事件,比如倒计时暂停,pauseGame|continueGame|restartGame
//暂停游戏
// game.dispatchGlobalEvent("pauseGame")
//继续游戏
// game.dispatchGlobalEvent("continueGame")
//重玩游戏
game.dispatchGlobalEvent("restartGame", { targetStudy: 1, targetTravel: 1, time: 120 })
pageView("b14270", {
page_name: "答题页面",
});
sensorLog(LOG_KEY.exposure, "b14270", "d14272", {
page_name: "答题页面",
button_name: "提示按钮",
});
sensorLog(LOG_KEY.exposure, "b14270", "d14271", {
page_name: "答题页面",
button_name: "返回按钮",
});
await initBundle();
await this.initStage();
}
componentWillUnmount() {
Tween.removeAllTweens();
this.app.ticker.remove(this.onUpdate);
this.game.destroy({
children: true,
texture: false,
textureSource: false,
});
}
async initStage() {
// if (!gameCanvas) {
// gameCanvas = document.createElement("canvas");
// gameCanvas.className = styles.gameCanvas;
// }
//
// this.gameDiv.appendChild(gameCanvas);
// if (!window["__app"]) {
const app = this.app = window["__app"] = new Application();
await app.init({
canvas: this.gameCanvas,
width: 750,
height: 1624,
powerPreference: "high-performance",
// resolution: Math.min(window.devicePixelRatio, 2) || 1,
resolution: 1,
preference: "webgl",
webgl: {
backgroundAlpha: 0,
// preserveDrawingBuffer: true,
// antialias: true,
powerPreference: "high-performance",
},
eventMode: "static",
});
app.renderer.accessibility.destroy();
// }
// const app = this.app = window["__app"];
console.time("loadBundle");
await Assets.loadBundle("Game");
console.timeEnd("loadBundle");
const bg = this.app.stage.addChild(new Sprite());
Assets.load(bgImg).then((texture) => bg.texture = texture);
this.app.ticker.add(this.onUpdate);
this.game = app.stage.addChild(new Game());
}
onUpdate = (time: Ticker) => {
Tween.flush();
this.game.onUpdate(time);
};
clickBack = () => {
sensorLog(LOG_KEY.click, "b14270", "d14271", {
page_name: "答题页面",
button_name: "返回按钮",
});
this.game.setPauseCd(true);
ModalCtrl.showModal(ExitPop, {
cancel: () => {
this.game.setPauseCd(false);
}
})
// PageCtrl.backPage();
}
clickTip = _throttle(async () => {
sensorLog(LOG_KEY.click, "b14270", "d14272", {
page_name: "答题页面",
button_name: "提示按钮",
});
this.game.setPauseCd(true);
if (gameStore.gameInfo.remainTipTimes <= 0) {
ModalCtrl.showModal(TipPanel, {
tip: "获取提示机会已用完",
onClose: () => {
this.game.setPauseCd(false);
}
});
return;
}
const success = await gameStore.suggest();
if (!success) return;
gameStore.gameInfo.remainTipTimes--;
const { levelIndex, levelIdxArr } = gameStore.gameInfo;
const levelIdx = levelIdxArr[levelIndex];
const { tip, cls } = LevelArr[levelIdx];
ModalCtrl.showModal(TipPanel, {
tip,
onClose: () => {
this.game.setPauseCd(false);
}
});
})
render() {
const { levelIndex, levelIdxArr, cd } = gameStore.gameInfo;
const titleSrc = new URL(
`../../assets/GamePage/title/title${Math.min(levelIndex + 1, levelIdxArr.length) || 1}.png?x-oss-process=image/format,webp`,
import.meta.url
).href;
return <div className={styles.root} ref={(el) => this.gameDiv = el}>
<canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el}/>
<div className={styles.cd}>{cd}s</div>
<img src={titleSrc} className={styles.title}/>
<Button className={`${styles.tipBtn} md14`} onClick={this.clickTip}/>
<Button className={`${styles.backBtn} md13`} onClick={this.clickBack}/>
</div>;
}
}
......
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { errorWaitTime, rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level1 extends LevelBase {
level: number = 1;
A: Sprite;
B: Sprite;
C: Sprite;
D: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(99, 724);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(398, 724);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(99, 1002);
this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
this.D.position.set(398, 1002);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.visible = false;
this.right.interactive = false;
this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
this.error.visible = false;
this.error.interactive = false;
[this.A, this.B, this.C, this.D]
.forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
}
onTapOption(item: Sprite) {
const isRight = item === this.C;
this.setTouchEnable(false);
const dp = -10;
if (isRight) {
this.setPauseCd(true);
this.right.visible = true;
this.right.position.set(item.x + dp, item.y + dp);
Tween.get(this.right)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
} else {
this.error.visible = true;
this.error.position.set(item.x + dp, item.y + dp);
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(errorWaitTime)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
Tween.removeTweens(this.error);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level10 extends LevelBase {
level: number = 10;
A: Sprite;
B: Sprite;
D: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)))
.position.set(207, 902);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(136, 913);
this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
this.D.position.set(629, 900);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(81, 903);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(656, 1002);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.A.on("pointerdown", this.onAPointerDown, this);
this.A.on("pointerup", this.onAPointerUp, this);
this.A.on("globalpointermove", this.onAPointerMove, this);
}
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
const { x, y } = e.data.global;
this.pos = {
x: x - this.A.x,
y: y - this.A.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.A.position.set(nx, ny);
if (
nx >= 605
&& nx <= 650
&& ny >= 865
&& ny <= 940
) {
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.B).to({ alpha: 0 }, 444, Ease.quadInOut);
Tween.get(this.D).to({ alpha: 0 }, 444, Ease.quadInOut);
Tween.get(this.A)
.to({ x: 637, y: 903 }, 444, Ease.quadInOut)
.call(() => {
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
})
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.A);
Tween.removeTweens(this.B);
Tween.removeTweens(this.D);
Tween.removeTweens(this.right);
this.A.off("globalpointermove", this.onAPointerMove, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level11 extends LevelBase {
level: number = 11;
A: Sprite;
B: Sprite;
right: Sprite;
error: Sprite;
// 双指缩放相关属性
private initialDistance: number = 0;
private initialScale: number = 1;
private isTouching: boolean = false;
private touchPoints: Map<number, { x: number, y: number }> = new Map();
onLoad() {
super.onLoad();
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/冰箱.png`)));
this.A.anchor.set(0.5);
this.A.position.set(541, 956);
this.A.scale.set(0.5746031746031746);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/长颈鹿.png`)));
this.B.position.set(91, 765);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(642, 1141);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.A.on("pointerdown", this.onPointerDown, this);
this.A.on("globalpointermove", this.onPointerMove, this);
this.A.on("pointerup", this.onPointerUp, this);
this.A.on("pointerupoutside", this.onPointerUp, this);
this.B.on("pointerdown", this.onBPointerDown, this);
this.B.on("pointerup", this.onBPointerUp, this);
this.B.on("globalpointermove", this.onBPointerMove, this);
}
pos = null;
onBPointerUp(e) {
this.pos = null;
}
onBPointerDown(e) {
const { x, y } = e.data.global;
this.pos = {
x: x - this.B.x,
y: y - this.B.y
}
}
onBPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.B.position.set(nx, ny);
}
onPointerDown(e) {
console.log("pointerdown", e.pointerId, e.data.global);
// 记录触摸点
this.touchPoints.set(e.pointerId, {
x: e.data.global.x,
y: e.data.global.y
});
// 如果有两个触摸点,开始缩放
if (this.touchPoints.size === 2) {
const points = Array.from(this.touchPoints.values());
this.initialDistance = this.getDistance(points[0], points[1]);
this.initialScale = this.A.scale.x;
this.isTouching = true;
console.log("开始缩放", this.initialDistance, this.initialScale);
}
}
onPointerMove(e) {
if (!this.touchPoints.has(e.pointerId)) return;
// 更新触摸点位置
this.touchPoints.set(e.pointerId, {
x: e.data.global.x,
y: e.data.global.y
});
if (this.isTouching && this.touchPoints.size === 2) {
const points = Array.from(this.touchPoints.values());
const currentDistance = this.getDistance(points[0], points[1]);
// 计算缩放比例
const scaleRatio = currentDistance / this.initialDistance;
const newScale = this.initialScale * scaleRatio;
// 限制最小和最大缩放
const finalScale = Math.max(0.5, Math.min(newScale, 5));
this.A.scale.set(finalScale);
console.log("缩放中", currentDistance, scaleRatio, finalScale);
// 检查是否达到目标大小
this.checkSize();
}
}
onPointerUp(e) {
console.log("pointerup", e.pointerId);
// 移除触摸点
this.touchPoints.delete(e.pointerId);
// 如果少于两个触摸点,停止缩放
if (this.touchPoints.size < 2) {
this.isTouching = false;
console.log("停止缩放");
}
}
getDistance(point1: { x: number, y: number }, point2: { x: number, y: number }): number {
const dx = point1.x - point2.x;
const dy = point1.y - point2.y;
return Math.sqrt(dx * dx + dy * dy);
}
checkSize() {
if (this.A.scale.x >= 1) {
this.triggerSuccess();
}
}
triggerSuccess() {
// 防止重复触发
if (this.right.alpha > 0) return;
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.A);
Tween.removeTweens(this.right);
// 移除触摸事件监听
this.A.off("pointerdown", this.onPointerDown, this);
this.A.off("globalpointermove", this.onPointerMove, this);
this.A.off("pointerup", this.onPointerUp, this);
this.A.off("pointerupoutside", this.onPointerUp, this);
this.B.off("pointerdown", this.onPointerDown, this);
this.B.off("globalpointermove", this.onPointerMove, this);
this.B.off("pointerup", this.onPointerUp, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite, Graphics } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { getApp } from "../GamePage";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level12 extends LevelBase {
level: number = 12;
A: Sprite; // 头
B: Sprite; // 尾
right: Sprite;
// 滑动轨迹相关
private trailGraphics: Graphics;
private isDrawing: boolean = false;
private startPoint: { x: number, y: number } | null = null;
private currentPoint: { x: number, y: number } | null = null;
// 香烟分离状态
private isSeparated: boolean = false;
onLoad() {
super.onLoad();
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/头.png`)));
this.A.position.set(67, 923);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/尾.png`)));
this.B.position.set(265, 923);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(613, 1104);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
// 创建绘制轨迹的Graphics对象
this.trailGraphics = this.addChild(new Graphics());
this.trailGraphics.zIndex = 1000; // 确保轨迹在最上层
// 启用stage交互
const app = getApp();
app.stage.interactive = true;
app.stage.eventMode = "static";
// 在stage上监听全局事件
app.stage.on("pointerdown", this.onPointerDown, this);
app.stage.on("globalpointermove", this.onPointerMove, this);
app.stage.on("pointerup", this.onPointerUp, this);
app.stage.on("pointerupoutside", this.onPointerUp, this);
}
onPointerDown(e) {
if (this.isSeparated) return;
console.log("开始滑动", e.data.global);
this.isDrawing = true;
this.startPoint = { x: e.data.global.x, y: e.data.global.y };
this.currentPoint = { x: e.data.global.x, y: e.data.global.y };
// 清除之前的轨迹
this.trailGraphics.clear();
console.log("清除轨迹,开始新的绘制");
}
onPointerMove(e) {
if (!this.isDrawing || this.isSeparated) return;
this.currentPoint = { x: e.data.global.x, y: e.data.global.y };
console.log("更新轨迹点", this.currentPoint);
// 绘制轨迹线条
this.drawTrail();
}
onPointerUp(e) {
if (!this.isDrawing || this.isSeparated) return;
console.log("结束滑动", "起点:", this.startPoint, "终点:", this.currentPoint);
this.isDrawing = false;
// 检查滑动轨迹是否经过香烟
if (this.checkTrailCrossedCigarette()) {
this.separateCigarette();
} else {
// 如果没有成功分离,清除轨迹
console.log("没有经过香烟,清除轨迹");
setTimeout(() => {
this.clearTrail();
}, 1000);
}
}
drawTrail() {
if (!this.startPoint || !this.currentPoint) return;
console.log("绘制轨迹,起点:", this.startPoint, "终点:", this.currentPoint);
this.trailGraphics.clear();
// 绘制从起点到终点的直线
this.trailGraphics.moveTo(this.startPoint.x, this.startPoint.y);
this.trailGraphics.lineTo(this.currentPoint.x, this.currentPoint.y);
this.trailGraphics.stroke({ width: 6, color: 0xffffff });
console.log("轨迹绘制完成,起点:", this.startPoint, "终点:", this.currentPoint);
}
checkTrailCrossedCigarette(): boolean {
if (!this.startPoint || !this.currentPoint) return false;
// 香烟的水平线段:从A的x到B的x+width
const cigaretteStartX = this.A.x;
const cigaretteEndX = this.B.x + this.B.width;
const cigaretteY = this.A.y + (this.A.height / 2); // 使用香烟中间的y坐标
console.log("香烟线段:", cigaretteStartX, "到", cigaretteEndX, "y坐标:", cigaretteY);
// 检查轨迹线段是否与香烟水平线段相交
const startY = this.startPoint.y;
const endY = this.currentPoint.y;
// 检查轨迹线段是否在y方向上跨越了香烟线段
if ((startY <= cigaretteY && endY >= cigaretteY) || (startY >= cigaretteY && endY <= cigaretteY)) {
// 计算轨迹线段在cigaretteY处的x坐标
const startX = this.startPoint.x;
const endX = this.currentPoint.x;
let intersectionX;
if (startY === endY) {
// 水平线段,取任意一个x坐标
intersectionX = startX;
} else {
// 计算交点的x坐标
const t = (cigaretteY - startY) / (endY - startY);
intersectionX = startX + t * (endX - startX);
}
console.log("交点x坐标:", intersectionX);
// 检查交点是否在香烟线段的x范围内
if (intersectionX >= cigaretteStartX && intersectionX <= cigaretteEndX) {
console.log("轨迹与香烟线段相交!");
return true;
}
}
console.log("轨迹未与香烟线段相交");
return false;
}
separateCigarette() {
console.log("开始分离香烟");
this.isSeparated = true;
this.setTouchEnable(false);
// 设置A的旋转锚点为尾巴连接处(B的左边缘)
const pivotX = this.B.x - this.A.x; // 相对于A的x偏移
const pivotY = this.A.height / 2; // A的中心高度
this.A.pivot.set(pivotX, pivotY);
// 调整A的位置以补偿pivot的变化
this.A.x += pivotX;
this.A.y += pivotY;
// A向下旋转90度并向下移动
Tween.get(this.A)
.to({
angle: -45, // 顺时针旋转90度
y: this.A.y + 60 // 向下移动60像素
}, 666, Ease.quadInOut)
.call(() => {
// 分离完成后,清除轨迹并显示通关
this.clearTrail();
setTimeout(() => {
this.triggerSuccess();
}, 500);
});
// B保持不动,不需要动画
}
clearTrail() {
console.log("清除轨迹动画");
Tween.get(this.trailGraphics)
.to({ alpha: 0 }, 222, Ease.quadInOut)
.call(() => {
this.trailGraphics.clear();
this.trailGraphics.alpha = 1;
console.log("轨迹已清除");
});
}
triggerSuccess() {
console.log("开始通关动画");
const rightX = this.B.x + this.B.width - this.right.width + 20;
const rightY = this.B.y + this.B.height - this.right.height + 20;
// 设置right的位置
this.right.position.set(rightX, rightY);
this.setPauseCd(true);
// 显示right图标并完成通关
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
onDestroy() {
super.onDestroy();
// 移除动画
Tween.removeTweens(this.A);
Tween.removeTweens(this.B);
Tween.removeTweens(this.right);
Tween.removeTweens(this.trailGraphics);
// 移除事件监听
const app = getApp();
app.stage.off("pointerdown", this.onPointerDown, this);
app.stage.off("globalpointermove", this.onPointerMove, this);
app.stage.off("pointerup", this.onPointerUp, this);
app.stage.off("pointerupoutside", this.onPointerUp, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Circle, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level13 extends LevelBase {
level: number = 13;
A: Sprite;
B: Sprite;
C: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)))
.position.set(198, 687);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(198, 687);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(463, 1086);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(161, 1086);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(255, 916);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
[this.A, this.B, this.C].forEach((item) => {
item.on("pointerdown", this.onAPointerDown, this);
item.on("pointerup", this.onAPointerUp, this);
item.on("globalpointermove", this.onAPointerMove, this);
});
}
target: Sprite = null;
pos: { x: number, y: number } = null;
onAPointerUp(e) {
this.pos = null;
this.target = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
const { x: cx, y: cy } = this.C;
if (
cx < 10 || cx > 410
|| cy < 480 || cy > 900
) {
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
this.A.off("globalpointermove", this.onAPointerMove, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Rectangle, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { errorWaitTime, rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level14 extends LevelBase {
level: number = 14;
A: Sprite;
B: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/img.png`)))
.position.set(208, 656);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(510, 1007);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(117, 1035);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.position.set(208, 656);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.error = this.addChild(new Sprite(Assets.get(`common/error.png`)));
this.error.visible = false;
this.error.interactive = false;
[this.A, this.B]
.forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
this.A.on("pointerdown", this.onAPointerDown, this);
this.A.on("pointerup", this.onAPointerUp, this);
this.A.on("globalpointermove", this.onAPointerMove, this);
this.B.on("pointerdown", this.onAPointerDown, this);
this.B.on("pointerup", this.onAPointerUp, this);
this.B.on("globalpointermove", this.onAPointerMove, this);
}
onTapOption(item: Sprite) {
this.pos = null;
this.setTouchEnable(false);
const dp = new Map([
[this.A, { x: 110, y: 120 }],
[this.B, { x: 100, y: 150 }],
]).get(item);
console.log(dp)
this.error.position.set(item.x + dp.x, item.y + dp.y);
this.error.visible = true;
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(errorWaitTime)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
target = null;
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
this.check();
}
check() {
const { x: ax, y: ay, width: aw, height: ah } = this.A;
const { x: bx, y: by, width: bw, height: bh } = this.B;
const aRect = new Rectangle(ax, ay, aw, ah);
const bRect = new Rectangle(bx, by, bw, bh);
if (aRect.intersects(bRect)) {
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.B)
.to({ x: 306, y: 1000 }, 444, Ease.quadInOut)
Tween.get(this.A)
.to({ x: 292, y: 1040 }, 444, Ease.quadInOut)
.call(() => {
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
})
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.A);
Tween.removeTweens(this.error);
Tween.removeTweens(this.right);
this.A.off("globalpointermove", this.onAPointerMove, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Rectangle, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level15 extends LevelBase {
level: number = 15;
A: Sprite;
B: Sprite;
C: Sprite;
D: Sprite;
mi: Sprite;
mi2: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
this.D.position.set(460, 766);
this.mi = this.addChild(new Sprite(Assets.get(`level${this.level}/mi.png`)));
this.mi.position.set(129, 675);
this.mi2 = this.addChild(new Sprite(Assets.get(`level${this.level}/mi2.png`)));
this.mi2.position.set(129, 719);
this.mi2.alpha = 0;
const table = this.addChild(new Sprite(Assets.get(`level${this.level}/img.png`)));
table.position.set(0, 665);
table.interactive = false;
table.eventMode = "none";
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(78, 1169);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(311, 1159);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(495, 1149);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.position.set(146, 825);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.error = this.addChild(new Sprite(Assets.get(`common/error.png`)));
this.error.interactive = false;
this.error.eventMode = "none";
[this.D].forEach((item) => {
item.on("pointerdown", this.onAPointerDown, this);
item.on("pointerup", this.onAPointerUp, this);
item.on("globalpointermove", this.onAPointerMove, this);
});
[this.A, this.B, this.C].forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
}
onTapOption(item: Sprite) {
this.setTouchEnable(false);
const wait = 2000;
this.error.visible = true;
this.error.position.set(item.x + item.width - 30, item.y + item.height - 50);
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(wait)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
target: Sprite = null;
pos: { x: number, y: number } = null;
onAPointerUp(e) {
this.pos = null;
this.target = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
this.addChild(e.target);
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
this.check();
}
check() {
const { x: ax, y: ay, width: aw, height: ah } = this.target;
const isIns = new Rectangle(ax + 60, ay, aw - 60, ah)
.intersects(new Rectangle(180, 840, 37, 55));
if (isIns) {
this.setPauseCd(true);
this.setTouchEnable(false);
this.target.eventMode = "none";
this.target.interactive = false;
Tween.get(this.D).to({ x: 144, y: 824, width: 93, height: 96 }, 666, Ease.quadInOut);
this.target = null;
this.pos = null;
Tween.get(this.D)
.wait(666)
.to({ alpha: 0 }, 666, Ease.quadInOut);
Tween.get(this.mi)
.wait(666)
.to({ alpha: 0 }, 666, Ease.quadInOut);
Tween.get(this.mi2)
.wait(666)
.to({ alpha: 1 }, 666, Ease.quadInOut);
Tween.get(this.right)
.wait(999)
.to({ alpha: 1 }, 666, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
[this.A, this.B].forEach((item) => {
item.off("globalpointermove", this.onAPointerMove, this);
});
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level16 extends LevelBase {
level: number = 16;
A: Sprite;
B: Sprite;
right: Sprite;
onLoad() {
super.onLoad();
// this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)))
// .position.set(207, 902);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(293, 1035);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(105, 667);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.position.set(560, 1185);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.A.on("pointerdown", this.onAPointerDown, this);
this.A.on("pointerup", this.onAPointerUp, this);
this.A.on("globalpointermove", this.onAPointerMove, this);
}
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
const { x, y } = e.data.global;
this.pos = {
x: x - this.A.x,
y: y - this.A.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.A.position.set(nx, ny);
if (
nx >= 0
&& nx <= 228
&& ny >= 920
&& ny <= 1034
) {
this.setPauseCd(true);
this.setTouchEnable(false);
// Tween.get(this.B).to({ alpha: 0 }, 444, Ease.quadInOut);
Tween.get(this.A)
.to({ x: 101, y: 946 }, 444, Ease.quadInOut)
.call(() => {
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
})
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.A);
Tween.removeTweens(this.B);
Tween.removeTweens(this.right);
this.A.off("globalpointermove", this.onAPointerMove, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
export const CIRCLE_POS = [
{ x: 71, y: 939 },
{ x: 51, y: 1025 },
{ x: 225, y: 902 },
{ x: 247, y: 1032 },
{ x: 376, y: 773 },
{ x: 383, y: 924 },
{ x: 336, y: 1058 },
{ x: 512, y: 1024 },
{ x: 600, y: 941 },
{ x: 537, y: 840 },
]
export class Level17 extends LevelBase {
level: number = 17;
picture: Sprite;
circleArr = []
clickCircleArr = []
onLoad() {
super.onLoad();
this.picture = this.addChild(new Sprite(Assets.get(`level${this.level}/img.png`)));
this.picture.position.set(47, 736);
CIRCLE_POS.map((item, index) => {
const circle = this.addChild(new Sprite(Assets.get(`level${this.level}/circle${index}.png`)));
circle.position.set(item.x, item.y);
this.circleArr.push(circle);
circle.alpha = 0;
})
this.on("pointertap", this.findAnimal, this);
}
pos = null;
findNum = 0;
findAnimal(e) {
const { x, y } = e.data.global;
this.pos = {
x: x,
y: y
}
console.error(this.pos)
this.circleArr.map((item, index) => {
if(this.pos.x >= item.x && this.pos.x <= item.x + item.width && this.pos.y >= item.y && this.pos.y <= item.y + item.height) {
if (item.findFlag) return;
item.findFlag = true;
Tween.get(item)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.call(() => {
this.findNum++;
if(this.findNum == 10) {
this.setPauseCd(true);
console.log(123123123123)
globalEvent.emit(GameEvent.NextLevel);
}
})
}
})
}
onDestroy() {
super.onDestroy();
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level18 extends LevelBase {
level: number = 18;
cloud1: Sprite;
cloud2: Sprite;
ice: Sprite;
ice2: Sprite;
right: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level18/sun.png`)))
.position.set(267, 703);
this.cloud2 = this.addChild(new Sprite(Assets.get(`level18/cloud2.png`)));
this.cloud2.position.set(45, 743);
this.cloud1 = this.addChild(new Sprite(Assets.get(`level18/cloud1.png`)));
this.cloud1.position.set(176, 664);
this.ice = this.addChild(new Sprite(Assets.get(`level18/ice.png`)));
this.ice.position.set(259, 1031);
this.ice2 = this.addChild(new Sprite(Assets.get(`level18/ice2.png`)));
this.ice2.position.set(148, 1100);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(433, 1173);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.cloud1.on("pointerdown", this.onAPointerDown, this);
this.cloud1.on("pointerup", this.onAPointerUp, this);
this.cloud1.on("globalpointermove", this.onAPointerMove, this);
this.cloud2.on("pointerdown", this.onAPointerDown, this);
this.cloud2.on("pointerup", this.onAPointerUp, this);
this.cloud2.on("globalpointermove", this.onAPointerMove, this);
}
target = null;
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
this.check();
}
check() {
const { x: c1x, y: c1y } = this.cloud1;
const { x: c2x, y: c2y } = this.cloud2;
if (
(c1x < -125 || c1x > 350 || c1y < 595 || c1y > 820)
&& (c2x < -125 || c2x > 350 || c2y < 595 || c2y > 820)
) {
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.ice).to({ alpha: 0 }, 666, Ease.quadInOut);
Tween.get(this.ice2).wait(444).to({ alpha: 1 }, 666, Ease.quadInOut);
Tween.get(this.right)
.wait(666)
.to({ alpha: 1 }, 666, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.ice);
Tween.removeTweens(this.ice2);
Tween.removeTweens(this.right);
this.cloud1.off("globalpointermove", this.onAPointerMove, this);
this.cloud2.off("globalpointermove", this.onAPointerMove, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level19 extends LevelBase {
level: number = 19;
p1: Sprite;
p2: Sprite;
A: Sprite;
right: Sprite;
error: Sprite;
// 双指缩放相关属性
private initialDistance: number = 0;
private initialScale: number = 1;
private isTouching: boolean = false;
private touchPoints: Map<number, { x: number, y: number }> = new Map();
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/img.png`)))
.position.set(0, 868);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/船.png`)));
this.A.anchor.set(0.4, 0.4);
this.A.position.set(430, 1100);
this.A.scale.set(0.5948827292110874);
this.p1 = this.addChild(new Sprite(Assets.get(`level${this.level}/女.png`)));
this.p1.position.set(32, 897);
this.p2 = this.addChild(new Sprite(Assets.get(`level${this.level}/男.png`)));
this.p2.position.set(176, 878);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(613, 1104);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.A.on("pointerdown", this.onPointerDown, this);
this.A.on("globalpointermove", this.onPointerMove, this);
this.A.on("pointerup", this.onPointerUp, this);
this.A.on("pointerupoutside", this.onPointerUp, this);
[this.p1, this.p2]
.forEach((item) => {
item.on("pointerdown", this.onPPointerDown, this);
item.on("globalpointermove", this.onPPointerMove, this);
item.on("pointerup", this.onPPointerUp, this);
item.on("pointerupoutside", this.onPPointerUp, this);
});
}
target = null;
pos = null;
onPPointerUp(e) {
this.pos = null;
}
onPPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onPPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
}
onPointerDown(e) {
console.log("pointerdown", e.pointerId, e.data.global);
// 记录触摸点
this.touchPoints.set(e.pointerId, {
x: e.data.global.x,
y: e.data.global.y
});
// 如果有两个触摸点,开始缩放
if (this.touchPoints.size === 2) {
const points = Array.from(this.touchPoints.values());
this.initialDistance = this.getDistance(points[0], points[1]);
this.initialScale = this.A.scale.x;
this.isTouching = true;
console.log("开始缩放", this.initialDistance, this.initialScale);
}
}
onPointerMove(e) {
if (!this.touchPoints.has(e.pointerId)) return;
// 更新触摸点位置
this.touchPoints.set(e.pointerId, {
x: e.data.global.x,
y: e.data.global.y
});
if (this.isTouching && this.touchPoints.size === 2) {
const points = Array.from(this.touchPoints.values());
const currentDistance = this.getDistance(points[0], points[1]);
// 计算缩放比例
const scaleRatio = currentDistance / this.initialDistance;
const newScale = this.initialScale * scaleRatio;
// 限制最小和最大缩放
const finalScale = Math.max(0.5, Math.min(newScale, 5));
this.A.scale.set(finalScale);
console.log("缩放中", currentDistance, scaleRatio, finalScale);
// 检查是否达到目标大小
this.checkSize();
}
}
onPointerUp(e) {
console.log("pointerup", e.pointerId);
// 移除触摸点
this.touchPoints.delete(e.pointerId);
// 如果少于两个触摸点,停止缩放
if (this.touchPoints.size < 2) {
this.isTouching = false;
console.log("停止缩放");
}
}
getDistance(point1: { x: number, y: number }, point2: { x: number, y: number }): number {
const dx = point1.x - point2.x;
const dy = point1.y - point2.y;
return Math.sqrt(dx * dx + dy * dy);
}
checkSize() {
if (this.A.scale.x >= 1) {
this.triggerSuccess();
}
}
triggerSuccess() {
// 防止重复触发
if (this.right.alpha > 0) return;
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.A);
Tween.removeTweens(this.right);
// 移除触摸事件监听
this.A.off("pointerdown", this.onPointerDown, this);
this.A.off("globalpointermove", this.onPointerMove, this);
this.A.off("pointerup", this.onPointerUp, this);
this.A.off("pointerupoutside", this.onPointerUp, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { errorWaitTime, rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level2 extends LevelBase {
level: number = 2;
A: Sprite;
B: Sprite;
C: Sprite;
D: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/题图.png`)))
.position.set(246, 687);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(67, 1111);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(243, 1111);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(404, 1111);
this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
this.D.position.set(566, 1111);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.visible = false;
this.right.interactive = false;
this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
this.error.visible = false;
this.error.interactive = false;
[this.A, this.B, this.C, this.D]
.forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
}
onTapOption(item: Sprite) {
const isRight = item === this.D;
this.setTouchEnable(false);
const dp = -7;
const wait = 2000;
if (isRight) {
this.setPauseCd(true);
this.right.visible = true;
this.right.position.set(item.x + dp, item.y + dp);
Tween.get(this.right)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
} else {
this.error.visible = true;
this.error.position.set(item.x + dp, item.y + dp);
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(errorWaitTime)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
Tween.removeTweens(this.error);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Rectangle, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level20 extends LevelBase {
level: number = 20;
A: Sprite;
B: Sprite;
C: Sprite;
right: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/box.png`)))
.position.set(95, 959);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(84, 743);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(351, 664);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(536, 839);
this.addChild(this.qs);
const top = this.addChild(new Sprite(Assets.get(`level${this.level}/top.png`)))
top.position.set(95, 970);
top.interactive = false;
top.eventMode = "none";
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(503, 1146);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
[this.A, this.B, this.C, this.qs].forEach((item) => {
item.on("pointerdown", this.onAPointerDown, this);
item.on("pointerup", this.onAPointerUp, this);
item.on("globalpointermove", this.onAPointerMove, this);
});
}
target: Sprite = null;
pos: { x: number, y: number } = null;
onAPointerUp(e) {
this.pos = null;
this.target = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
this.check();
}
check() {
const { x: ax, y: ay, width: aw, height: ah } = this.target;
const isIns = new Rectangle(ax, ay, aw, ah)
.intersects(new Rectangle(280, 1000, 260, 180));
if (isIns) {
this.target.eventMode = "none";
this.target.interactive = false;
const pos = new Map([
[this.A, { x: 184, y: 864 }],
[this.B, { x: 285, y: 854 }],
[this.C, { x: 370, y: 905 }],
[this.qs, { x: 255, y: 950, angle: 45 }],
]).get(this.target);
Tween.get(this.target)
.to({ x: pos.x, y: pos.y, angle: pos.angle || 0 }, 666, Ease.quadInOut);
this.target = null;
this.pos = null;
if (
!this.A.interactive
&& !this.B.interactive
&& !this.C.interactive
&& !this.qs.interactive
) {
this.setPauseCd(true);
Tween.get(this.right)
.to({ alpha: 1 }, 666, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
[this.A, this.B].forEach((item) => {
item.off("globalpointermove", this.onAPointerMove, this);
});
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Rectangle, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level21 extends LevelBase {
level: number = 21;
A: Sprite;
B: Sprite;
right: Sprite;
gameOver = false;
onLoad() {
super.onLoad();
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(162, 835);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.B.position.set(443, 835);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.position.set(452, 1242);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
[this.A, this.B].forEach((item) => {
item.on("pointerdown", this.onAPointerDown, this);
item.on("pointerup", this.onAPointerUp, this);
item.on("globalpointermove", this.onAPointerMove, this);
});
}
target = null;
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
this.check();
}
check() {
if (this.gameOver) return;
const { x: ax, y: ay, width: aw, height: ah } = this.A;
const { x: bx, y: by, width: bw, height: bh } = this.B;
const edge = 20;
const isIns = new Rectangle(ax + edge, ay + edge, aw - edge * 2, ah - edge * 2)
.intersects(new Rectangle(bx + edge, by + edge, bw - edge * 2, bh - edge * 2));
if (isIns) {
this.gameOver = true;
this.setPauseCd(true);
this.setTouchEnable(false);
this.right.position.set(bx - 30, by - 30);
Tween.get(this.B).to({ alpha: 0 }, 666, Ease.quadInOut);
Tween.get(this.right)
.to({ alpha: 1 }, 666, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
[this.A, this.B].forEach((item) => {
item.off("globalpointermove", this.onAPointerMove, this);
});
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level22 extends LevelBase {
level: number = 22;
A: Sprite;
B: Sprite;
right: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/底.png`)))
.position.set(194, 697);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/裤子.png`)));
this.B.position.set(267, 1119);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/衣服.png`)));
this.A.position.set(195, 808);
const x = this.addChild(new Sprite(Assets.get(`level${this.level}/头.png`)))
x.position.set(282, 697);
x.interactive = false;
x.eventMode = "none";
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(452, 1242);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
[this.A, this.B].forEach((item) => {
item.on("pointerdown", this.onAPointerDown, this);
item.on("pointerup", this.onAPointerUp, this);
item.on("globalpointermove", this.onAPointerMove, this);
});
}
target = null;
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
this.check();
}
check() {
const { x: ax, y: ay } = this.A;
const { x: bx, y: by } = this.B;
if (
(ax < 0 || ax > 425 || ay < 600 || ay > 970)
&& (bx < 80 || bx > 450 || by < 840 || by > 1200)
) {
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.right)
.to({ alpha: 1 }, 666, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
[this.A, this.B].forEach((item) => {
item.off("globalpointermove", this.onAPointerMove, this);
});
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { errorWaitTime, rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level23 extends LevelBase {
level: number = 23;
A: Sprite;
B: Sprite;
C: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(55, 815);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(286, 815);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(516, 815);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.visible = false;
this.right.interactive = false;
this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
this.error.visible = false;
this.error.interactive = false;
[this.A, this.B, this.C]
.forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
}
onTapOption(item: Sprite) {
const isRight = item === this.C;
this.setTouchEnable(false);
const dp = -9;
const wait = 2000;
if (isRight) {
this.setPauseCd(true);
this.right.visible = true;
this.right.position.set(item.x + dp, item.y + dp);
Tween.get(this.right)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
} else {
this.error.visible = true;
this.error.position.set(item.x + dp, item.y + dp);
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(errorWaitTime)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
Tween.removeTweens(this.error);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level24 extends LevelBase {
level: number = 24;
balls: Sprite[] = [];
right: Sprite;
error: Sprite;
// 拖拽相关属性
private dragData: { ball: Sprite, offset: { x: number, y: number } } | null = null;
onLoad() {
super.onLoad();
// 创建四个球,并添加到balls数组中
const ballA = this.addChild(new Sprite(Assets.get(`level${this.level}/球.png`)));
ballA.position.set(125, 710);
ballA.scale.set(134 / 378);
this.balls.push(ballA);
const ballB = this.addChild(new Sprite(Assets.get(`level${this.level}/球.png`)));
ballB.position.set(434, 685);
ballB.scale.set(182 / 378);
this.balls.push(ballB);
const ballC = this.addChild(new Sprite(Assets.get(`level${this.level}/球.png`)));
ballC.position.set(205, 982);
ballC.scale.set(90 / 378);
this.balls.push(ballC);
const ballD = this.addChild(new Sprite(Assets.get(`level${this.level}/球.png`)));
ballD.position.set(410, 926);
ballD.scale.set(156 / 378);
this.balls.push(ballD);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(613, 1104);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
// 为每个球添加拖拽事件
this.balls.forEach((ball) => {
ball.on("pointerdown", this.onBallPointerDown, this);
ball.on("globalpointermove", this.onBallPointerMove, this);
ball.on("pointerup", this.onBallPointerUp, this);
ball.on("pointerupoutside", this.onBallPointerUp, this);
});
}
onBallPointerDown(e) {
const ball = e.currentTarget as Sprite;
console.log("开始拖拽球", ball);
this.dragData = {
ball: ball,
offset: {
x: e.data.global.x - ball.x,
y: e.data.global.y - ball.y
}
};
// 将当前球置于最上层
this.setChildIndex(ball, this.children.length - 1);
}
onBallPointerMove(e) {
if (!this.dragData) return;
// 更新球的位置
this.dragData.ball.x = e.data.global.x - this.dragData.offset.x;
this.dragData.ball.y = e.data.global.y - this.dragData.offset.y;
}
onBallPointerUp(e) {
if (!this.dragData) return;
const draggedBall = this.dragData.ball;
this.dragData = null;
// 检查是否与其他球发生碰撞并合成
this.checkMerge(draggedBall);
}
checkMerge(draggedBall: Sprite) {
for (const ball of this.balls) {
if (ball === draggedBall) continue;
// 计算两球中心点的距离(由于锚点为默认值,需要加上半径偏移)
const draggedCenterX = draggedBall.x + (draggedBall.width / 2);
const draggedCenterY = draggedBall.y + (draggedBall.height / 2);
const ballCenterX = ball.x + (ball.width / 2);
const ballCenterY = ball.y + (ball.height / 2);
const distance = this.getDistance(
{ x: draggedCenterX, y: draggedCenterY },
{ x: ballCenterX, y: ballCenterY }
);
// 计算两球的半径
const draggedRadius = draggedBall.width / 2;
const ballRadius = ball.width / 2;
// 如果两球接触(距离小于两球半径之和)
if (distance < draggedRadius + ballRadius) {
console.log("球碰撞,开始合成");
this.mergeBalls(draggedBall, ball);
return;
}
}
}
mergeBalls(ball1: Sprite, ball2: Sprite) {
// 计算新球的位置(两球中心点的中点,然后转换回左上角坐标)
const ball1CenterX = ball1.x + (ball1.width / 2);
const ball1CenterY = ball1.y + (ball1.height / 2);
const ball2CenterX = ball2.x + (ball2.width / 2);
const ball2CenterY = ball2.y + (ball2.height / 2);
const newCenterX = (ball1CenterX + ball2CenterX) / 2;
const newCenterY = (ball1CenterY + ball2CenterY) / 2;
// 计算新球的大小(使用更小的增长幅度)
const scaleIncrease = Math.min(ball1.scale.x, ball2.scale.x) * 0.4; // 增长幅度减小为较小球的30%
const newScale = Math.min(Math.max(ball1.scale.x, ball2.scale.x) + scaleIncrease, 1.2); // 最大限制调整为1.2
// 移除较小的球,保留较大的球作为合成结果
const keepBall = ball1.scale.x >= ball2.scale.x ? ball1 : ball2;
const removeBall = ball1.scale.x >= ball2.scale.x ? ball2 : ball1;
// 从balls数组中移除被合成的球
const removeIndex = this.balls.indexOf(removeBall);
if (removeIndex > -1) {
this.balls.splice(removeIndex, 1);
}
// 移除被合成的球的事件监听
removeBall.off("pointerdown", this.onBallPointerDown, this);
removeBall.off("globalpointermove", this.onBallPointerMove, this);
removeBall.off("pointerup", this.onBallPointerUp, this);
removeBall.off("pointerupoutside", this.onBallPointerUp, this);
// 计算新位置(左上角坐标)
const newSize = 378 * newScale;
const newX = newCenterX - (newSize / 2);
const newY = newCenterY - (newSize / 2);
// 播放合成动画
Tween.get(keepBall)
.to({ x: newX, y: newY, scaleX: newScale, scaleY: newScale }, 300, Ease.quadOut)
.call(() => {
// 移除被合成的球
this.removeChild(removeBall);
// 检查是否通关
this.checkWinCondition();
});
Tween.get(removeBall)
.to({ alpha: 0, scaleX: 0, scaleY: 0 }, 300, Ease.quadOut);
}
checkWinCondition() {
console.log("检查通关条件,剩余球数:", this.balls.length);
// 如果只剩一个球
if (this.balls.length === 1) {
console.log("达到通关条件");
this.triggerSuccess();
}
}
getDistance(point1: { x: number, y: number }, point2: { x: number, y: number }): number {
const dx = point1.x - point2.x;
const dy = point1.y - point2.y;
return Math.sqrt(dx * dx + dy * dy);
}
triggerSuccess() {
// 防止重复触发
if (this.right.alpha > 0) return;
console.log("开始通关动画");
this.setPauseCd(true);
this.setTouchEnable(false);
// 获取最后一个球
const lastBall = this.balls[0];
// 计算屏幕中间位置(假设屏幕尺寸为720x1280)
const screenCenterX = 360;
const screenCenterY = 940;
// 计算球移动到屏幕中间时的位置(左上角坐标)
const ballTargetX = screenCenterX - (lastBall.width / 2);
const ballTargetY = screenCenterY - (lastBall.height / 2);
// 球移动到屏幕中间的动画
Tween.get(lastBall)
.to({ x: ballTargetX, y: ballTargetY }, 600, Ease.quadInOut)
.call(() => {
// 球到达中间后,计算right的位置(球的右下角)
const rightX = lastBall.x + lastBall.width - this.right.width + 20; // 稍微偏移一点
const rightY = lastBall.y + lastBall.height - this.right.height + 20;
// 设置right的位置
this.right.position.set(rightX, rightY);
// 显示right图标并完成通关
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
});
}
onDestroy() {
super.onDestroy();
// 移除所有球的tween动画
this.balls.forEach(ball => {
Tween.removeTweens(ball);
ball.off("pointerdown", this.onBallPointerDown, this);
ball.off("globalpointermove", this.onBallPointerMove, this);
ball.off("pointerup", this.onBallPointerUp, this);
ball.off("pointerupoutside", this.onBallPointerUp, this);
});
Tween.removeTweens(this.right);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level25 extends LevelBase {
level: number = 25;
right: Sprite;
sleepPig: Sprite;
sleepMark: Sprite;
hideMark: Sprite;
redFace: Sprite;
mad: Sprite;
wake: Sprite;
gameOver = false;
trueArea = false;
onLoad() {
super.onLoad();
this.sleepPig = this.addChild(new Sprite(Assets.get(`level25/img.png`)));
this.sleepPig.position.set(114, 785);
this.sleepMark = this.addChild(new Sprite(Assets.get(`level25/sleep.png`)));
this.sleepMark.position.set(100, 778);
this.hideMark = this.addChild(new Sprite(Assets.get(`level25/hide.png`)));
this.hideMark.position.set(173, 931);
this.hideMark.alpha = 0;
this.redFace = this.addChild(new Sprite(Assets.get(`level25/redFace.png`)));
this.redFace.position.set(116, 813);
this.redFace.alpha = 0;
this.mad = this.addChild(new Sprite(Assets.get(`level25/mad.png`)));
this.mad.position.set(175, 936);
this.mad.alpha = 0;
this.wake = this.addChild(new Sprite(Assets.get(`level25/wake.png`)));
this.wake.position.set(175, 936);
this.wake.alpha = 0;
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(535, 995);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.on("pointerdown", this.onNosePointerDown, this);
this.on("pointerup", this.onNosePointerUp, this);
}
onNosePointerDown(e) {
const { x, y } = e.data.global;
if(x >=182 && x <= 260 && y >= 954 && y <= 1024) {
this.trueArea = true;
} else {
this.trueArea = false;
}
if(this.gameOver) return;
if(!this.trueArea) return
this.mad.alpha = 1;
this.hideMark.alpha = 1;
Tween.get(this.redFace)
.to({ alpha: 1 }, 3000)
.call(() => {
this.gameOver = true;
this.mad.alpha = 0;
this.redFace.alpha = 0;
this.wake.alpha = 1;
this.hideMark.alpha = 0;
this.setPauseCd(true);
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
})
}
onNosePointerUp(e) {
if(this.gameOver) return;
if(!this.trueArea) return
Tween.removeTweens(this.redFace);
this.hideMark.alpha = 0;
this.redFace.alpha = 0;
this.mad.alpha = 0;
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.redFace);
Tween.removeTweens(this.right);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { errorWaitTime, rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level3 extends LevelBase {
level: number = 3;
A: Sprite;
B: Sprite;
C: Sprite;
D: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(100, 724);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(398, 724);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(100, 1002);
this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
this.D.position.set(398, 1002);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.visible = false;
this.right.interactive = false;
this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
this.error.visible = false;
this.error.interactive = false;
[this.A, this.B, this.C, this.D]
.forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
}
onTapOption(item: Sprite) {
const isRight = item === this.A;
this.setTouchEnable(false);
const dp = -10;
const wait = 2000;
if (isRight) {
this.setPauseCd(true);
this.right.visible = true;
this.right.position.set(item.x + dp, item.y + dp);
Tween.get(this.right)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
} else {
this.error.visible = true;
this.error.position.set(item.x + dp, item.y + dp);
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(errorWaitTime)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
Tween.removeTweens(this.error);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { errorWaitTime, rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level4 extends LevelBase {
level: number = 4;
A: Sprite;
B: Sprite;
C: Sprite;
D: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(73, 1061);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(296, 1061);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(519, 1061);
this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
this.D.position.set(269, 668);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.position.set(243, 658);
this.right.visible = false;
this.right.interactive = false;
this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
this.error.visible = false;
this.error.interactive = false;
[this.A, this.B, this.C, this.D]
.forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
}
onTapOption(item: Sprite) {
const isRight = item === this.D;
this.setTouchEnable(false);
const dp = -7;
const wait = 2000;
if (isRight) {
this.setPauseCd(true);
this.right.visible = true;
Tween.get(this.right)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
} else {
this.error.visible = true;
this.error.position.set(item.x + dp, item.y + dp);
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(errorWaitTime)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
Tween.removeTweens(this.error);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { errorWaitTime, rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level5 extends LevelBase {
level: number = 5;
A: Sprite;
B: Sprite;
C: Sprite;
D: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(447, 669);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(143, 999);
this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
this.D.position.set(377, 999);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(201, 775);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.position.set(371, 993);
this.right.alpha = 0;
this.right.interactive = false;
this.error = this.addChild(new Sprite(Assets.get(`common/error.png`)));
this.error.visible = false;
this.error.interactive = false;
[this.A, this.B, this.C, this.D]
.forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
this.A.on("pointerdown", this.onAPointerDown, this);
this.A.on("pointerup", this.onAPointerUp, this);
this.A.on("globalpointermove", this.onAPointerMove, this);
}
onTapOption(item: Sprite) {
this.pos = null;
this.setTouchEnable(false);
const dp = new Map([
[this.A, { x: 70, y: 70 }],
[this.B, { x: 120, y: 190 }],
[this.C, { x: 10, y: 140 }],
[this.D, { x: 150, y: 150 }],
]).get(item);
this.error.position.set(item.x + dp.x, item.y + dp.y);
this.error.visible = true;
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(errorWaitTime)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
const { x, y } = e.data.global;
this.pos = {
x: x - this.A.x,
y: y - this.A.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.A.position.set(nx, ny);
if (
nx >= 400
&& nx <= 500
&& ny >= 1000
&& ny <= 1120
) {
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.A)
.to({ x: 439, y: 1073 }, 444, Ease.quadInOut)
.call(() => {
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
})
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.A);
Tween.removeTweens(this.error);
Tween.removeTweens(this.right);
this.A.off("globalpointermove", this.onAPointerMove, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level6 extends LevelBase {
level: number = 6;
A: Sprite;
B: Sprite;
C: Sprite;
right: Sprite;
onLoad() {
super.onLoad();
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(199, 821);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(226, 789);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(266, 672);
this.right = this.addChild(new Sprite(Assets.get(`level${this.level}/right.png`)));
this.right.position.set(103, 1069);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
const x = this.addChild(new Sprite(Assets.get(`level${this.level}/叉子.png`)))
x.position.set(286, 1152);
x.interactive = false;
x.eventMode = "none";
[this.A, this.B, this.C].forEach((item) => {
item.on("pointerdown", this.onAPointerDown, this);
item.on("pointerup", this.onAPointerUp, this);
item.on("globalpointermove", this.onAPointerMove, this);
});
}
target = null;
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
this.target = e.target;
const { x, y } = e.data.global;
this.pos = {
x: x - e.target.x,
y: y - e.target.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.target.position.set(nx, ny);
this.check();
}
check() {
const { x, y } = this.C;
if (x >= 80 && x <= 230 && y >= 1030 && y <= 1100) {
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.C)
.to({ x: 129, y: 1049 }, 666, Ease.quadInOut);
Tween.get(this.right)
.wait(666)
.to({ alpha: 1 }, 666, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
[this.A, this.B, this.C].forEach((item) => {
item.off("globalpointermove", this.onAPointerMove, this);
});
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { getApp } from "@/pages/GamePage/GamePage.tsx";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level7 extends LevelBase {
level: number = 7;
pig: Sprite;
coin: Sprite;
onLoad() {
super.onLoad();
this.pig = this.addChild(new Sprite(Assets.get("level7/pig.png")));
this.pig.anchor.set(0.5);
this.pig.position.set(380, 900);
this.coin = this.pig.addChild(new Sprite(Assets.get("level7/金币.png")));
this.coin.anchor.set(0.5);
this.coin.position.set(12, 35);
this.pig.addChild(new Sprite(Assets.get("level7/mask.png")))
.position.set(-203, -108);
getApp().stage.on("pointerdown", this.onPointerDown, this);
getApp().stage.on("pointerup", this.onPointerUp, this);
getApp().stage.on("pointermove", this.onPointerMove, this);
}
passLevel() {
this.setPauseCd(true);
this.setTouchEnable(false);
getApp().stage.off("pointerdown", this.onPointerDown, this);
getApp().stage.off("pointerup", this.onPointerUp, this);
getApp().stage.off("pointermove", this.onPointerMove, this);
Tween.get(this.pig)
.to({ angle: -180, }, 222)
.call(() => {
Tween.get(this.coin)
.to({ y: -300, }, 666, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
});
}
calcAngle(x: number, y: number) {
const centerX = 378;
const centerY = 812;
const dx = x - centerX;
const dy = y - centerY;
return Math.atan2(dy, dx) * (180 / Math.PI);
}
sAngle = null;
onPointerUp(e) {
this.sAngle = null;
}
onPointerMove = (e: any) => {
if (this.sAngle === null) return;
const { x, y } = e.data.global;
const angle = this.calcAngle(x, y);
this.pig.angle = angle - this.sAngle;
const pAngle = this.pig.angle % 360;
if (
(pAngle < -150 && pAngle > -200)
|| (pAngle > 160 && pAngle < 210)
) {
this.passLevel();
}
};
onPointerDown(e) {
const { x: sx, y: sy } = e.data.global;
this.sAngle = this.calcAngle(sx, sy) - this.pig.angle;
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.pig);
Tween.removeTweens(this.coin);
getApp().stage.off("pointerdown", this.onPointerDown, this);
getApp().stage.off("pointerup", this.onPointerUp, this);
getApp().stage.off("pointermove", this.onPointerMove, this);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { errorWaitTime, rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level8 extends LevelBase {
level: number = 8;
A: Sprite;
B: Sprite;
C: Sprite;
D: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/A.png`)));
this.A.position.set(99, 724);
this.B = this.addChild(new Sprite(Assets.get(`level${this.level}/B.png`)));
this.B.position.set(398, 724);
this.C = this.addChild(new Sprite(Assets.get(`level${this.level}/C.png`)));
this.C.position.set(99, 1002);
this.D = this.addChild(new Sprite(Assets.get(`level${this.level}/D.png`)));
this.D.position.set(398, 1002);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(518, 530);
this.right.visible = false;
this.right.interactive = false;
this.error = this.addChild(new Sprite(Assets.get(`level${this.level}/error.png`)));
this.error.visible = false;
this.error.interactive = false;
[this.A, this.B, this.C, this.D, this.qs]
.forEach((item) => {
item.on("pointertap", this.onTapOption.bind(this, item));
});
}
onTapOption(item: Sprite) {
const isRight = item === this.qs;
this.setTouchEnable(false);
const dp = -10;
const wait = 2000;
if (isRight) {
this.setPauseCd(true);
this.right.visible = true;
Tween.get(this.right)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
} else {
this.error.visible = true;
this.error.position.set(item.x + dp, item.y + dp);
Tween.removeTweens(this.error);
Tween.get(this.error)
.wait(errorWaitTime)
.call(() => {
this.error.visible = false;
this.setTouchEnable(true);
});
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.right);
Tween.removeTweens(this.error);
}
}
import { LevelBase } from "@/pages/GamePage/Components/LevelBase.ts";
import { Assets, Sprite } from "pixi.js";
import { Ease, Tween } from "@/core/tween";
import { GameEvent, globalEvent } from "@/pages/GamePage/GameEvent.ts";
import { rightWaitTime } from "@/pages/GamePage/Level/LevelConfig.ts";
export class Level9 extends LevelBase {
level: number = 9;
A: Sprite;
right: Sprite;
error: Sprite;
onLoad() {
super.onLoad();
this.addChild(new Sprite(Assets.get(`level${this.level}/img.png`)))
.position.set(46, 979);
this.A = this.addChild(new Sprite(Assets.get(`level${this.level}/duck.png`)));
this.A.position.set(330, 764);
this.right = this.addChild(new Sprite(Assets.get(`common/right.png`)));
this.right.position.set(470, 1050);
this.right.alpha = 0;
this.right.interactive = false;
this.right.eventMode = "none";
this.A.on("pointerdown", this.onAPointerDown, this);
this.A.on("pointerup", this.onAPointerUp, this);
this.A.on("globalpointermove", this.onAPointerMove, this);
}
pos = null;
onAPointerUp(e) {
this.pos = null;
}
onAPointerDown(e) {
const { x, y } = e.data.global;
this.pos = {
x: x - this.A.x,
y: y - this.A.y
}
}
onAPointerMove(e) {
if (!this.pos) return;
const { x, y } = e.data.global;
const nx = x - this.pos.x;
const ny = y - this.pos.y;
this.A.position.set(nx, ny);
if (
nx >= 110
&& nx <= 530
&& ny >= 980
&& ny <= 1100
) {
this.setPauseCd(true);
this.setTouchEnable(false);
Tween.get(this.A)
.to({ x: 380, y: 975 }, 444, Ease.quadInOut)
.call(() => {
Tween.get(this.right)
.to({ alpha: 1 }, 444, Ease.quadInOut)
.wait(rightWaitTime)
.call(() => {
globalEvent.emit(GameEvent.NextLevel);
});
})
}
}
onDestroy() {
super.onDestroy();
Tween.removeTweens(this.A);
Tween.removeTweens(this.right);
this.A.off("globalpointermove", this.onAPointerMove, this);
}
}
import { Level1 } from "@/pages/GamePage/Level/Level1.ts";
import { Level2 } from "@/pages/GamePage/Level/Level2.ts";
import { Level3 } from "@/pages/GamePage/Level/Level3.ts";
import { Level4 } from "@/pages/GamePage/Level/Level4.ts";
import { Level5 } from "@/pages/GamePage/Level/Level5.ts";
import { Level6 } from "@/pages/GamePage/Level/Level6.ts";
import { Level7 } from "@/pages/GamePage/Level/Level7.ts";
import { Level8 } from "@/pages/GamePage/Level/Level8.ts";
import { Level9 } from "@/pages/GamePage/Level/Level9.ts";
import { Level10 } from "@/pages/GamePage/Level/Level10.ts";
import { Level11 } from "@/pages/GamePage/Level/Level11.ts";
import { Level12 } from "@/pages/GamePage/Level/Level12.ts";
import { Level13 } from "@/pages/GamePage/Level/Level13.ts";
import { Level14 } from "@/pages/GamePage/Level/Level14.ts";
import { Level15 } from "@/pages/GamePage/Level/Level15.ts";
import { Level16 } from "@/pages/GamePage/Level/Level16.ts";
import { Level17 } from "@/pages/GamePage/Level/Level17.ts";
import { Level18 } from "@/pages/GamePage/Level/Level18.ts";
import { Level19 } from "@/pages/GamePage/Level/Level19.ts";
import { Level20 } from "@/pages/GamePage/Level/Level20.ts";
import { Level21 } from "@/pages/GamePage/Level/Level21.ts";
import { Level22 } from "@/pages/GamePage/Level/Level22.ts";
import { Level23 } from "@/pages/GamePage/Level/Level23.ts";
import { Level24 } from "@/pages/GamePage/Level/Level24.ts";
import { Level25 } from "./Level25";
export const errorWaitTime = 1000;
export const rightWaitTime = 2000;
export const LevelArr = [
{ cls: Level1, tip: `5=1` },
{ cls: Level2, tip: `图中一共有9个金币` },
{ cls: Level3, tip: `当然是太阳最高啦` },
{ cls: Level4, tip: `没有什么比猫猫的<br/>左右爪更像了` },
{ cls: Level5, tip: `将蛋黄放在蛋白上<br/>拼出荷包蛋` },
{ cls: Level6, tip: `直接移动最底层的蛋糕` },
{ cls: Level7, tip: `旋转存钱罐,倒出金币` },
{ cls: Level8, tip: `最深的颜色是题目` },
{ cls: Level9, tip: `移动小鸭子至河边` },
{ cls: Level10, tip: `将“1”移动至等号右边<br/>形成等式` },
{ cls: Level11, tip: `将冰箱放大至能装够装下<br/>长颈鹿` },
{ cls: Level12, tip: `掐断烟头` },
{ cls: Level13, tip: `打开盖子看看` },
{ cls: Level14, tip: `将香蕉移动到牛奶中<br/>变成香蕉牛奶` },
{ cls: Level15, tip: `猫吃老鼠` },
{ cls: Level16, tip: `移动笼子罩住小鸭子` },
{ cls: Level17, tip: `别忘了,人是高等动物哦` },
{ cls: Level18, tip: `移开乌云露出太阳<br/>让冰块融化` },
{ cls: Level19, tip: `将小船放大,装下两人` },
{ cls: Level20, tip: `别忘了把题目也装进箱子里` },
{ cls: Level21, tip: `移动鸡蛋,碰一碰便知` },
{ cls: Level22, tip: `移开圣诞老人的衣服看看` },
{ cls: Level23, tip: `一样重` },
{ cls: Level24, tip: `将雪球合在一起滚成大雪球` },
{ cls: Level25, tip: `按住小猪鼻子,把它憋醒` },
];
This diff is collapsed.
import { autorun, configure, IReactionDisposer, IReactionPublic, reaction } from "mobx";
configure({enforceActions: "observed"});
const {hasOwnProperty} = Object.prototype;
const symbolAutoRuns = Symbol("autoRuns");
const symbolReactions = Symbol("reactions");
const symbolDisposers = Symbol("disposers");
/**
* 绑定放到 onEnable, onDisable,
* 如果用户不希望observe, 可以在 onLoad 中执行 this.enable = false;
*/
export function observer(Component: Function): void {
const prototype = Component.prototype as ObserverPrototype;
if (!prototype[symbolAutoRuns] && !prototype[symbolReactions]) return;
const {onLoad: _onLoad, onDestroy: _onDestroy} = prototype;
if (!_onLoad) {
prototype.onLoad = observe;
} else if (_onLoad !== observe) {
prototype.onLoad = function onEnable(this: ObserverPrototype) {
const rt = _onLoad.call(this);
if (rt !== false) observe.call(this);
};
}
if (!_onDestroy) {
prototype.onDestroy = dispose;
} else if (_onDestroy !== dispose) {
prototype.onDestroy = function onDestroy(this: ObserverPrototype) {
dispose.call(this);
_onDestroy.call(this);
};
}
}
type ObserverPrototype = {
[symbolDisposers]?: Array<() => void>;
[symbolAutoRuns]?: string[];
[symbolReactions]?: string[];
onLoad?: () => unknown;
onDestroy?: () => void;
};
function dispose(this: ObserverPrototype) {
const disposers = this[symbolDisposers];
if (disposers) disposers.splice(0).forEach((x) => x());
}
function getDisposers(object: ObserverPrototype): Array<() => void> {
const value = object[symbolDisposers];
if (value) return value;
const arr: Array<() => void> = [];
defineProperty(object, symbolDisposers, arr);
return arr;
}
function observe(this: ObserverPrototype) {
const disposers = getDisposers(this);
if (disposers.length) return;
const {[symbolAutoRuns]: autoRuns, [symbolReactions]: reactions} = this;
const _self = this as unknown as { [fn: string]: () => () => void };
if (autoRuns) {
const {name} = this.constructor;
autoRuns.forEach((fn) => {
const view = _self[fn].bind(_self);
const disposer = autorun(view, {name: `${name}#${fn}`});
disposers.push(disposer);
});
}
if (reactions) {
reactions.forEach((fn) => {
const disposer = _self[fn]();
disposers.push(disposer);
});
}
}
export function render(target: any, key: string, _?: TypedPropertyDescriptor<() => void>) {
attach(target, key, symbolAutoRuns);
}
export function reactor(
target: any,
key: string,
descriptor?: TypedPropertyDescriptor<() => IReactionDisposer>,
): void;
export function reactor<T>(
expression: (r: IReactionPublic) => T,
): (target: any, key: string, descriptor: TypedPropertyDescriptor<(arg: T) => void>) => void;
export function reactor<T>(arg0: any, arg1?: string) {
if (arg1 == null) {
return reactorArg1<T>(arg0);
}
return attach(arg0, arg1, symbolReactions);
}
function reactorArg1<T>(expression: (r: IReactionPublic) => T) {
return (target: any, key: string, descriptor: TypedPropertyDescriptor<(arg: T) => void>) => {
attach(target, key, symbolReactions);
const value = descriptor.value as (arg: T) => void;
// eslint-disable-next-line no-param-reassign
descriptor.value = function getter() {
return reaction(expression, value.bind(this), {fireImmediately: true});
};
};
}
function attach<K extends symbol>(target: Record<K, string[]>, key: string, storeKey: K) {
if (!hasOwnProperty.call(target, storeKey)) {
const value = target[storeKey] ? target[storeKey].slice(0) : [];
defineProperty(target, storeKey, value);
}
if (target[storeKey].indexOf(key) === -1) {
target[storeKey].push(key);
}
}
function defineProperty(target: any, key: string | symbol, value: unknown[]) {
Object.defineProperty(target, key, {
enumerable: false,
writable: false,
configurable: false,
value,
});
}
......@@ -20,6 +20,9 @@ import { CHANNEL_PARAMS, extranceName } from '@/utils/constants.js';
import gameStore from "@/store/gameStore.ts";
import GamePage from "@/pages/GamePage/GamePage.tsx";
import MusicBtn from '@/core/components/MusicBtn/MusicBtn.tsx';
import AwardPopup from '@/panels/AwardPopup/index.jsx'
import VictoryPopup from '@/panels/VictoryPopup/index.jsx'
import FailPopup from '@/panels/FailPopup/index.jsx'
import { SvgaPlayer } from "@grace/svgaplayer";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
......@@ -84,7 +87,8 @@ class Homepage extends React.Component {
page_name: "活动首页",
button_name: "做任务,赚次数按钮",
});
ModalCtrl.showModal(Taskpop);
// ModalCtrl.showModal(Taskpop);
ModalCtrl.showModal(FailPopup);
break;
// 3 开始游戏
......@@ -94,14 +98,14 @@ class Homepage extends React.Component {
button_name: "开始答题按钮",
});
if (!store.indexData?.leftGameTimes) {
Toast.show("游戏次数不足,快去做任务赚次数吧~")
return;
}
const suc = await gameStore.start();
if (suc) {
// if (!store.indexData?.leftGameTimes) {
// Toast.show("游戏次数不足,快去做任务赚次数吧~")
// return;
// }
// const suc = await gameStore.start();
// if (suc) {
PageCtrl.changePage(GamePage);
}
// }
break;
......
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './index.less';
import { _asyncThrottle, _throttle } from '../../utils/utils.ts';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import store from "@/store/store.js";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import HomePage from '@/pages/HomePage/HomePage.tsx';
@observer
class AwardPopup extends React.Component {
constructor(props) {
super(props);
}
//关闭
onClose = () => {
ModalCtrl.closeModal();
}
//开心收下
onReceive = ()=>{
}
render() {
return (
<div className="AwardPopup">
<div className="ap_mask"></div>
<div className='ap_bg'>
<div className='ap_txt'>成功获得奖品</div>
<div className='ap_icon'></div>
<div className='ap_award_name'>奖品名称</div>
<div className='ap_btn' onClick={()=>this.onReceive()}></div>
</div>
<div className='ap_close' onClick={()=>this.onClose()}></div>
</div>
);
}
};
export default AwardPopup;
\ No newline at end of file
@import "../../res.less";
.AwardPopup {
width: 100vw;
height: 100vh;
overflow-y: scroll;
.ap_mask {
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
.ap_bg {
position: absolute;
width: 641px;
height: 903px;
top: 249px;
left: 55px;
.sparkBg("awardPopup/award_bg.png");
.ap_txt {
position: absolute;
width: 100%;
top: 344px;
left: 0px;
text-align: center;
color: #290d10;
font-size: 30px;
}
.ap_icon {
position: absolute;
width: 200px;
height: 200px;
top: 411px;
left: 220px;
background: #fff;
border: #af7b13 2px solid;
border-radius: 20px;
}
.ap_award_name {
position: absolute;
width: 100%;
top: 635px;
left: 0px;
text-align: center;
color: #87542f;
font-size: 30px;
}
.ap_btn {
position: absolute;
width: 485px;
height: 106px;
top: 702px;
left: 78px;
.sparkBg("awardPopup/btn.png");
}
}
.ap_close {
position: absolute;
width: 66px;
height: 66px;
left: 342px;
top: 1242px;
.sparkBg("awardPopup/close.png");
}
}
\ No newline at end of file
'use strict';
import React from 'react';
import { observer } from 'mobx-react';
import './index.less';
import { _asyncThrottle, _throttle } from '../../utils/utils.ts';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import store from "@/store/store.js";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import HomePage from '@/pages/HomePage/HomePage.tsx';
@observer
class FailPopup extends React.Component {
constructor(props) {
super(props);
}
//关闭
onClose = () => {
ModalCtrl.closeModal();
}
//开心收下
onReceive = ()=>{
}
render() {
return (
<div className="FailPopup">
<div className="fp_mask"></div>
<div className='fp_bg'>
<div className='fp_txt'>还需要合成以下个数才可解锁地标</div>
<div className='fp_icon'></div>
<div className='fp_btn' onClick={()=>this.onReceive()}>
<div className='fp_btn_txt'>剩余次数:3</div>
</div>
</div>
<div className='fp_close' onClick={()=>this.onClose()}></div>
</div>
);
}
};
export default FailPopup;
\ No newline at end of file
@import "../../res.less";
.FailPopup {
width: 100vw;
height: 100vh;
overflow-y: scroll;
.fp_mask {
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
.fp_bg {
position: absolute;
width: 596px;
height: 512px;
top: 497px;
left: 77px;
.sparkBg("failPopup/fail_bg.png");
.fp_txt {
position: absolute;
width: 100%;
top: 127px;
left: 0px;
text-align: center;
color: #290d10;
font-size: 30px;
}
// .fp_icon {
// position: absolute;
// width: 200px;
// height: 200px;
// top: 411px;
// left: 220px;
// background: #fff;
// border: #af7b13 2px solid;
// border-radius: 20px;
// }
// .ap_award_name {
// position: absolute;
// width: 100%;
// top: 635px;
// left: 0px;
// text-align: center;
// color: #87542f;
// font-size: 30px;
// }
.fp_btn {
position: absolute;
width: 485px;
height: 106px;
top: 354px;
left: 56px;
.sparkBg("failPopup/btn.png");
.fp_btn_txt{
position: absolute;
width: 100%;
text-align: center;
font-size: 22px;
color: #ffffff;
top: 68px;
}
}
}
.fp_close {
position: absolute;
width: 66px;
height: 66px;
left: 342px;
top: 1142px;
.sparkBg("failPopup/close.png");
}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment