android实现打地鼠小游戏的具体代码，供大家参考.下方游戏时间控制:当用户点击开始后,开启线程控制总时间的线程、弹出老鼠的线程和计时线程,总时间设定为60s,控制总时间的线程即sleep共60s,时间到后关闭点弹老鼠的线程和计时线程,…
具体文件：/f/25127180-734982222-775741?p=551685 (访问密码: 551685)
view sourceprint?001package com.example.playmouse;00import android.content.pm.activityinfo;004import android.os.bundle;005import android.os.handler;006import android.os.message;007import android.util.log;008import android.view.motionevent;009import android.view.view;010import android.view.windowmanager;011import android.widget.imageview;012import android.widget.textview;013import android.widget.toast;014015import androidx.annotation.nonnull;016import androidx.appcompat.app.appcompatactivity;017018import java.util.random;019public class playmouse extends appcompatactivity {020/************1.定义变量、对象、洞穴坐标******************/021private int i=0;//记录打到的地鼠个数022private imageview mouse;//定义 mouse 对象023private textview info1; //定义 info1 对象（用于查看洞穴坐标）024private handler handler;//声明一个 handler 对象025public int[][] position=new int[][]{026{277, 200}, {535, 200}, {832, 200},027{1067,200}, {1328, 200}, {285, 360},028{645, 360}, {1014,360}, {1348, 360},{319, 600},{764, 600},{1229,600}029};//创建一个表示地鼠位置的数组 @override030protected void oncreate(bundle savedinstancestate) {031super.oncreate(savedinstancestate);032setcontentview(r.layout.activity_main);033getwindow().setflags(windowmanager.layoutparams.flag_fullscreen,034windowmanager.layoutparams.flag_fullscreen);//设置不显示顶部栏035setrequestedorientation(activityinfo.screen_orientation_landscape);//设置横屏模式036/************2.绑定控件*****************/037mouse = (imageview) findviewbyid(r.id.imageview1);038info1 = findviewbyid(r.id.info);039/************获取洞穴位置*****************/040//通过 logcat 查看 【注】：getrawy()：触摸点距离屏幕上方的长度（此长度包括程序项目名栏的）041info1.setontouchlistener(new view.ontouchlistener() {042@override043public boolean ontouch(view v, motionevent event) {044switch (event.getaction()) {045case motionevent.action_down:046float x = event.getrawx();047float y = event.getrawy();048log.i("x:" + x, "y:" + y);049break;050default:051break;052}053return false;054}055});056/************3.实现地鼠随机出现*****************/057//创建 handler 消息处理机制058handler = new handler() {059@override060public void handlemessage(@nonnull message msg) {061//需要处理的消息062int index;063if (msg.what == 0x101) {064index = msg.arg1; 获取位置索引值065mouse.setx(position[index][0]);//设置 x 轴坐标066mouse.sety(position[index][1]);//设置 y 轴坐标（原点为屏幕左上角（不包括程序名称栏））067mouse.setvisibility(view.visible);//设置地鼠显示068}069super.handlemessage(msg);070}071};072// 创建线程073thread t = new thread(new runnable() {074@override075public void run() {076int index = 0;// 定义一个记录地鼠位置的索引值077while (!thread.currentthread().isinterrupted()) {078index = new random().nextint(position.length);// 产生一个随机整数（范围：0<=index<数组长度）079message m = handler.obtainmessage();//创建消息对象080m.what = 0x101;//设置消息标志081m.arg1 = index;// 保存地鼠标位置的索引值082handler.sendmessage(m);// 发送消息通知 handler 处理083try {084thread.sleep(new random().nextint(500) + 500); // 休眠一段时间085} catch (interruptedexception e) {086e.printstacktrace();087}088}089}090});091t.start();092/************4.实现点击地鼠后的事件：让地鼠不显示&显示消息*****************/093// 添加触摸 mouse 后的事件094mouse.setontouchlistener(new view.ontouchlistener() {095@override096public boolean ontouch(view v, motionevent event) {097v.setvisibility(view.invisible);//设置地鼠不显示098i++;099toast.maketext(playmouse.this, "打到[ " + i + " ]只地鼠！",100toast.length_short).show(); // 显示消息提示框101return false;102}103});104}}
GitHub 和 Gitee 个人主页中可以对自己的项目进行拖拽排序，于是我就想自己实现一个。本随笔只是记录一下大概的实现思路，如果感兴趣的小伙伴可以通过代码和本随笔的说明去理解实现过程。👉我的 Gitee 和 GitHub 地址。
在线浏览地址：11.拖拽排序，里面还有更多的例子。
思路构思
要实现元素拖拽可替换位置，就必须要锁定每一个元素的具体位置，且要直到两个元素的 transform: translate()。从代码上看，这是一个二维数组。从界面上看，就是一个网格布局。06#Web 实战：实现可滑动的标签页是通过一维数组实现的。
元素的布局不可能通过display: grid来进行，得用transform: translate()，实现元素得平移，且需要使用绝对和相对定位。
静态界面代码
这里给出初始的静态界面代码，draggable 表示开启这个元素的可拖拽功能：
Item 0 Item 1 Item 2 Item 3 老样子，我喜欢把不必要的代码给省略掉，如果样式不全，去我的仓库复制：
.drop-box {
transition: all 0.5s ease-in-out;
box-sizing: border-box;
/* 在这里设置 drop-box 的高宽/
width: 420px;
height: 300px;
/在这里设置 drop-box 的高宽 */
border-radius: 10px;
border: 1px solid #cccccc;
position: relative;
}
.drag-item {
transition: all 0.5s ease-in-out;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #cccccc;
width: 200px;
height: 50%;
position: absolute;
top: 0;
left: 0;
}
.drag-item > div.ontology {
width: 100%;
height: 100%;
}
构建二维数组
拖拽每一个元素不代表真实地改变了 DOM 所在的位置。给这些元素设置监听器，并获取 index，拖拽之后都不会影响它的索引值。
上面给的 HTML 结构，在界面上生成之后，从 1 ~ 4 这样的序列是不会改变的，即便是我们修改了它的 translate（平移元素）之后，也不会影响它原本在 DOM 树上的顺序。
为了方便在代码中修改元素的transform: translate()，我们需要在页面载入时就虚拟化这些元素到二维数组中。元素虚拟化进二维数组的目的是让编程更加易于使用。
let virtualGridElem = [];
function initVirtualGrid(elem, init) {
let elemIndex = 0;
for (let rowIndex = 0; rowIndex < init.rowNum; rowIndex++) {
virtualGridElem[rowIndex] = [];
for (let colIndex = 0; colIndex < init.colNum; colIndex++) {
$(elem[elemIndex]).attr(“data-row-index”, rowIndex);
$(elem[elemIndex]).attr(“data-col-index”, colIndex);
$(elem[elemIndex]).css({ width: init.width, height: init.height, transform: gridVals[rowIndex][colIndex] });
initEvents(elem[elemIndex], elemIndex, rowIndex, colIndex);
virtualGridElem[rowIndex][colIndex] = elem[elemIndex++];
}
}
}
在虚拟化之前，需要获得这个界面中的网格信息，即网格有多少行，每一行有多少列。
let gridVals = [];
function initGridVals(elNum, colNum, rowMaxWidth, colMaxWidth) {
let rowNum = Math.ceil(elNum / colNum);
let widthPerRow = rowMaxWidth / colNum;
let heightPerCol = colMaxWidth / rowNum;
let translateX = 0;
for (let rowIndex = 0; rowIndex < rowNum; rowIndex++) {
let translateY = 0;
gridVals[rowIndex] = [];
for (let colIndex = 0; colIndex < colNum; colIndex++) {
gridVals[rowIndex][colIndex] =translate(${translateY}px, ${translateX}px);
translateY += widthPerRow;
}
translateX += heightPerCol;
}
return {
width: widthPerRow,
height: heightPerCol,
rowNum: rowNum,
colNum: colNum
};
}
到目前为止，得到了两个重要的二维数组：virtualGridElem 和 gridVals。virtualGridElem 不会被改变，一直保持原有的位置，与实际的可拖拽元素的 DOM 树保持一致。gridVals 会与 virtualGridElem 发生出入，会根据操作而修改。
let dragItem = $(“.drop-box”).children(“.drag-item”);
initVirtualGrid(dragItem, initGridVals($(dragItem).length, 2, 420, 300));
拖拽排序功能
拖拽在 HTML5 就已经存在，drop、dragover、dragstart、dragend 都是实现本案例中最重要的几个监听事件。其中 drop 表示可拖拽元素到目标元素之后的元素，即 item1 拖拽到 item2 之后，获取 item2 的元素。
function initEvents(elem, index, rowIndex, colIndex) {
// drop 是获取拖拽目标元素
$(elem).on(“drop”, e => {
e.preventDefault();
$(virtualGridElem[rowIndex][colIndex]).css({ transform: gridVals[currRowIndex][currColIndex] });
$(virtualGridElem[currRowIndex][currColIndex]).css({ transform: gridVals[rowIndex][colIndex] });
// let tempTargetGridVals = gridVals[currRowIndex][currColIndex];
// gridVals[currRowIndex][currColIndex] = gridVals[rowIndex][colIndex];
// gridVals[rowIndex][colIndex] = tempTargetGridVals;
[gridVals[currRowIndex][currColIndex], gridVals[rowIndex][colIndex]] = [gridVals[rowIndex][colIndex], gridVals[currRowIndex][currColIndex]];
});
// 必须写这一段代码，否则 drop 监听器不生效
$(elem).on(“dragover”, e => {
e.preventDefault();
});
// drag 相关的监听是对拖拽元素目标有效的
let ontology = $(elem).children(“.ontology”);
$(ontology).on(“dragstart”, e => {
currRowIndex = rowIndex;
currColIndex = colIndex;
$(elem).css({ opacity: “0.5” });
});
$(ontology).on(“dragend”, e => {
$(elem).css({ opacity: “1” });
});
}
代码最多的是 drop 事件，在开始拖拽时，也就是获取拖拽的元素信息，在这里我们要把这个拖拽的元素透明度调低一点，表示被拖拽中的元素。之后，记录改拖拽元素的二维索引值，rowIndex、colIndex，记录为 currXxxIndex。
在拖拽完成之后，就要触发 drop 事件。drop 事件中，对 gridVals 进行值的交替。ES6 中解构赋值不需要中间变量临时存储，就可以实现值交换：
let x = 1, y = 2;
[x, y] = [y, x]
替换之后，x = 2，y = 1。
结束语
具体实现过程请去看我仓库中的代码👉 Gitee 和 GitHub 地址。喜欢的话，请点个赞👍再走哦！后续带来更多的 Web 实践。
