按键精灵触控精灵多点怪，多点⾊算法思路，附带动态分析
图，以及算法代码
上⾯的两张动图是5宫格,6宫格动图;
先说下思路
按键/触动精灵只提供了单个⾊函数，所以如果想在屏幕上多个怪物，这⾥我设计的是按照屏幕⼤⼩，分成⼀个个⼩格⼦，然后便利格⼦，调⽤他们的单个⾊函数；这样的话，我们可以把怪单独放到⼀个进程，然后异步去怪，到怪，放到⼀个全局数组供函数使⽤;
分析如下:
1.屏幕按照宽⾼等⽐例分割，这⾥算法只⽀持等分的⾏格⼦数=列格⼦数!(否则不好九宫格规律) 格⼦数量可⾃⼰定义 如:row =  5 或6
2.九宫格有奇数与偶数之分，可以看到5宫格(奇数格⼦)时，第⼀次查询index=1时，是最中⼼的⼀个格⼦,⽽6宫格(偶数格⼦)index=1时，的区域是中间4个格⼦
3.index代表的是第⼏环查询，如index=1，查询第⼀环的格⼦,index=2时，查第⼆环的格⼦
4. 在实际使⽤的时候，每次可以查询第⼏环的⼆维数组，然后根据数组计算出屏幕的像素查询开始结束为⽌，然后调⽤⾊字函数
具体的代码我放在下⾯,⽤vue写的. 想运⾏的话，需要⽤vue框架:>
<template>
<div class="boxContainer">
<div v-for="indexRow in row" :key="indexRow" >
<div v-for="indexCol in row" class="mybox" :key="indexCol" :class="{isShow:isShow(indexRow,indexCol)}"
:
:width="boxWidth" :hight="boxHeight">
{{indexRow}} - {{indexCol}}
</div>
</div>
<div class="clear"></div>
<div>
<input type="text"  v-model="row">宫格<br/>
<select v-model="currentIndex">
<option :key="indexRow" :value="indexRow"  v-for="indexRow in maxIndex">{{indexRow}}</option>
</select>
⼏环
</div>
</div>
</template>
<script>
export default {
return {
row:5,
boxWidth:0,
boxHeight:0,
currentIndex:1,
maxIndex:0,
currentArr:[]
}
},
watch:{
currentIndex: {
handler(newName, oldName) {
this.currentIndex = parseInt(newName)
this.initBox()
}
},
row:{
handler(newVal,oldVal){
this.initBox()
}
}
},
mounted(){
this.initBox()
},
methods:{
initBox(){
let boxEle = ElementsByClassName("boxContainer")[0];
let {width,height} = ClientRects()[0]
this.boxWidth = Math.floor(parseInt(width)/w); // 屏幕总宽度
this.boxHeight = Math.floor((parseInt(height)-200)/w); // 屏幕总⾼度
this.maxIndex = w);  // 最多环数
},
getBoxArr(){
let currentArr = []
w%2==0){
currentArr = this.calcByRowAndColOuShu(this.w)        }else{
currentArr = this.calcByRowAndColJiShu(this.w)        }
this.currentArr = currentArr
},
isShow(row,col){
if(this.currentArr.findIndex(item=>{borderbox
w == row && l == col
})!=-1){
return true
}else{
return false
}
},
getMaxIndex(rowSize){
return Math.floor((rowSize+1)/2)
},
calcByRowAndColJiShu(index,rowSize,colSize){
/
/计算出中奖的位置，奇数, 计算技巧
/***
* 假设row =5 ,index=2, 则 centerRow = 3
* 那么⼆维码左上⾓为(2,2) 右下⾓为(4,4)
* boxColStart = 2 boxColEnd=4
* boxRowStart =2 boxRowEnd=4
let centerRow = Math.floor(rowSize/2) + 1
let centerCol = Math.floor(colSize/2) + 1
let boxColStart = centerCol - index +1 // 2 = 3 - index(2) + ?
let boxColEnd = centerCol + index -1  // 4 = 3 + index(2) +?
let boxRowStart = centerRow - index +1 //⼆维数组上边的⾏数  2 = 3 - index(2) +?      let boxRowEnd = centerRow + index -1 //⼆维数组下边的⾏数 4 = 3 + index(2) +?      // 正⽅形上边
if( index == 1 ){ //奇数时，第⼀次，只需要执⾏⼀次即可
ret.push({row:boxRowStart,col:boxRowStart})
}else{
for(let i=boxColStart;i<=boxColEnd;i++){
ret.push({row:boxRowStart,col:i})
}
// 正⽅形下边
for(let i=boxColStart;i<=boxColEnd;i++){
ret.push({row:centerRow+(index-1),col:i})
}
// 左边
for(let i=boxRowStart+1;i<=boxRowEnd-1;i++){
ret.push({row:i,col:boxRowStart})
}
// 右边
for(let i=boxRowStart+1;i<=boxRowEnd-1;i++){
ret.push({row:i,col:boxRowEnd})
}}
}
return ret;
},
calcByRowAndColOuShu(index,rowSize,colSize){
/
/计算出中奖的位置，偶数
let ret = []
let centerRow = Math.floor(rowSize/2)
let centerCol = Math.floor(colSize/2)
let boxColStart = centerCol - index +1
let boxColEnd = centerCol + index
let boxRowStart = centerRow - index +1  //⼆维数组上边的⾏数
let boxRowEnd = centerRow + index  //⼆维数组下边的⾏数
// 正⽅形上边
for(let i=boxColStart;i<=boxColEnd;i++){
ret.push({row:boxRowStart,col:i})
}
// 正⽅形下边
for(let i=boxColStart;i<=boxColEnd;i++){
ret.push({row:centerRow+index,col:i})
}
for(let i=boxRowStart+1;i<=boxRowEnd-1;i++){
ret.push({row:i,col:boxRowStart})
}
for(let i=boxRowStart+1;i<=boxRowEnd-1;i++){
ret.push({row:i,col:boxRowEnd})
}
return ret;
}
}
}
</script>
<style scoped lang="css">
.boxContainer{
left: 0;
right: 0;
position: absolute;
}
.
mybox{
background:#ffffff;
float:left;
border:1px solid #333;  box-sizing:border-box;  color:#333;
display: flex;
align-self: center;
align-items: center;
justify-content: center; }
.isShow{
background: #666;
}
.
clear{
clear: both;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。