R524809
98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
import MatchConnectDraw from '../shared/service/matchConnectDraw';
|
|
import { createFocusPage } from '../shared/common/focusPageMixin';
|
|
import { MatchConnectData } from '../shared/service/matchConnectDraw';
|
|
|
|
createFocusPage({
|
|
canvas: null as Canvas | null,
|
|
ctx: null as RenderingContext | null,
|
|
boxHeight: 0,
|
|
boxWidth: 0,
|
|
drawService: null as MatchConnectDraw | null,
|
|
matchData: null as MatchConnectData | null,
|
|
|
|
data: {
|
|
pageTitle: '连连看',
|
|
functionId: '',
|
|
hasContent: false,
|
|
showShareDialog: false,
|
|
},
|
|
|
|
onLoad(options: { id?: string }) {
|
|
const functionId = options.id || 'match-connect';
|
|
this.setData({
|
|
functionId,
|
|
});
|
|
this.initPageInfo(functionId, '连连看');
|
|
},
|
|
|
|
onReady() {
|
|
this.initCanvas({
|
|
createDrawService: (
|
|
canvas: Canvas,
|
|
ctx: RenderingContext,
|
|
options?: Record<string, any>,
|
|
) => {
|
|
return new MatchConnectDraw(canvas, ctx, options);
|
|
},
|
|
drawServiceOptions: {
|
|
title: this.data.pageTitle,
|
|
subTitle: '快来根据物品连一连吧!',
|
|
functionId: this.data.functionId,
|
|
},
|
|
onCanvasReady: () => {
|
|
// 初始随机生成
|
|
this.onRandom();
|
|
},
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 绘制Canvas内容
|
|
*/
|
|
async drawCanvas() {
|
|
if (!this.ctx || !this.drawService || !this.matchData) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await this.drawService.draw(this.matchData);
|
|
this.setData({ hasContent: true });
|
|
} catch (error) {
|
|
console.error('绘制失败:', error);
|
|
this.setData({ hasContent: false });
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 随机生成
|
|
*/
|
|
onRandom() {
|
|
// 从33张图片中随机选择5张不重复的图片
|
|
const allImageIndices = Array.from({ length: 33 }, (_, i) => i + 1);
|
|
const shuffled = [...allImageIndices].sort(() => Math.random() - 0.5);
|
|
const selectedImages = shuffled.slice(0, 5);
|
|
|
|
// 创建参考序列（顺序）
|
|
const referenceSequence = [...selectedImages];
|
|
|
|
// 创建6个框，每个框包含5张图片的索引（位置由绘制服务随机生成）
|
|
const boxes: Array<{
|
|
imageIndices: number[];
|
|
}> = [];
|
|
|
|
for (let boxIndex = 0; boxIndex < 6; boxIndex++) {
|
|
// 每个框使用相同的5张图片
|
|
boxes.push({
|
|
imageIndices: [...selectedImages],
|
|
});
|
|
}
|
|
|
|
this.matchData = {
|
|
referenceSequence,
|
|
boxes,
|
|
};
|
|
|
|
this.drawCanvas();
|
|
},
|
|
});
|