Commit 687887b5 authored by haiyoucuv's avatar haiyoucuv

init

parent 0e8cd9a1
......@@ -17,8 +17,8 @@
font-family: "zzgfyht";
color: #68152b;
position: absolute;
left: 76px;
top: 38px;
left: 86px;
top: 14px;
span {
font-size: 54px;
......
import { AnimatedSprite, Assets, Container, PointData, Sprite, Ticker } from "pixi.js";
import 'pixi.js/math-extras';
import { prefixInteger } from "@/utils/utils.ts";
import { Base } from "@/pages/HomePage/Top/base/Base.ts";
import { observer, reactor } from "@/pages/HomePage/Top/mobx/decorators.ts";
import store from "@/store/store.ts";
import { GifSprite } from "pixi.js/gif";
export class Game extends Container {
constructor() {
super();
this.initUI();
}
@observer
export class Game extends Base {
fullAni: AnimatedSprite;
dropAni: AnimatedSprite;
dropAni: GifSprite;
initUI() {
onLoad() {
const bg = this.addChild(new Sprite(Assets.get("招财猫_底.png")));
bg.position.set(168, 332);
......@@ -27,17 +27,11 @@ export class Game extends Container {
fullAni.loop = false;
fullAni.play();
const dropTextures = new Array(300).fill(0).map((_, i) => {
return Assets.get(`撒金币/撒金币_${prefixInteger(i, 5)}.png`);
});
const dropAni = this.dropAni = this.addChild(new AnimatedSprite(dropTextures));
dropAni.scale.set(0.66, 0.66);
const dropAni = this.dropAni = this.addChild(new GifSprite({ source: Assets.get("撒金币.gif") }));
dropAni.anchor.set(0.5);
dropAni.position.set(375, 339);
dropAni.loop = true;
dropAni.play();
// this.dropAni.visible = false;
const top = this.addChild(new Sprite(Assets.get("招财猫_叠.png")));
top.position.set(168, 332);
......@@ -54,10 +48,19 @@ export class Game extends Container {
playTo(progress: number) {
progress = Math.min(Math.max(progress, 0), 1);
}
@reactor(() => store.indexData.currentStoreNum)
onStoreNumChange(currentStoreNum: number) {
console.log("currentStoreNum", currentStoreNum)
}
@reactor(() => store.indexData.storeLimitNum)
onStoreLimitChange(storeLimitNum: number) {
console.log("storeLimitNum", storeLimitNum)
}
onPointerDown(e: any) {
console.log(e)
}
......@@ -70,7 +73,6 @@ export class Game extends Container {
const dt = time.deltaMS / 1000;
}
destroy() {
super.destroy();
onDestroy() {
}
}
......@@ -31,10 +31,14 @@ export async function initBundle(): Promise<void> {
console.time("initBundle");
await Assets.init({
// defaultSearchParams: {
// "x-oss-process": "image/format,webp"
// },
manifest: manifest,
skipDetections: true,
preferences: {
preferWorkers: false,
// preferWorkers: false,
// preferCreateImageBitmap: true,
}
});
Assets.backgroundLoadBundle(["Game"]);
......
......@@ -29,6 +29,13 @@ class Top extends React.Component<any, any> {
await this.initStage();
}
componentWillUnmount() {
Tween.removeAllTweens();
this.app.ticker.remove(this.onUpdate);
this.game.removeFromParent();
this.game.destroy();
}
async initStage() {
// if (!gameCanvas) {
......@@ -79,11 +86,11 @@ class Top extends React.Component<any, any> {
};
render() {
const {} = store.indexData
const {currentStoreNum, storeLimitNum} = store.indexData;
return <div className={styles.top} ref={(el) => this.gameDiv = el}>
<canvas className={styles.gameCanvas} ref={(el) => this.gameCanvas = el}/>
<SvgaPlayer className={styles.handSvga} src={handSvga}/>
<div className={styles.credits}>积分:<span>200</span>/300</div>
<div className={styles.credits}>积分:<span>{currentStoreNum}</span>/{storeLimitNum}</div>
</div>;
}
}
......
import { Container, Ticker } from "pixi.js";
export class Base extends Container {
constructor() {
super();
this.onLoad();
}
protected onLoad() {
}
protected onDestroy() {
}
protected onUpdate(time: Ticker) {
}
destroy() {
this.onDestroy();
super.destroy();
}
}
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,
});
}
......@@ -31,7 +31,6 @@ class LoadingDemo extends React.Component {
const files = import.meta.glob([
"../../assets/common/**/*",
"../../assets/HomePage/**/*",
"../../assets/Game/**/*",
], {
import: "default",
eager: true,
......
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