1. 成果展示
1.1 动图展示
1.2 主要界面展示
2. 主要功能介绍
Vue3 的羊了个羊主要有两个页面:
- 入口界面
实现了难度选择,包括简单、苦难、复杂等,不同的难度,卡片的数量、层级不同以及侧边卡片是否存在。
- 主页面
除了羊了个羊的基本功能(生成卡片、消除等),还实现了与手机中类似的打乱顺序功能的技能。以及排行版的功能,但这需要用到数据库或是本地缓存,亦或是本地存储,有兴趣的小伙伴可以自己在此基础上开发一下。同时,还有计时器及返回入口界面的功能。
3. 思路
以css
的绝对定位为基础,top
为y
轴,left
为x轴
,z-index
为z轴,再通过此思想用循环生成一个类型棋盘的卡片区域,在动态的生成卡片,也就是随机的将这些生成的卡片插入到棋盘中。
4. 关键代码(主要为js)
- 判断卡片是否重叠(用于判断此卡片是否能点击,以及上层卡片消除后,下层卡片变成可点状态)
// 判断两个长方形是否重叠
export function isOverlap(sourceRect, targetRect) {
// 先获取目标 长方形的四个顶点
const targetList = [
{ x: targetRect.x, y: targetRect.y }, // 左上角
{ x: targetRect.x, y: targetRect.y + sheepLen }, // 左下角
{ x: targetRect.x + sheepLen, y: targetRect.y }, // 右上角
{ x: targetRect.x + sheepLen, y: targetRect.y + sheepLen }, // 右下角
];
let flag = false;
for (let index = 0; index < targetList.length; index++) {
const element = targetList[index];
// 判断点是否在 source 长方形内
if (element.x >= sourceRect.xBegin && element.y >= sourceRect.yBegin) {
if (element.x <= sourceRect.xEnd && element.y <= sourceRect.yEnd) {
flag = true;
}
}
if (flag) {
break;
}
}
return flag;
}
- 创建游戏卡片棋盘
// 创建棋盘三维数组
// x:y轴 y:x轴 z:是否被占用
export function generateGamePiece(gameArea) {
let pieceList = new Array();
for (
let yIndex = 0;
yIndex < parseInt((gameArea.yEnd - gameArea.yBegin) / SheepPieceLen);
yIndex++
) {
pieceList[yIndex] = new Array();
for (
let xIndex = 0;
xIndex < parseInt((gameArea.xEnd - gameArea.xBegin) / SheepPieceLen);
xIndex++
) {
pieceList[yIndex][xIndex] = [
xIndex * SheepPieceLen,
yIndex * SheepPieceLen,
0,
];
}
}
const pieceListInfo = {
pieceList,
xNum: parseInt((gameArea.xEnd - gameArea.xBegin) / SheepPieceLen),
yNum: parseInt((gameArea.yEnd - gameArea.yBegin) / SheepPieceLen),
};
return pieceListInfo;
}
- 创建每层次棋盘区域以及产生的小羊总数量
function generateGameAreaAndRandSheepNum(inlevelNum) {
let gameAreaAndRandSheepNumList = [];
let sheepTotal = 0; // 小羊总数(所有层次相加)
for (let level = inlevelNum; level >= 1; level--) {
let t = {};
t.gameArea = {
xBegin: gameAreaRange.xBegin + (inlevelNum - level) * inlevelNum,
yBegin:
gameAreaRange.yBegin +
Math.ceil(((inlevelNum - level) * inlevelNum) / 2),
xEnd: gameAreaRange.xEnd - (inlevelNum - level) * inlevelNum,
yEnd:
gameAreaRange.yEnd - Math.ceil(((inlevelNum - level) * inlevelNum) / 2),
};
t.gameDisc = generateGamePiece(t.gameArea);
t.randomSheepNum = randomRangeByTimes(
Math.ceil((t.gameDisc.xNum * t.gameDisc.yNum) / 2),
t.gameDisc.xNum * t.gameDisc.yNum,
3
);
sheepTotal += t.randomSheepNum;
gameAreaAndRandSheepNumList[level] = t;
}
return { gameAreaAndRandSheepNumList, sheepTotal };
}
5. 完整代码
项目还存在许多不足之处,望请各位大佬指出