按键精灵/触控精灵多点找怪,多点找色算法思路,附带动态分析图,以及算法代码

上面的两张动图是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) + 1let centerCol = Math.floor(colSize/2) + 1let 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 +1let 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>

按键精灵/触控精灵多点找怪,多点找色算法思路,附带动态分析图,以及算法代码相关推荐

【资料】低功耗1/单通道/单按键触摸触控芯片VKD223B/EB/NB,适用于TWS/电池供电类触摸屏等
型号:VKD223B/VKD223NB 陈锐鸿:188/2466/2436 品牌:永嘉微电/VINKA 封装:SOT23-6 VKD223B/NB 概述: VKD223B/VKD223NB SOT2 ...
超小体积超薄封装2*2电容式单按键触摸触控IC，适合TWS蓝牙耳机/耳塞/耳麦
优势代理元泰VKD常用触控按键IC,简介如下: 标准触控IC-电池供电系列 VKD223EB --- 工作电压/电流:2.0V-5.5V/5uA-3V 感应通道数:1 通讯接口最长响应时间快速模式6 ...
php 触控精灵,背景控制，精灵图 3-12
背景 *{margin: 0;padding: 0;} /*背景控制*/ /*background(背景图背景色)*/ /*背景色(三种设置方法:1英文单词 2 16进制颜色 3 RGB颜色值)*/ ...
黑苹果找不到触控板_苹果App内测找不到苹果企业签名怎么办？
在苹果App的内测阶段,很多开发者都会选择使用苹果企业签名来进行App内测,因为经过苹果企业签名添加信任的App可以不经过App Store和苹果系统的审核,直接安装到ios设备上去,所以苹果企业签名 ...
Android游戏开发：SurfaceView多点触控之完美钢琴游戏Demo
一.我们在使用SurfaceView开发小游戏时,如果需要在窗体上自绘按钮和可交互对象,这时需要监听屏幕的多点触控,并且每次触控的改变都需要和游戏产生交互,如何实现呢? CSDN博客 @MXout 有 ...
【Android 应用开发】多点触控 ( 多点触控事件 | PointerId | PointerIndex | 坐标获取 | 触摸点个数 )
文章目录 I . 多点触控事件 II . PointerId 与 PointerIndex 简介 III . 本次 PointerId 与 PointerIndex 获取 IV . PointerId ...
Android开发实例之多点触控程序
智能终端设备的多点触控操作为我们带来了种种炫酷体验,这也使得很多Android开发者都对多点触控程序的开发感兴趣.实际上多点触控程序的实现并不是那么遥不可及,而是比较容易.本文就主要通过一个实例具体讲 ...
多点触控与多鼠标支持
多点触控与多鼠标支持最进将工作流平台进行了升级,除了用WF4重新构建了后台,最大的改变就是全部图形化了用户界面原计划在用户界面中全面启用多点触控技术,但发现多点触控的效果没有想象中的那么绚. 下面 ...
Android多点触控详解
本文转载自GcsSloop的安卓自定义View进阶-多点触控详解的文章 Android 多点触控详解,在前面的几篇文章中我们大致了解了 Android 中的事件处理流程和一些简单的处理方案,本次带 ...

按键精灵/触控精灵多点找怪,多点找色算法思路,附带动态分析图,以及算法代码

按键精灵/触控精灵多点找怪,多点找色算法思路,附带动态分析图,以及算法代码相关推荐

最新文章

热门文章

按键精灵/触控精灵 多点找怪,多点找色算法思路,附带动态分析图,以及算法代码

按键精灵/触控精灵 多点找怪,多点找色算法思路,附带动态分析图,以及算法代码相关推荐

最新文章

热门文章

按键精灵/触控精灵多点找怪,多点找色算法思路,附带动态分析图,以及算法代码

按键精灵/触控精灵多点找怪,多点找色算法思路,附带动态分析图,以及算法代码相关推荐