我也来一个“羊了个羊”

演示以及原理讲解

源码地址：https://gitee.com/13026118978/sheep-asheep

实现

1.定义变量

// 动物数组 const animals = [ "🐔", "🐟", "🦆", "🐶", "🐱", "🐴", "🐑", "🐦", "🐧", "🐊", "🐺", "🐒", "🐳", "🐬", "🐢", "🦖", "🦒", "🦁", "🐍", "🐭", "🐂", ];

export const configData = {

animals, // 动物数组

chessCellNum:24, // 棋盘格子数

SizePerCell:14,// 棋盘每个格子宽高

typeNum: 12, // 动物类别数

slotNum: 7,// 槽容量

composeNum: 3, // 可以合成的数量

levelNum:6, // 总层数

blockNumPerLevel:48, // 每一层的块数

randomBlocks:[8,8], // 随机区

shrinkNum:1,// 边界收缩单位

}

let levelBlockList = []; // 层级块数组

let randomBlockList = [] // 随机块数组

let slotBlockList = [] // 插槽数组

let chessBoard; // 棋盘，存储每个格子里装的层级块

let clearNum = 0 ; // 消除的数量

let totalNums = 0 ; // 总的块数

2.初始化棋盘

给棋盘分格子，每个格子加一个blocks属性，保存块数据

function initChessBoard(){

   chessBoard = new Array(configData.chessCellNum)

   for(let i = 0 ; i < configData.chessCellNum ; i++){

chessBoard[i] = new Array(configData.chessCellNum)

for(let j = 0 ; j < configData.chessCellNum ; j++){

chessBoard[i][j] = { blocks:[] }

}

   }

}

3.初始化游戏数据

①计算出块的单位数

let unitBlockNum = configData.typeNum * configData.composeNum;

②算出随机块的总数

let randomTotalBlock = 0 ;

configData.randomBlocks.forEach(num=>{ randomTotalBlock += num; })

③算出需要的最小块数

const minBlockNum = configData.levelNum*configData.blockNumPerLevel + randomTotalBlock;

④算出总块数

【总块数需要是单位块数的倍数，才能最终把所有的图片消除完】

let totalBlockNum = minBlockNum;

if(totalBlockNum % unitBlockNum !==0){

totalBlockNum = (Math.floor(totalBlockNum / unitBlockNum)+1)*unitBlockNum;

}

totalNums = totalBlockNum;

⑤根据配置，取出哪些动物将在游戏中出现

let animalsWillInGame = configData.animals.slice(0,configData.typeNum);

⑥根据总数，保存和总数数量一样的动物【报数法或分组法】

let num = totalBlockNum / configData.typeNum

let allAnimalList = []

for(let i = 0 ; i < configData.typeNum ; i++){

for(let j = 0 ; j < num ; j++){

   allAnimalList.push(animalsWillInGame[i])

}

}

或

let allAnimalList = [];

for(let i = 0 ; i < totalBlockNum ; i++){

allAnimalList.push(animalsWillInGame[i % configData.typeNum])

}

0 1 2 3 4 5 6 7 8    9

鸡鸭鱼鸡鸭鱼鸡鸭鱼    3 9 /3 = 3

0 1 2   0 1 2 0 1 2

⑦打乱数组

function shuffle(arr){

let length= arr.length;

//while执行至条件不成立则跳出循环

while(length ]]> 1){

let index = Math.floor(Math.random() * length--);

   //es6的解构赋值，等号的左右两边模式相同，就会将右边的值赋给左边的变量

   [arr[length-1], arr[index]] = [arr[index], arr[length-1]]; }

   return arr;

}

⑧初始化块数据

let allBlocks = []

for(let i = 0 ; i < totalBlockNum ; i++){

   let newBlock = {

   id:i,

   status:0, //0-未点击 1-已点击 2-已消除

   level:0,

   animal:AllAnimalList[i],

   onMyUp:[],

// 在我上面的块

onMyDown:[]

// 在我下面的块

}

allBlocks.push(newBlock) }

⑨生成随机块数据

let position = 0 ;

configData.randomBlocks.forEach((item,index)=>{

   randomBlockList[index] = [];

   for(let j = 0 ; j < item ; j++){

randomBlockList[index].push(allBlocks[position])

position++;

   }

})

⑩生成层叠块数据

for(let i = 0 ; i < configData.levelNum ; i++){

   // 剩余的块数

   let leaveBlock = totalBlockNum - randomTotalBlock;

   // 当前层级包括的块数

   let currLevelBlockNum = Math.min(leaveBlock,configData.blockNumPerLevel);

   // 取出当前层级包括的块

   let currLevelBlock = allBlocks.slice(position,position+currLevelBlockNum);

   position +=currLevelBlockNum

   leaveBlock -=currLevelBlockNum

   // 放入层级数组中

   levelBlockList.push(...currLevelBlock)

a.处理每个块的坐标

let minX = 0;

let maxX = 22;

let minY = 0;

let maxY = 22;

// 对范围进行收缩(四个边进行收缩：上右下左)

let indexNum = i % 4

if(i > 0 ){

if(indexNum===0){ maxY -=configData.shrinkNum; }    else if(indexNum===1){ maxX -=configData.shrinkNum; }    else if(indexNum===2){    minY +=configData.shrinkNum; }    else{

minX +=configData.shrinkNum; }

}

dealCoordinate(currLevelBlock,minX,maxX,minY,maxY) }

function dealCoordinate(currLevelBlock,minX,maxX,minY,maxY){

   let tempObj = {};// 用于去重

   for(let i = 0 ; i < currLevelBlock.length ; i++){

let block = currLevelBlock[i];

let newBlockX ; let newBlockY ;

let key;

// 通过循环获取没有重复的点

while(true){

   newBlockX = Math.floor(Math.random()*(maxX - minX) + minX)

   newBlockY = Math.floor(Math.random()*(maxY - minY) + minY)

   key = newBlockX+","+newBlockY

   if(!tempObj[key]){

   // 之前没有存入这个坐标，则坐标有效

   break;

   }

}

// 将块存入棋盘格子中

chessBoard[newBlockX][newBlockY].blocks.push(block)

tempObj[key] = block;

block.x = newBlockX;

block.y = newBlockY;

// 处理块的关系

   dealBlockRelative(block)

   }

}

b.处理块之间的层级关系

let maxLevel = 0 ;

function dealBlockRelative(block){

// 确定与当前块相交的块所占格子坐标[结合格子图去理解]

let minX = Math.max(block.x - 2 , 0 );

let minY = Math.max(block.y - 2 , 0 );

let maxX = Math.min(block.x + 2, configData.chessCellNum -3)

let maxY = Math.min(block.y + 2, configData.chessCellNum -3)

   // 遍历当前块附近的块,找出最高的块的层级

   for(let i = minX ; i <= maxX ; i++){

for(let j = minY ; j <= maxY ; j++){

   let relativeBlock = chessBoard[i][j].blocks;

   if(relativeBlock.length]]>0){

let maxLevelBlock = relativeBlock[relativeBlock.length - 1];

   // 排除自己

   if(maxLevelBlock.id === block.id){ continue; }

   // 找到最高层block

maxLevel = Math.max(maxLevel,maxLevelBlock.level);

   // 上下层的关系

block.onMyDown.push(maxLevelBlock);

maxLevelBlock.onMyUp.push(block);

   }

   }

}

// 设置当前块是所有相交的块中，层级最高的

block.level = maxLevel + 1;

}