vue3中关于打地鼠游戏逻辑实现

这篇文章主要实现一个打地鼠的游戏逻辑
先上效果图

下面是一个简略的流程图

画面设计

首先需要设计一个大背景，然后背景上有九个格子，每个格子上有一个小老鼠。代码如下：



接着就是用css来调整布局，九个格子分三行三列排列，小老鼠需要居中
代码如下

给box设置长宽、背景颜色，使用gird布局实现三行三列。
给block设置一个外边距可以好看一点，设置背景颜色，使用flex布局使小老鼠居中
给mouse设置长宽、背景颜色，先不显示。

游戏逻辑

首先定义一个按钮开始游戏，然后需要给每个老鼠添加一个id以及点击事件，id非常重要，用来获取dom元素然后修改状态。

接着就是实现老鼠陆续出现的代码，随机取1-9之中的数，用这个随机数当作id获取dom元素，获取后修改style使老鼠显示出来，并且500ms重复一次。

function start() {
	setInterval(() => {
		const i = Math.floor(Math.random() * 9) + 1;
		const div = document.getElementById(i);
		div.style.display = "block";
	}, 500);
}

最后就是锤老鼠的事件，获取dom元素然后修改style

function dis(i) {
	const div = document.getElementById(i);
	div.style.display = "none";
}

代码优化

注意下面代码的重复。

优化如下

function start(){
  setInterval(()=>{
    dis(Math.floor(Math.random() * 9) + 1,"block")
  },500)
}

function dis(i,mode){
  const div = document.getElementById(i)
  div.style.display = mode;
}

最后的最后

还有很多功能可以实现，比如说加一个计分板，老鼠没有被锤会自动消失等等，这里只是个人的一些小思考。

完整代码如下

<script setup>
function start() {
	setInterval(() => {
		dis(Math.floor(Math.random() * 9) + 1, "block");
	}, 500);
}

function dis(i, mode) {
	const div = document.getElementById(i);
	div.style.display = mode;
}
</script>

<template>
	<button @click="start()">开始</button>
	<div class="box">
		<div v-for="i of 9" class="block">
			<div class="mouse" :id="i" @click="dis(i, 'none')"></div>
		</div>
	</div>
</template>

<style scoped>
.box {
	height: 750px;
	width: 750px;
	background-color: skyblue;
	display: grid;
	grid-template-columns: repeat(3, 250px);
	grid-template-rows: repeat(3, 250px);
}

.block {
	margin: 10px;
	background-color: black;
	display: flex;
	justify-content: center;
	align-items: Center;
}

.mouse {
	height: 150px;
	width: 150px;
	display: none;
	background-color: wheat;
}
</style>