网页版羊了个羊 Vue3 实现

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. 完整代码

Github仓库
Gitee仓库

项目还存在许多不足之处，望请各位大佬指出