add 支持选关
This commit is contained in:
yupili
parent
c3da9ecf1b
commit
d03ef31503
@ -1,6 +1,12 @@
|
|||||||
# 被羊了个羊虐了后，我自己做了一个！
|
# 鱼了个鱼
|
||||||
|
|
||||||
|
> 被羊了个羊虐了百遍后，我自己做了一个！
|
||||||
|
|
||||||
在线体验：https://yulegeyu.cn
|
在线体验：https://yulegeyu.cn
|
||||||
|
|
||||||
|
玩法：
|
||||||
|
|
||||||
|
1. 支持选关
|
||||||
|
2. 支持自定义难度（待更新）
|
||||||
|
3. 无限道具（待更新）
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,14 @@
|
|||||||
import { RouteRecordRaw } from "vue-router";
|
import { RouteRecordRaw } from "vue-router";
|
||||||
import IndexPage from "../pages/IndexPage.vue";
|
import IndexPage from "../pages/IndexPage.vue";
|
||||||
|
import GamePage from "../pages/GamePage.vue";
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
component: IndexPage,
|
component: IndexPage,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/game",
|
||||||
|
component: GamePage,
|
||||||
|
},
|
||||||
] as RouteRecordRaw[];
|
] as RouteRecordRaw[];
|
||||||
|
|||||||
131
src/core/gameConfig.ts
Normal file
131
src/core/gameConfig.ts
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
// 动物数组
|
||||||
|
const animals = [
|
||||||
|
"🐔",
|
||||||
|
"🐟",
|
||||||
|
"🦆",
|
||||||
|
"🐶",
|
||||||
|
"🐱",
|
||||||
|
"🐴",
|
||||||
|
"🐑",
|
||||||
|
"🐦",
|
||||||
|
"🐧",
|
||||||
|
"🐊",
|
||||||
|
"🐺",
|
||||||
|
"🐒",
|
||||||
|
"🐳",
|
||||||
|
"🐬",
|
||||||
|
"🐢",
|
||||||
|
"🦖",
|
||||||
|
"🦒",
|
||||||
|
"🦁",
|
||||||
|
"🐍",
|
||||||
|
"🐭",
|
||||||
|
"🐂",
|
||||||
|
];
|
||||||
|
|
||||||
|
export const defaultGameConfig: GameConfig = {
|
||||||
|
// 槽容量
|
||||||
|
slotNum: 7,
|
||||||
|
// 需要多少个一样块的才能合成
|
||||||
|
composeNum: 3,
|
||||||
|
// 动物类别数
|
||||||
|
typeNum: 12,
|
||||||
|
// 每层块数（大致）
|
||||||
|
levelBlockNum: 24,
|
||||||
|
// 边界收缩步长
|
||||||
|
borderStep: 1,
|
||||||
|
// 总层数（最小为 2）
|
||||||
|
levelNum: 6,
|
||||||
|
// 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
|
||||||
|
randomBlocks: [8, 8],
|
||||||
|
// 动物数组
|
||||||
|
animals,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 简单难度
|
||||||
|
*/
|
||||||
|
export const easyGameConfig: GameConfig = {
|
||||||
|
// 槽容量
|
||||||
|
slotNum: 7,
|
||||||
|
// 需要多少个一样块的才能合成
|
||||||
|
composeNum: 3,
|
||||||
|
// 动物类别数
|
||||||
|
typeNum: 8,
|
||||||
|
// 每层块数（大致）
|
||||||
|
levelBlockNum: 10,
|
||||||
|
// 边界收缩步长
|
||||||
|
borderStep: 1,
|
||||||
|
// 总层数（最小为 2）
|
||||||
|
levelNum: 6,
|
||||||
|
// 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
|
||||||
|
randomBlocks: [4, 4],
|
||||||
|
// 动物数组
|
||||||
|
animals,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中等难度
|
||||||
|
*/
|
||||||
|
export const middleGameConfig: GameConfig = {
|
||||||
|
// 槽容量
|
||||||
|
slotNum: 7,
|
||||||
|
// 需要多少个一样块的才能合成
|
||||||
|
composeNum: 3,
|
||||||
|
// 动物类别数
|
||||||
|
typeNum: 10,
|
||||||
|
// 每层块数（大致）
|
||||||
|
levelBlockNum: 12,
|
||||||
|
// 边界收缩步长
|
||||||
|
borderStep: 1,
|
||||||
|
// 总层数（最小为 2）
|
||||||
|
levelNum: 7,
|
||||||
|
// 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
|
||||||
|
randomBlocks: [5, 5],
|
||||||
|
// 动物数组
|
||||||
|
animals,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 困难难度
|
||||||
|
*/
|
||||||
|
export const hardGameConfig: GameConfig = {
|
||||||
|
// 槽容量
|
||||||
|
slotNum: 7,
|
||||||
|
// 需要多少个一样块的才能合成
|
||||||
|
composeNum: 3,
|
||||||
|
// 动物类别数
|
||||||
|
typeNum: 12,
|
||||||
|
// 每层块数（大致）
|
||||||
|
levelBlockNum: 16,
|
||||||
|
// 边界收缩步长
|
||||||
|
borderStep: 1,
|
||||||
|
// 总层数（最小为 2）
|
||||||
|
levelNum: 8,
|
||||||
|
// 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
|
||||||
|
randomBlocks: [6, 6],
|
||||||
|
// 动物数组
|
||||||
|
animals,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 地狱难度
|
||||||
|
*/
|
||||||
|
export const lunaticGameConfig: GameConfig = {
|
||||||
|
// 槽容量
|
||||||
|
slotNum: 7,
|
||||||
|
// 需要多少个一样块的才能合成
|
||||||
|
composeNum: 3,
|
||||||
|
// 动物类别数
|
||||||
|
typeNum: 14,
|
||||||
|
// 每层块数（大致）
|
||||||
|
levelBlockNum: 20,
|
||||||
|
// 边界收缩步长
|
||||||
|
borderStep: 2,
|
||||||
|
// 总层数（最小为 2）
|
||||||
|
levelNum: 10,
|
||||||
|
// 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
|
||||||
|
randomBlocks: [8, 8],
|
||||||
|
// 动物数组
|
||||||
|
animals,
|
||||||
|
};
|
||||||
@ -1,395 +0,0 @@
|
|||||||
/**
|
|
||||||
* 游戏逻辑 V1（划分层级生成，可能出现同层级互相覆盖的情况，故废弃）
|
|
||||||
*
|
|
||||||
* @author yupi https://github.com/liyupi
|
|
||||||
*/
|
|
||||||
import { useGlobalStore } from "./globalStore";
|
|
||||||
// @ts-ignore
|
|
||||||
import _ from "lodash";
|
|
||||||
import { nextTick, ref } from "vue";
|
|
||||||
|
|
||||||
const useGameV1 = () => {
|
|
||||||
const { gameConfig } = useGlobalStore();
|
|
||||||
|
|
||||||
// 游戏状态：0 - 初始化, 1 - 进行中, 2 - 结束
|
|
||||||
const gameStatus = ref(0);
|
|
||||||
|
|
||||||
// 各层块
|
|
||||||
const levelBlocksVal = ref<BlockType[][]>([]);
|
|
||||||
// 随机区块
|
|
||||||
const randomBlocksVal = ref<BlockType[][]>([]);
|
|
||||||
// 插槽区
|
|
||||||
const slotAreaVal = ref<BlockType[]>([]);
|
|
||||||
// 当前槽占用数
|
|
||||||
const currSlotNum = ref(0);
|
|
||||||
|
|
||||||
// 保存所有块（包括随机块）
|
|
||||||
const blockData: Record<number, BlockType> = {};
|
|
||||||
|
|
||||||
// 总共划分 24 x 24 的格子，每个块占 3 x 3 的格子，生成的起始 x 和 y 坐标范围均为 0 ~ 21
|
|
||||||
const boxWidthNum = 24;
|
|
||||||
const boxHeightNum = 24;
|
|
||||||
|
|
||||||
// 保存整个 "棋盘" 的每个格子状态（下标为格子起始点横纵坐标）
|
|
||||||
let chessBoard: ChessBoardUnitType[][] = [];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 初始化指定大小的棋盘
|
|
||||||
* @param width
|
|
||||||
* @param height
|
|
||||||
*/
|
|
||||||
const initChessBoard = (width: number, height: number) => {
|
|
||||||
chessBoard = new Array(width);
|
|
||||||
for (let i = 0; i < width; i++) {
|
|
||||||
chessBoard[i] = new Array(height);
|
|
||||||
for (let j = 0; j < height; j++) {
|
|
||||||
chessBoard[i][j] = {
|
|
||||||
blocks: [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 初始化棋盘
|
|
||||||
initChessBoard(boxWidthNum, boxHeightNum);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 游戏初始化
|
|
||||||
*/
|
|
||||||
const initGame = () => {
|
|
||||||
console.log("initGame", gameConfig);
|
|
||||||
|
|
||||||
// 1. 规划块数
|
|
||||||
// 块数单位（总块数必须是该值的倍数）
|
|
||||||
const blockNumUnit = gameConfig.composeNum * gameConfig.typeNum;
|
|
||||||
console.log("块数单位", blockNumUnit);
|
|
||||||
|
|
||||||
// 随机生成的总块数
|
|
||||||
const totalRandomBlockNum = gameConfig.randomBlocks.reduce((pre, curr) => {
|
|
||||||
return pre + curr;
|
|
||||||
}, 0);
|
|
||||||
console.log("随机生成的总块数", totalRandomBlockNum);
|
|
||||||
|
|
||||||
// 需要的最小块数
|
|
||||||
const minBlockNum = Math.ceil(
|
|
||||||
(gameConfig.levelNum *
|
|
||||||
(gameConfig.topBlockNum + gameConfig.minBottomBlockNum)) /
|
|
||||||
2 +
|
|
||||||
totalRandomBlockNum
|
|
||||||
);
|
|
||||||
console.log("需要的最小块数", minBlockNum);
|
|
||||||
|
|
||||||
// 补齐到 blockNumUnit 的倍数
|
|
||||||
// e.g. minBlockNum = 14, blockNumUnit = 6, 补到 18
|
|
||||||
let totalBlockNum = minBlockNum;
|
|
||||||
if (totalBlockNum % blockNumUnit !== 0) {
|
|
||||||
totalBlockNum =
|
|
||||||
(Math.floor(minBlockNum / blockNumUnit) + 1) * blockNumUnit;
|
|
||||||
}
|
|
||||||
console.log("总块数", totalBlockNum);
|
|
||||||
|
|
||||||
// 2. 随机生成块
|
|
||||||
// 保存所有块的数组
|
|
||||||
const animalBlocks: string[] = [];
|
|
||||||
// 需要用到的动物数组
|
|
||||||
const needAnimals = gameConfig.animals.slice(0, gameConfig.typeNum);
|
|
||||||
// 依次把块塞到数组里
|
|
||||||
for (let i = 0; i < totalBlockNum; i++) {
|
|
||||||
animalBlocks.push(needAnimals[i % gameConfig.typeNum]);
|
|
||||||
}
|
|
||||||
// 打乱数组
|
|
||||||
const randomAnimalBlocks = _.shuffle(animalBlocks);
|
|
||||||
// 下一个要塞入的块
|
|
||||||
let pos = 0;
|
|
||||||
|
|
||||||
// 3. 填充结果
|
|
||||||
// 计算随机生成的块
|
|
||||||
const randomBlocks: BlockType[][] = [];
|
|
||||||
gameConfig.randomBlocks.forEach((randomBlock, idx) => {
|
|
||||||
randomBlocks[idx] = [];
|
|
||||||
for (let i = 0; i < randomBlock; i++) {
|
|
||||||
const newBlock = {
|
|
||||||
id: pos,
|
|
||||||
level: i,
|
|
||||||
status: 0,
|
|
||||||
type: randomAnimalBlocks[pos],
|
|
||||||
higherThanBlocks: [] as BlockType[],
|
|
||||||
lowerThanBlocks: [] as BlockType[],
|
|
||||||
} as BlockType;
|
|
||||||
randomBlocks[idx].push(newBlock);
|
|
||||||
blockData[pos] = newBlock;
|
|
||||||
pos++;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 剩余块数
|
|
||||||
let leftBlockNum = totalBlockNum - totalRandomBlockNum;
|
|
||||||
|
|
||||||
// 计算每层生成的块数
|
|
||||||
// 每层递减块数
|
|
||||||
// e.g. 最上层 38 块，最下层不小于 20 块，共 10 层，则每层递减块数为 18 / 9 = 2
|
|
||||||
const stepNum = Math.floor(
|
|
||||||
(gameConfig.topBlockNum - gameConfig.minBottomBlockNum) /
|
|
||||||
(gameConfig.levelNum - 1)
|
|
||||||
);
|
|
||||||
console.log("每层递减块数", stepNum);
|
|
||||||
|
|
||||||
// 下一层要分配的块数
|
|
||||||
let nextBlockNum = gameConfig.topBlockNum;
|
|
||||||
// 各层的块
|
|
||||||
const levelBlocks: BlockType[][] = [];
|
|
||||||
for (let i = 0; i < gameConfig.levelNum; i++) {
|
|
||||||
// 最后一层，所有的块都分配出去
|
|
||||||
if (i == gameConfig.levelNum - 1) {
|
|
||||||
nextBlockNum = leftBlockNum;
|
|
||||||
}
|
|
||||||
levelBlocks[i] = [];
|
|
||||||
// 添加新块
|
|
||||||
for (let j = 0; j < nextBlockNum; j++) {
|
|
||||||
if (pos >= totalBlockNum) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
const newBlock = {
|
|
||||||
id: pos,
|
|
||||||
level: i,
|
|
||||||
status: 0,
|
|
||||||
type: randomAnimalBlocks[pos],
|
|
||||||
higherThanBlocks: [] as BlockType[],
|
|
||||||
lowerThanBlocks: [] as BlockType[],
|
|
||||||
} as BlockType;
|
|
||||||
levelBlocks[i].push(newBlock);
|
|
||||||
blockData[pos] = newBlock;
|
|
||||||
pos++;
|
|
||||||
}
|
|
||||||
leftBlockNum -= nextBlockNum;
|
|
||||||
nextBlockNum -= stepNum;
|
|
||||||
}
|
|
||||||
console.log("剩余块数", leftBlockNum);
|
|
||||||
|
|
||||||
// 4. 初始化空插槽
|
|
||||||
const slotArea: BlockType[] = new Array(gameConfig.slotNum).fill(null);
|
|
||||||
|
|
||||||
console.log(
|
|
||||||
"各层数量",
|
|
||||||
levelBlocks
|
|
||||||
.map((levelBlock, idx) => `第${idx}层：${levelBlock.length} 块`)
|
|
||||||
.join("\n")
|
|
||||||
);
|
|
||||||
console.log("随机块情况", randomBlocks);
|
|
||||||
|
|
||||||
return {
|
|
||||||
levelBlocks,
|
|
||||||
randomBlocks,
|
|
||||||
slotArea,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 随机生成块坐标
|
|
||||||
*/
|
|
||||||
const randomPos = () => {
|
|
||||||
const levelBoardDom: any = document.getElementsByClassName("level-board");
|
|
||||||
// 为方便给格子设置固定宽高，不动态计算了
|
|
||||||
// const totalWidth = levelBoardDom[0].clientWidth;
|
|
||||||
const blockDomList = document.getElementsByClassName("level-block");
|
|
||||||
// 每个格子的宽高
|
|
||||||
const widthUnit = 14;
|
|
||||||
const heightUnit = 14;
|
|
||||||
// 设置父容器宽高
|
|
||||||
levelBoardDom[0].style.width = widthUnit * boxWidthNum + "px";
|
|
||||||
levelBoardDom[0].style.height = heightUnit * boxHeightNum + "px";
|
|
||||||
// 遍历时层级递增
|
|
||||||
for (let i = 0; i < blockDomList.length; i++) {
|
|
||||||
let blockDom: any = blockDomList[i];
|
|
||||||
const blockId = blockDom.dataset.id;
|
|
||||||
const block = blockData[blockId];
|
|
||||||
blockDom.style.position = "absolute";
|
|
||||||
// 随机生成坐标，当前层级不能重复
|
|
||||||
let newPosX;
|
|
||||||
let newPosY;
|
|
||||||
while (true) {
|
|
||||||
newPosX = Math.floor(Math.random() * (boxWidthNum - 2));
|
|
||||||
newPosY = Math.floor(Math.random() * (boxHeightNum - 2));
|
|
||||||
const currChessBoardUnit = chessBoard[newPosX][newPosY];
|
|
||||||
// 同层级元素不能完全重叠
|
|
||||||
if (
|
|
||||||
currChessBoardUnit.blocks.length < 1 ||
|
|
||||||
currChessBoardUnit.blocks[currChessBoardUnit.blocks.length - 1]
|
|
||||||
.level != block.level
|
|
||||||
) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
chessBoard[newPosX][newPosY].blocks.push(block);
|
|
||||||
block.x = newPosX;
|
|
||||||
block.y = newPosY;
|
|
||||||
blockDom.style.left = newPosX * widthUnit + "px";
|
|
||||||
blockDom.style.top = newPosY * heightUnit + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 可能导致死循环，暂不使用
|
|
||||||
// /**
|
|
||||||
// * 判断某个坐标是否和其他块有重叠
|
|
||||||
// * @param x
|
|
||||||
// * @param y
|
|
||||||
// * @param block
|
|
||||||
// */
|
|
||||||
// const hasOverlap = (x: number, y: number, block: BlockType) => {
|
|
||||||
// // 确定该块附近的格子坐标范围
|
|
||||||
// const minX = Math.max(x - 2, 0);
|
|
||||||
// const minY = Math.max(y - 2, 0);
|
|
||||||
// const maxX = Math.min(x + 3, boxWidthNum - 2);
|
|
||||||
// const maxY = Math.min(y + 3, boxWidthNum - 2);
|
|
||||||
// // 遍历该块附近的格子
|
|
||||||
// for (let i = minX; i < maxX; i++) {
|
|
||||||
// for (let j = minY; j < maxY; j++) {
|
|
||||||
// const relationBlocks = chessBoard[i][j].blocks;
|
|
||||||
// for (const relationBlock of relationBlocks) {
|
|
||||||
// if (relationBlocks[relationBlocks.length - 1].level != block.level) {
|
|
||||||
// return false;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// return true;
|
|
||||||
// };
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 绑定层级覆盖关系（用于确认哪些元素是当前可点击的）
|
|
||||||
*
|
|
||||||
* 核心逻辑：每个块压住和其坐标有交集棋盘格内所有 level 大于它的点，双向建立联系
|
|
||||||
*/
|
|
||||||
const bindLevelRelation = () => {
|
|
||||||
levelBlocksVal.value.forEach((levelBlock) => {
|
|
||||||
levelBlock.forEach((block) => {
|
|
||||||
const x = block.x;
|
|
||||||
const y = block.y;
|
|
||||||
// 确定该块附近的格子坐标范围
|
|
||||||
const minX = Math.max(x - 2, 0);
|
|
||||||
const minY = Math.max(y - 2, 0);
|
|
||||||
const maxX = Math.min(x + 3, boxWidthNum - 2);
|
|
||||||
const maxY = Math.min(y + 3, boxWidthNum - 2);
|
|
||||||
// 遍历该块附近的格子
|
|
||||||
for (let i = minX; i < maxX; i++) {
|
|
||||||
for (let j = minY; j < maxY; j++) {
|
|
||||||
const relationBlocks = chessBoard[i][j].blocks;
|
|
||||||
relationBlocks.forEach((relationBlock) => {
|
|
||||||
// 建立覆盖关系
|
|
||||||
if (relationBlock.level > block.level) {
|
|
||||||
block.higherThanBlocks.push(relationBlock);
|
|
||||||
relationBlock.lowerThanBlocks.push(block);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 点击块事件
|
|
||||||
* @param block
|
|
||||||
* @param e
|
|
||||||
* @param randomIdx 随机区域下标，>= 0 表示点击的是随机块
|
|
||||||
*/
|
|
||||||
const doClickBlock = (block: BlockType, e: Event, randomIdx = -1) => {
|
|
||||||
// 已经输了 / 已经被点击 / 有上层块，不能再点击
|
|
||||||
if (
|
|
||||||
currSlotNum.value >= gameConfig.slotNum ||
|
|
||||||
block.status !== 0 ||
|
|
||||||
block.lowerThanBlocks.length > 0
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 修改元素状态为已点击
|
|
||||||
block.status = 1;
|
|
||||||
// 移除当前元素
|
|
||||||
if (randomIdx >= 0) {
|
|
||||||
// 移除所点击的随机区域的第一个元素
|
|
||||||
randomBlocksVal.value[randomIdx] = randomBlocksVal.value[randomIdx].slice(
|
|
||||||
1,
|
|
||||||
randomBlocksVal.value[randomIdx].length
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// 删除节点
|
|
||||||
// @ts-ignore
|
|
||||||
e.target.remove();
|
|
||||||
// 移除覆盖关系
|
|
||||||
block.higherThanBlocks.forEach((higherThanBlock) => {
|
|
||||||
_.remove(higherThanBlock.lowerThanBlocks, (lowerThanBlock) => {
|
|
||||||
return lowerThanBlock.id === block.id;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 新元素加入插槽
|
|
||||||
let tempSlotNum = currSlotNum.value;
|
|
||||||
slotAreaVal.value[tempSlotNum] = block;
|
|
||||||
// 检查是否有可消除的
|
|
||||||
// block => 出现次数
|
|
||||||
const map: Record<string, number> = {};
|
|
||||||
// 去除空槽
|
|
||||||
const tempSlotAreaVal = slotAreaVal.value.filter(
|
|
||||||
(slotBlock) => !!slotBlock
|
|
||||||
);
|
|
||||||
tempSlotAreaVal.forEach((slotBlock) => {
|
|
||||||
const type = slotBlock.type;
|
|
||||||
if (!map[type]) {
|
|
||||||
map[type] = 1;
|
|
||||||
} else {
|
|
||||||
map[type]++;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
console.log("tempSlotAreaVal", tempSlotAreaVal);
|
|
||||||
console.log("map", map);
|
|
||||||
// 得到新数组
|
|
||||||
const newSlotAreaVal = new Array(gameConfig.slotNum).fill(null);
|
|
||||||
tempSlotNum = 0;
|
|
||||||
tempSlotAreaVal.forEach((slotBlock) => {
|
|
||||||
// 成功消除（不添加到新数组中）
|
|
||||||
if (map[slotBlock.type] >= gameConfig.composeNum) {
|
|
||||||
// 块状态改为已消除
|
|
||||||
slotBlock.status = 2;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
newSlotAreaVal[tempSlotNum++] = slotBlock;
|
|
||||||
});
|
|
||||||
slotAreaVal.value = newSlotAreaVal;
|
|
||||||
currSlotNum.value = tempSlotNum;
|
|
||||||
// 游戏结束
|
|
||||||
if (tempSlotNum >= gameConfig.slotNum) {
|
|
||||||
gameStatus.value = 2;
|
|
||||||
setTimeout(() => {
|
|
||||||
alert("你输了");
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 开始游戏
|
|
||||||
*/
|
|
||||||
const doStart = () => {
|
|
||||||
gameStatus.value = 0;
|
|
||||||
const { levelBlocks, randomBlocks, slotArea } = initGame();
|
|
||||||
console.log(levelBlocks, randomBlocks, slotArea);
|
|
||||||
levelBlocksVal.value = levelBlocks;
|
|
||||||
randomBlocksVal.value = randomBlocks;
|
|
||||||
slotAreaVal.value = slotArea;
|
|
||||||
// 等 dom 更新后才刷新坐标
|
|
||||||
nextTick(() => {
|
|
||||||
randomPos();
|
|
||||||
bindLevelRelation();
|
|
||||||
gameStatus.value = 1;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
gameStatus,
|
|
||||||
levelBlocksVal,
|
|
||||||
randomBlocksVal,
|
|
||||||
slotAreaVal,
|
|
||||||
doClickBlock,
|
|
||||||
doStart,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useGameV1;
|
|
||||||
@ -1,49 +1,5 @@
|
|||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
|
import { defaultGameConfig } from "./gameConfig";
|
||||||
const defaultGameConfig = {
|
|
||||||
// 槽容量
|
|
||||||
slotNum: 7,
|
|
||||||
// 需要多少个一样块的才能合成
|
|
||||||
composeNum: 3,
|
|
||||||
// 动物类别数
|
|
||||||
typeNum: 12,
|
|
||||||
// 每层块数（大致）
|
|
||||||
levelBlockNum: 30,
|
|
||||||
// 边界收缩步长
|
|
||||||
borderStep: 1,
|
|
||||||
// 总层数（最小为 2）
|
|
||||||
levelNum: 8,
|
|
||||||
// 最上层块数
|
|
||||||
topBlockNum: 40,
|
|
||||||
// 最下层块数最小值
|
|
||||||
minBottomBlockNum: 20,
|
|
||||||
// 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
|
|
||||||
randomBlocks: [8, 8],
|
|
||||||
// 动物数组
|
|
||||||
animals: [
|
|
||||||
"🐔",
|
|
||||||
"🐟",
|
|
||||||
"🦆",
|
|
||||||
"🐶",
|
|
||||||
"🐱",
|
|
||||||
"🐴",
|
|
||||||
"🐑",
|
|
||||||
"🐦",
|
|
||||||
"🐧",
|
|
||||||
"🐊",
|
|
||||||
"🐺",
|
|
||||||
"🐒",
|
|
||||||
"🐳",
|
|
||||||
"🐬",
|
|
||||||
"🐢",
|
|
||||||
"🦖",
|
|
||||||
"🦒",
|
|
||||||
"🦁",
|
|
||||||
"🐍",
|
|
||||||
"🐭",
|
|
||||||
"🐂",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 全局状态存储
|
* 全局状态存储
|
||||||
@ -52,6 +8,7 @@ const defaultGameConfig = {
|
|||||||
*/
|
*/
|
||||||
export const useGlobalStore = defineStore("global", {
|
export const useGlobalStore = defineStore("global", {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
|
customConfig: { ...defaultGameConfig },
|
||||||
gameConfig: { ...defaultGameConfig },
|
gameConfig: { ...defaultGameConfig },
|
||||||
}),
|
}),
|
||||||
getters: {},
|
getters: {},
|
||||||
@ -67,6 +24,12 @@ export const useGlobalStore = defineStore("global", {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
setGameConfig(gameConfig: GameConfig) {
|
||||||
|
this.gameConfig = gameConfig;
|
||||||
|
},
|
||||||
|
setCustomConfig(customConfig: GameConfig) {
|
||||||
|
this.customConfig = customConfig;
|
||||||
|
},
|
||||||
reset() {
|
reset() {
|
||||||
this.$reset();
|
this.$reset();
|
||||||
},
|
},
|
||||||
|
|||||||
26
src/core/type.d.ts
vendored
26
src/core/type.d.ts
vendored
@ -22,3 +22,29 @@ interface ChessBoardUnitType {
|
|||||||
// 放到当前格子里的块（层级越高下标越大）
|
// 放到当前格子里的块（层级越高下标越大）
|
||||||
blocks: BlockType[];
|
blocks: BlockType[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 游戏配置
|
||||||
|
*/
|
||||||
|
interface GameConfig {
|
||||||
|
// 槽容量
|
||||||
|
slotNum: number;
|
||||||
|
// 需要多少个一样块的才能合成
|
||||||
|
composeNum: number;
|
||||||
|
// 动物类别数
|
||||||
|
typeNum: number;
|
||||||
|
// 每层块数（大致）
|
||||||
|
levelBlockNum: number;
|
||||||
|
// 边界收缩步长
|
||||||
|
borderStep: number;
|
||||||
|
// 总层数（最小为 2）
|
||||||
|
levelNum: number;
|
||||||
|
// 随机区块数（数组长度代表随机区数量，值表示每个随机区生产多少块）
|
||||||
|
randomBlocks: number[];
|
||||||
|
// 动物数组
|
||||||
|
animals: string[];
|
||||||
|
// 最上层块数（已废弃）
|
||||||
|
// topBlockNum: 40,
|
||||||
|
// 最下层块数最小值（已废弃）
|
||||||
|
// minBottomBlockNum: 20,
|
||||||
|
}
|
||||||
|
|||||||
127
src/pages/GamePage.vue
Normal file
127
src/pages/GamePage.vue
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
<template>
|
||||||
|
<div id="gamePage">
|
||||||
|
<a-button @click="doBack"> ⬅️ 返回</a-button>
|
||||||
|
<a-row align="center">
|
||||||
|
<!-- 分层选块 -->
|
||||||
|
<div class="level-board">
|
||||||
|
<div
|
||||||
|
v-for="(block, idx) in levelBlocksVal"
|
||||||
|
v-show="gameStatus > 0"
|
||||||
|
:key="idx"
|
||||||
|
class="block level-block"
|
||||||
|
:class="{ disabled: block.lowerThanBlocks.length > 0 }"
|
||||||
|
:data-id="block.id"
|
||||||
|
:style="{
|
||||||
|
zIndex: 100 + block.level,
|
||||||
|
left: block.x * widthUnit + 'px',
|
||||||
|
top: block.y * heightUnit + 'px',
|
||||||
|
}"
|
||||||
|
@click="(e) => doClickBlock(block, e)"
|
||||||
|
>
|
||||||
|
{{ block.type }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 随机选块 -->
|
||||||
|
<div class="random-board">
|
||||||
|
<div
|
||||||
|
v-for="(randomBlock, index) in randomBlocksVal"
|
||||||
|
:key="index"
|
||||||
|
class="random-area"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="randomBlock.length > 0"
|
||||||
|
class="block"
|
||||||
|
@click="(e) => doClickBlock(randomBlock[0], e, index)"
|
||||||
|
>
|
||||||
|
{{ randomBlock[0].type }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="num in Math.max(randomBlock.length - 1, 0)"
|
||||||
|
:key="num"
|
||||||
|
class="block disabled"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 槽位 -->
|
||||||
|
<div v-if="slotAreaVal.length > 0" class="slot-board">
|
||||||
|
<div
|
||||||
|
v-for="(slotBlock, index) in slotAreaVal"
|
||||||
|
:key="index"
|
||||||
|
class="block"
|
||||||
|
>
|
||||||
|
{{ slotBlock?.type }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import useGame from "../core/game";
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const {
|
||||||
|
gameStatus,
|
||||||
|
levelBlocksVal,
|
||||||
|
randomBlocksVal,
|
||||||
|
slotAreaVal,
|
||||||
|
widthUnit,
|
||||||
|
heightUnit,
|
||||||
|
doClickBlock,
|
||||||
|
doStart,
|
||||||
|
} = useGame();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 回上一页
|
||||||
|
*/
|
||||||
|
const doBack = () => {
|
||||||
|
router.back();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
doStart();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.level-board {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-block {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.random-board {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.random-area {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-board {
|
||||||
|
margin-top: 24px;
|
||||||
|
border: 10px solid saddlebrown;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
font-size: 28px;
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
background: white;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
background: grey;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,119 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="indexPage">
|
<div id="indexPage">
|
||||||
<a-row align="center">
|
<h1>🐟 鱼了个鱼</h1>
|
||||||
<a-button
|
<div style="margin-bottom: 16px">低配版羊了个羊小游戏，仅供消遣</div>
|
||||||
type="primary"
|
<a-button
|
||||||
block
|
block
|
||||||
style="margin-bottom: 16px"
|
style="margin-bottom: 16px"
|
||||||
@click="doStart"
|
@click="toGamePage(easyGameConfig)"
|
||||||
>
|
>
|
||||||
开始
|
简单模式
|
||||||
</a-button>
|
</a-button>
|
||||||
<!-- 分层选块 -->
|
<a-button
|
||||||
<div class="level-board">
|
block
|
||||||
<div
|
style="margin-bottom: 16px"
|
||||||
v-for="(block, idx) in levelBlocksVal"
|
@click="toGamePage(middleGameConfig)"
|
||||||
v-show="gameStatus > 0"
|
>
|
||||||
:key="idx"
|
中等模式
|
||||||
class="block level-block"
|
</a-button>
|
||||||
:class="{ disabled: block.lowerThanBlocks.length > 0 }"
|
<a-button
|
||||||
:data-id="block.id"
|
block
|
||||||
:style="{
|
style="margin-bottom: 16px"
|
||||||
zIndex: 100 + block.level,
|
@click="toGamePage(hardGameConfig)"
|
||||||
left: block.x * widthUnit + 'px',
|
>
|
||||||
top: block.y * heightUnit + 'px',
|
困难模式
|
||||||
}"
|
</a-button>
|
||||||
@click="(e) => doClickBlock(block, e)"
|
<a-button
|
||||||
>
|
block
|
||||||
{{ block.type }}
|
style="margin-bottom: 16px"
|
||||||
</div>
|
@click="toGamePage(lunaticGameConfig)"
|
||||||
</div>
|
>
|
||||||
<!-- 随机选块 -->
|
地域模式
|
||||||
<div class="random-board">
|
</a-button>
|
||||||
<div
|
<a-button block style="margin-bottom: 16px" disabled @click="toGamePage">
|
||||||
v-for="(randomBlock, index) in randomBlocksVal"
|
自定义（暂未开放）
|
||||||
:key="index"
|
</a-button>
|
||||||
class="random-area"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="randomBlock.length > 0"
|
|
||||||
class="block"
|
|
||||||
@click="(e) => doClickBlock(randomBlock[0], e, index)"
|
|
||||||
>
|
|
||||||
{{ randomBlock[0].type }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="num in Math.max(randomBlock.length - 1, 0)"
|
|
||||||
:key="num"
|
|
||||||
class="block disabled"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 槽位 -->
|
|
||||||
<div v-if="slotAreaVal.length > 0" class="slot-board">
|
|
||||||
<div
|
|
||||||
v-for="(slotBlock, index) in slotAreaVal"
|
|
||||||
:key="index"
|
|
||||||
class="block"
|
|
||||||
>
|
|
||||||
{{ slotBlock?.type }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import useGame from "../core/game";
|
import { useRouter } from "vue-router";
|
||||||
|
import {
|
||||||
|
easyGameConfig,
|
||||||
|
middleGameConfig,
|
||||||
|
hardGameConfig,
|
||||||
|
lunaticGameConfig,
|
||||||
|
} from "../core/gameConfig";
|
||||||
|
import { useGlobalStore } from "../core/globalStore";
|
||||||
|
|
||||||
const {
|
const router = useRouter();
|
||||||
gameStatus,
|
|
||||||
levelBlocksVal,
|
const { setGameConfig } = useGlobalStore();
|
||||||
randomBlocksVal,
|
|
||||||
slotAreaVal,
|
const toGamePage = (config?: GameConfig) => {
|
||||||
widthUnit,
|
if (config) {
|
||||||
heightUnit,
|
setGameConfig(config);
|
||||||
doClickBlock,
|
}
|
||||||
doStart,
|
router.push("/game");
|
||||||
} = useGame();
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.level-board {
|
#indexPage {
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.level-block {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.random-board {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.random-area {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slot-board {
|
|
||||||
margin-top: 24px;
|
|
||||||
border: 10px solid saddlebrown;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block {
|
|
||||||
font-size: 28px;
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
line-height: 42px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
background: white;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: top;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled {
|
|
||||||
background: grey;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,507 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="indexPage">
|
|
||||||
<a-row align="center">
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
block
|
|
||||||
style="margin-bottom: 16px"
|
|
||||||
@click="doStart"
|
|
||||||
>
|
|
||||||
开始
|
|
||||||
</a-button>
|
|
||||||
<!-- 分层选块 -->
|
|
||||||
<div class="level-board">
|
|
||||||
<div
|
|
||||||
v-for="(levelBlock, index) in levelBlocksVal"
|
|
||||||
:key="index"
|
|
||||||
class="level"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(block, idx) in levelBlock"
|
|
||||||
v-show="gameStatus > 0"
|
|
||||||
:key="idx"
|
|
||||||
class="block level-block"
|
|
||||||
:class="{ disabled: block.lowerThanBlocks.length > 0 }"
|
|
||||||
:data-id="block.id"
|
|
||||||
:style="{ zIndex: 10000 - index }"
|
|
||||||
@click="(e) => doClickBlock(block, e)"
|
|
||||||
>
|
|
||||||
{{ block.type }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 随机选块 -->
|
|
||||||
<div class="random-board">
|
|
||||||
<div
|
|
||||||
v-for="(randomBlock, index) in randomBlocksVal"
|
|
||||||
:key="index"
|
|
||||||
class="random-area"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="randomBlock.length > 0"
|
|
||||||
class="block"
|
|
||||||
@click="(e) => doClickBlock(randomBlock[0], e, index)"
|
|
||||||
>
|
|
||||||
{{ randomBlock[0].type }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="num in Math.max(randomBlock.length - 1, 0)"
|
|
||||||
:key="num"
|
|
||||||
class="block disabled"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 槽位 -->
|
|
||||||
<div v-if="slotAreaVal.length > 0" class="slot-board">
|
|
||||||
<div
|
|
||||||
v-for="(slotBlock, index) in slotAreaVal"
|
|
||||||
:key="index"
|
|
||||||
class="block"
|
|
||||||
>
|
|
||||||
{{ slotBlock?.type }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { useGlobalStore } from "../core/globalStore";
|
|
||||||
// @ts-ignore
|
|
||||||
import _ from "lodash";
|
|
||||||
import { nextTick, ref } from "vue";
|
|
||||||
|
|
||||||
const { gameConfig } = useGlobalStore();
|
|
||||||
|
|
||||||
// 游戏状态：0 - 初始化, 1 - 进行中, 2 - 结束
|
|
||||||
const gameStatus = ref(0);
|
|
||||||
|
|
||||||
// 各层块
|
|
||||||
const levelBlocksVal = ref<BlockType[][]>([]);
|
|
||||||
// 随机区块
|
|
||||||
const randomBlocksVal = ref<BlockType[][]>([]);
|
|
||||||
// 插槽区
|
|
||||||
const slotAreaVal = ref<BlockType[]>([]);
|
|
||||||
// 当前槽占用数
|
|
||||||
const currSlotNum = ref(0);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 块类型
|
|
||||||
*/
|
|
||||||
interface BlockType {
|
|
||||||
id: number;
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
level: number;
|
|
||||||
type: string;
|
|
||||||
// 0 - 正常, 1 - 已点击, 2 - 已消除
|
|
||||||
status: 0 | 1 | 2;
|
|
||||||
// 压住的其他块
|
|
||||||
higherThanBlocks: BlockType[];
|
|
||||||
// 被哪些块压住（为空表示可点击）
|
|
||||||
lowerThanBlocks: BlockType[];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 每个格子单元类型
|
|
||||||
*/
|
|
||||||
interface ChessBoardUnitType {
|
|
||||||
// 放到当前格子里的块（层级越高下标越小）
|
|
||||||
blocks: BlockType[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存所有块（包括随机块）
|
|
||||||
const blockData: Record<number, BlockType> = {};
|
|
||||||
|
|
||||||
// 总共划分 24 x 24 的格子，每个块占 3 x 3 的格子，生成的起始 x 和 y 坐标范围均为 0 ~ 21
|
|
||||||
const boxWidthNum = 24;
|
|
||||||
const boxHeightNum = 24;
|
|
||||||
|
|
||||||
// 保存整个 "棋盘" 的每个格子状态（下标为格子起始点横纵坐标）
|
|
||||||
let chessBoard: ChessBoardUnitType[][] = [];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 初始化指定大小的棋盘
|
|
||||||
* @param width
|
|
||||||
* @param height
|
|
||||||
*/
|
|
||||||
const initChessBoard = (width: number, height: number) => {
|
|
||||||
chessBoard = new Array(width);
|
|
||||||
for (let i = 0; i < width; i++) {
|
|
||||||
chessBoard[i] = new Array(height);
|
|
||||||
for (let j = 0; j < height; j++) {
|
|
||||||
chessBoard[i][j] = {
|
|
||||||
blocks: [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 初始化棋盘
|
|
||||||
initChessBoard(boxWidthNum, boxHeightNum);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 游戏初始化
|
|
||||||
*/
|
|
||||||
const initGame = () => {
|
|
||||||
console.log("initGame", gameConfig);
|
|
||||||
|
|
||||||
// 1. 规划块数
|
|
||||||
// 块数单位（总块数必须是该值的倍数）
|
|
||||||
const blockNumUnit = gameConfig.composeNum * gameConfig.typeNum;
|
|
||||||
console.log("块数单位", blockNumUnit);
|
|
||||||
|
|
||||||
// 随机生成的总块数
|
|
||||||
const totalRandomBlockNum = gameConfig.randomBlocks.reduce((pre, curr) => {
|
|
||||||
return pre + curr;
|
|
||||||
}, 0);
|
|
||||||
console.log("随机生成的总块数", totalRandomBlockNum);
|
|
||||||
|
|
||||||
// 需要的最小块数
|
|
||||||
const minBlockNum = Math.ceil(
|
|
||||||
(gameConfig.levelNum *
|
|
||||||
(gameConfig.topBlockNum + gameConfig.minBottomBlockNum)) /
|
|
||||||
2 +
|
|
||||||
totalRandomBlockNum
|
|
||||||
);
|
|
||||||
console.log("需要的最小块数", minBlockNum);
|
|
||||||
|
|
||||||
// 补齐到 blockNumUnit 的倍数
|
|
||||||
// e.g. minBlockNum = 14, blockNumUnit = 6, 补到 18
|
|
||||||
let totalBlockNum = minBlockNum;
|
|
||||||
if (totalBlockNum % blockNumUnit !== 0) {
|
|
||||||
totalBlockNum = (Math.floor(minBlockNum / blockNumUnit) + 1) * blockNumUnit;
|
|
||||||
}
|
|
||||||
console.log("总块数", totalBlockNum);
|
|
||||||
|
|
||||||
// 2. 随机生成块
|
|
||||||
// 保存所有块的数组
|
|
||||||
const animalBlocks: string[] = [];
|
|
||||||
// 需要用到的动物数组
|
|
||||||
const needAnimals = gameConfig.animals.slice(0, gameConfig.typeNum);
|
|
||||||
// 依次把块塞到数组里
|
|
||||||
for (let i = 0; i < totalBlockNum; i++) {
|
|
||||||
animalBlocks.push(needAnimals[i % gameConfig.typeNum]);
|
|
||||||
}
|
|
||||||
// 打乱数组
|
|
||||||
const randomAnimalBlocks = _.shuffle(animalBlocks);
|
|
||||||
// 下一个要塞入的块
|
|
||||||
let pos = 0;
|
|
||||||
|
|
||||||
// 3. 填充结果
|
|
||||||
// 计算随机生成的块
|
|
||||||
const randomBlocks: BlockType[][] = [];
|
|
||||||
gameConfig.randomBlocks.forEach((randomBlock, idx) => {
|
|
||||||
randomBlocks[idx] = [];
|
|
||||||
for (let i = 0; i < randomBlock; i++) {
|
|
||||||
const newBlock = {
|
|
||||||
id: pos,
|
|
||||||
level: i,
|
|
||||||
status: 0,
|
|
||||||
type: randomAnimalBlocks[pos],
|
|
||||||
higherThanBlocks: [] as BlockType[],
|
|
||||||
lowerThanBlocks: [] as BlockType[],
|
|
||||||
} as BlockType;
|
|
||||||
randomBlocks[idx].push(newBlock);
|
|
||||||
blockData[pos] = newBlock;
|
|
||||||
pos++;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 剩余块数
|
|
||||||
let leftBlockNum = totalBlockNum - totalRandomBlockNum;
|
|
||||||
|
|
||||||
// 计算每层生成的块数
|
|
||||||
// 每层递减块数
|
|
||||||
// e.g. 最上层 38 块，最下层不小于 20 块，共 10 层，则每层递减块数为 18 / 9 = 2
|
|
||||||
const stepNum = Math.floor(
|
|
||||||
(gameConfig.topBlockNum - gameConfig.minBottomBlockNum) /
|
|
||||||
(gameConfig.levelNum - 1)
|
|
||||||
);
|
|
||||||
console.log("每层递减块数", stepNum);
|
|
||||||
|
|
||||||
// 下一层要分配的块数
|
|
||||||
let nextBlockNum = gameConfig.topBlockNum;
|
|
||||||
// 各层的块
|
|
||||||
const levelBlocks: BlockType[][] = [];
|
|
||||||
for (let i = 0; i < gameConfig.levelNum; i++) {
|
|
||||||
// 最后一层，所有的块都分配出去
|
|
||||||
if (i == gameConfig.levelNum - 1) {
|
|
||||||
nextBlockNum = leftBlockNum;
|
|
||||||
}
|
|
||||||
levelBlocks[i] = [];
|
|
||||||
// 添加新块
|
|
||||||
for (let j = 0; j < nextBlockNum; j++) {
|
|
||||||
if (pos >= totalBlockNum) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
const newBlock = {
|
|
||||||
id: pos,
|
|
||||||
level: i,
|
|
||||||
status: 0,
|
|
||||||
type: randomAnimalBlocks[pos],
|
|
||||||
higherThanBlocks: [] as BlockType[],
|
|
||||||
lowerThanBlocks: [] as BlockType[],
|
|
||||||
} as BlockType;
|
|
||||||
levelBlocks[i].push(newBlock);
|
|
||||||
blockData[pos] = newBlock;
|
|
||||||
pos++;
|
|
||||||
}
|
|
||||||
leftBlockNum -= nextBlockNum;
|
|
||||||
nextBlockNum -= stepNum;
|
|
||||||
}
|
|
||||||
console.log("剩余块数", leftBlockNum);
|
|
||||||
|
|
||||||
// 4. 初始化空插槽
|
|
||||||
const slotArea: BlockType[] = new Array(gameConfig.slotNum).fill(null);
|
|
||||||
|
|
||||||
console.log(
|
|
||||||
"各层数量",
|
|
||||||
levelBlocks
|
|
||||||
.map((levelBlock, idx) => `第${idx}层：${levelBlock.length} 块`)
|
|
||||||
.join("\n")
|
|
||||||
);
|
|
||||||
console.log("随机块情况", randomBlocks);
|
|
||||||
|
|
||||||
return {
|
|
||||||
levelBlocks,
|
|
||||||
randomBlocks,
|
|
||||||
slotArea,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 随机生成块坐标
|
|
||||||
*/
|
|
||||||
const randomPos = () => {
|
|
||||||
const levelBoardDom: any = document.getElementsByClassName("level-board");
|
|
||||||
// 为方便给格子设置固定宽高，不动态计算了
|
|
||||||
// const totalWidth = levelBoardDom[0].clientWidth;
|
|
||||||
const blockDomList = document.getElementsByClassName("level-block");
|
|
||||||
// 每个格子的宽高
|
|
||||||
const widthUnit = 14;
|
|
||||||
const heightUnit = 14;
|
|
||||||
// 设置父容器宽高
|
|
||||||
levelBoardDom[0].style.width = widthUnit * boxWidthNum + "px";
|
|
||||||
levelBoardDom[0].style.height = heightUnit * boxHeightNum + "px";
|
|
||||||
// 遍历时层级递增
|
|
||||||
for (let i = 0; i < blockDomList.length; i++) {
|
|
||||||
let blockDom: any = blockDomList[i];
|
|
||||||
const blockId = blockDom.dataset.id;
|
|
||||||
const block = blockData[blockId];
|
|
||||||
blockDom.style.position = "absolute";
|
|
||||||
// 随机生成坐标，当前层级不能重复
|
|
||||||
let newPosX;
|
|
||||||
let newPosY;
|
|
||||||
while (true) {
|
|
||||||
newPosX = Math.floor(Math.random() * (boxWidthNum - 2));
|
|
||||||
newPosY = Math.floor(Math.random() * (boxHeightNum - 2));
|
|
||||||
const currChessBoardUnit = chessBoard[newPosX][newPosY];
|
|
||||||
// 同层级元素不能完全重叠
|
|
||||||
if (
|
|
||||||
currChessBoardUnit.blocks.length < 1 ||
|
|
||||||
currChessBoardUnit.blocks[currChessBoardUnit.blocks.length - 1].level !=
|
|
||||||
block.level
|
|
||||||
) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
chessBoard[newPosX][newPosY].blocks.push(block);
|
|
||||||
block.x = newPosX;
|
|
||||||
block.y = newPosY;
|
|
||||||
blockDom.style.left = newPosX * widthUnit + "px";
|
|
||||||
blockDom.style.top = newPosY * heightUnit + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 可能导致死循环，暂不使用
|
|
||||||
// /**
|
|
||||||
// * 判断某个坐标是否和其他块有重叠
|
|
||||||
// * @param x
|
|
||||||
// * @param y
|
|
||||||
// * @param block
|
|
||||||
// */
|
|
||||||
// const hasOverlap = (x: number, y: number, block: BlockType) => {
|
|
||||||
// // 确定该块附近的格子坐标范围
|
|
||||||
// const minX = Math.max(x - 2, 0);
|
|
||||||
// const minY = Math.max(y - 2, 0);
|
|
||||||
// const maxX = Math.min(x + 3, boxWidthNum - 2);
|
|
||||||
// const maxY = Math.min(y + 3, boxWidthNum - 2);
|
|
||||||
// // 遍历该块附近的格子
|
|
||||||
// for (let i = minX; i < maxX; i++) {
|
|
||||||
// for (let j = minY; j < maxY; j++) {
|
|
||||||
// const relationBlocks = chessBoard[i][j].blocks;
|
|
||||||
// for (const relationBlock of relationBlocks) {
|
|
||||||
// if (relationBlocks[relationBlocks.length - 1].level != block.level) {
|
|
||||||
// return false;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// return true;
|
|
||||||
// };
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 绑定层级覆盖关系（用于确认哪些元素是当前可点击的）
|
|
||||||
*
|
|
||||||
* 核心逻辑：每个块压住和其坐标有交集棋盘格内所有 level 大于它的点，双向建立联系
|
|
||||||
*/
|
|
||||||
const bindLevelRelation = () => {
|
|
||||||
levelBlocksVal.value.forEach((levelBlock) => {
|
|
||||||
levelBlock.forEach((block) => {
|
|
||||||
const x = block.x;
|
|
||||||
const y = block.y;
|
|
||||||
// 确定该块附近的格子坐标范围
|
|
||||||
const minX = Math.max(x - 2, 0);
|
|
||||||
const minY = Math.max(y - 2, 0);
|
|
||||||
const maxX = Math.min(x + 3, boxWidthNum - 2);
|
|
||||||
const maxY = Math.min(y + 3, boxWidthNum - 2);
|
|
||||||
// 遍历该块附近的格子
|
|
||||||
for (let i = minX; i < maxX; i++) {
|
|
||||||
for (let j = minY; j < maxY; j++) {
|
|
||||||
const relationBlocks = chessBoard[i][j].blocks;
|
|
||||||
relationBlocks.forEach((relationBlock) => {
|
|
||||||
// 建立覆盖关系
|
|
||||||
if (relationBlock.level > block.level) {
|
|
||||||
block.higherThanBlocks.push(relationBlock);
|
|
||||||
relationBlock.lowerThanBlocks.push(block);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 开始游戏
|
|
||||||
*/
|
|
||||||
const doStart = () => {
|
|
||||||
gameStatus.value = 0;
|
|
||||||
const { levelBlocks, randomBlocks, slotArea } = initGame();
|
|
||||||
console.log(levelBlocks, randomBlocks, slotArea);
|
|
||||||
levelBlocksVal.value = levelBlocks;
|
|
||||||
randomBlocksVal.value = randomBlocks;
|
|
||||||
slotAreaVal.value = slotArea;
|
|
||||||
// 等 dom 更新后才刷新坐标
|
|
||||||
nextTick(() => {
|
|
||||||
randomPos();
|
|
||||||
bindLevelRelation();
|
|
||||||
gameStatus.value = 1;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 点击块事件
|
|
||||||
* @param block
|
|
||||||
* @param e
|
|
||||||
* @param randomIdx 随机区域下标，>= 0 表示点击的是随机块
|
|
||||||
*/
|
|
||||||
const doClickBlock = (block: BlockType, e: Event, randomIdx = -1) => {
|
|
||||||
// 已经输了 / 已经被点击 / 有上层块，不能再点击
|
|
||||||
if (
|
|
||||||
currSlotNum.value >= gameConfig.slotNum ||
|
|
||||||
block.status !== 0 ||
|
|
||||||
block.lowerThanBlocks.length > 0
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 修改元素状态为已点击
|
|
||||||
block.status = 1;
|
|
||||||
// 移除当前元素
|
|
||||||
if (randomIdx >= 0) {
|
|
||||||
// 移除所点击的随机区域的第一个元素
|
|
||||||
randomBlocksVal.value[randomIdx] = randomBlocksVal.value[randomIdx].slice(
|
|
||||||
1,
|
|
||||||
randomBlocksVal.value[randomIdx].length
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// 删除节点
|
|
||||||
// @ts-ignore
|
|
||||||
e.target.remove();
|
|
||||||
// 移除覆盖关系
|
|
||||||
block.higherThanBlocks.forEach((higherThanBlock) => {
|
|
||||||
_.remove(higherThanBlock.lowerThanBlocks, (lowerThanBlock) => {
|
|
||||||
return lowerThanBlock.id === block.id;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 新元素加入插槽
|
|
||||||
let tempSlotNum = currSlotNum.value;
|
|
||||||
slotAreaVal.value[tempSlotNum] = block;
|
|
||||||
// 检查是否有可消除的
|
|
||||||
// block => 出现次数
|
|
||||||
const map: Record<string, number> = {};
|
|
||||||
// 去除空槽
|
|
||||||
const tempSlotAreaVal = slotAreaVal.value.filter((slotBlock) => !!slotBlock);
|
|
||||||
tempSlotAreaVal.forEach((slotBlock) => {
|
|
||||||
const type = slotBlock.type;
|
|
||||||
if (!map[type]) {
|
|
||||||
map[type] = 1;
|
|
||||||
} else {
|
|
||||||
map[type]++;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
console.log("tempSlotAreaVal", tempSlotAreaVal);
|
|
||||||
console.log("map", map);
|
|
||||||
// 得到新数组
|
|
||||||
const newSlotAreaVal = new Array(gameConfig.slotNum).fill(null);
|
|
||||||
tempSlotNum = 0;
|
|
||||||
tempSlotAreaVal.forEach((slotBlock) => {
|
|
||||||
// 成功消除（不添加到新数组中）
|
|
||||||
if (map[slotBlock.type] >= gameConfig.composeNum) {
|
|
||||||
// 块状态改为已消除
|
|
||||||
slotBlock.status = 2;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
newSlotAreaVal[tempSlotNum++] = slotBlock;
|
|
||||||
});
|
|
||||||
slotAreaVal.value = newSlotAreaVal;
|
|
||||||
currSlotNum.value = tempSlotNum;
|
|
||||||
// 游戏结束
|
|
||||||
if (tempSlotNum >= gameConfig.slotNum) {
|
|
||||||
gameStatus.value = 2;
|
|
||||||
setTimeout(() => {
|
|
||||||
alert("你输了");
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.level-board {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.level {
|
|
||||||
}
|
|
||||||
|
|
||||||
.random-board {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.random-area {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slot-board {
|
|
||||||
margin-top: 24px;
|
|
||||||
border: 10px solid saddlebrown;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block {
|
|
||||||
font-size: 28px;
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
line-height: 42px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
background: white;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled {
|
|
||||||
background: grey;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user