Commit 3e6a4f83 authored by haiyoucuv's avatar haiyoucuv

新手引导

parent 937e90c1
......@@ -64,7 +64,7 @@ export const EleConfig: { [key in Ele]: EleData } = {
cls: Filiform,
texture: "元素/丝状菌.png",
weight: 3,
score: 20,
score: 2,
},
[Ele.Molecule]: {
cls: Molecule,
......
@import "../../res.less";
.GuidePage {
width: 750px;
height: 1624px;
left: 0;
top: 0;
position: absolute;
overflow: hidden;
.bg {
width: 750px;
height: 1624px;
left: 0;
top: 0;
position: absolute;
.sparkBg("GuidePage/bg.jpg");
}
.joystick {
position: absolute;
left: 270px;
top: 1070px;
width: 210px;
height: 210px;
.sparkBg("GuidePage/方向键未触发.png");
}
.tip {
font-size: 32px;
color: rgb(255, 255, 255);
text-align: center;
position: absolute;
left: 0;
top: 1300px;
width: 100%;
}
.kuang {
width: 750px;
height: 411px;
position: absolute;
left: 0;
}
.kuang1 {
top: 575px;
}
.kuang2 {
top: 694px;
}
.kuang3 {
top: 694px;
}
.kuang4 {
top: 694px;
}
.kuang5 {
top: 344px;
}
.guide {
position: absolute;
.fadeIn();
}
.guide1 {
left: 70px;
top: 690px;
width: 613px;
height: 208px;
.sparkBg("GuidePage/guide1.png");
}
.guide2 {
left: 70px;
top: 544px;
width: 611px;
height: 479px;
.sparkBg("GuidePage/guide2.png");
}
.guide3 {
left: 92px;
top: 554px;
width: 569px;
height: 467px;
.sparkBg("GuidePage/guide3.png");
}
.guide4 {
left: 42px;
top: 571px;
width: 676px;
height: 459px;
.sparkBg("GuidePage/guide4.png");
}
.guide5 {
left: 43px;
top: 211px;
width: 707px;
height: 461px;
.sparkBg("GuidePage/guide5.png");
}
.guide6 {
position: absolute;
left: 107px;
top: 568px;
width: 534px;
height: 374px;
.sparkBg("GuidePage/文案.png");
.guide6Btn {
position: absolute;
left: 93px;
top: 218px;
width: 349px;
height: 90px;
.sparkBg("GuidePage/按钮.png");
}
}
}
.fadeIn {
opacity: 0;
animation-name: fadeInAni;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-delay: 0.88s;
}
@keyframes fadeInAni {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
import React from 'react';
import { observer } from 'mobx-react';
import './GuidePage.less';
import { SvgaPlayer } from "@grace/svgaplayer";
import kuang from "../../assets/GuidePage/4输出横幅效果.svga";
import { SvgaPlayerRef } from "@grace/svgaplayer/dist/components/SvgaPlayer";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import GamePage from "@/pages/GamePage/GamePage.tsx";
import { Button } from "@grace/ui";
import API from "@/api";
@observer
class GuidePage extends React.Component<any, any> {
state = {
guide: 1,
canNext: false,
}
kuangSvga: SvgaPlayerRef;
componentDidMount() {
setTimeout(() => {
this.setState({ canNext: true });
}, 2000);
}
next = () => {
const { guide, canNext } = this.state;
if (guide >= 6) return;
if (!canNext) return;
this.setState({ guide: guide + 1, canNext: false });
setTimeout(() => {
this.setState({ canNext: true });
}, 1666);
this.kuangSvga.start();
}
onEnd = () => {
// this.setState({ canNext: true });
}
startGame = () => {
API.guide();
PageCtrl.changePage(GamePage);
}
render() {
const { guide, canNext } = this.state;
return <div className="GuidePage" onClick={this.next}>
<div className="bg"/>
{guide < 6 && <SvgaPlayer
ref={(el) => (this.kuangSvga = el)}
onEnd={this.onEnd}
src={kuang}
className={`kuang kuang${guide}`}
loop={1}
/>}
{guide == 1 && <div className="guide guide1"/>}
{guide == 2 && <div className="guide guide2"/>}
{guide == 3 && <div className="guide guide3"/>}
{guide == 4 && <div className="guide guide4"/>}
{guide == 5 && <div className="guide guide5"/>}
{guide >= 6 && <div className="guide6">
<Button className="guide6Btn" onClick={this.startGame}/>
</div>}
<div className="joystick"/>
{guide < 6 && canNext && <div className="tip">点击屏幕继续</div>}
</div>;
}
}
export default GuidePage;
......@@ -39,10 +39,8 @@ class HomePage extends React.Component<any, any> {
// Toast.show("暂无游戏次数哦")
// return;
// }
// const suc = await gameStore.start();
// if (!suc) return;
PageCtrl.changePage(GamePage);
const suc = await gameStore.start();
if (!suc) return;
})
/** 奖品按钮*/
......
......@@ -2,13 +2,15 @@ import {makeAutoObservable,} from 'mobx';
import API from "@/api";
import store from "@/store/store.ts";
import {Toast} from "@grace/ui";
import {AESEncrypt} from "@/utils/Crypto.ts";
import { AESDecrypt, AESEncrypt } from "@/utils/Crypto.ts";
import { PageCtrl } from "@/core/ctrls/PageCtrl.tsx";
import HomePage from "@/pages/HomePage/HomePage.tsx";
import { GameConfig } from "@/pages/GamePage/config/Config.ts";
import FailPanel from "@/panels/FailPanel/FailPanel.tsx";
import SucPanel from "@/panels/SucPanel/SucPanel.tsx";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl.tsx";
import GamePage from "@/pages/GamePage/GamePage.tsx";
import GuidePage from "@/pages/GuidePage/GuidePage.tsx";
class GameStore {
......@@ -36,7 +38,20 @@ class GameStore {
return false;
}
this.startInfo = data;
try {
const decrypt = JSON.parse(AESDecrypt(data, "3C8C48E792E9241B", "cDOiBC1n2QrkAY2P"));
this.startInfo = decrypt;
if (decrypt.guide) {
PageCtrl.changePage(GuidePage);
} else {
PageCtrl.changePage(GamePage);
}
} catch (e) {
return false;
}
return success;
}
......
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