上面的两张动图是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)}"
:style="{width:boxWidth+'px',height:boxHeight+'px'}"
: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 {
name:'Home',
data () {
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.row = parseInt(newVal)
this.initBox()
}
}
},
mounted(){
this.initBox()
},
methods:{
initBox(){
let boxEle = document.getElementsByClassName("boxContainer")[0];
let {width,height} = boxEle.getClientRects()[0]
this.boxWidth = Math.floor(parseInt(width)/this.row); // 屏幕总宽度
this.boxHeight = Math.floor((parseInt(height)-200)/this.row); // 屏幕总高度
this.maxIndex = this.getMaxIndex(this.row); // 最多环数
this.getBoxArr()
},
getBoxArr(){
let currentArr = []
if(this.row%2==0){
currentArr = this.calcByRowAndColOuShu(this.currentIndex,this.row,this.row)
}else{
currentArr = this.calcByRowAndColJiShu(this.currentIndex,this.row,this.row)
}
this.currentArr = currentArr
},
isShow(row,col){
if(this.currentArr.findIndex(item=>{
return item.row == row && item.col == 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 ret = []
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;
top: 0;
bottom: 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>