vue3中关于捕鱼小游戏利用css相对位置实现渔网运动以及代码优化思路

在这篇文章中，我们将完成一个渔网移动的逻辑。
如果你跟我一样，是一个初出茅庐的程序员，那么这篇文章会令你收益颇丰。

功能实现

想要完成捕鱼小游戏，首先我们需要一个游戏框

代码如下

定义一个box div 给这个box添加一个高度和宽度，背景颜色。

其次就是要有一个渔网，这个渔网要在游戏框内，且要移动，那么我们就刚好可以用相对位置来完成。

代码如下

在box div内添加一个net div并设置net的位置为相对位置。设置高度、背景颜色。

接着就是渔网运动部分。我们需要给渔网的top设置成响应式状态。
由于渔网自身高度原因，所以top设置为180，即渔网顶部相对游戏框顶部180px，加上渔网本身20px的高度，刚好渔网底部对齐游戏框底部。

然后就是运动逻辑了，我们想要当鼠标点击的时候，渔网向上移动，鼠标松开的时候，渔网自然下坠。

代码如下

鼠标点击状态可以用mousedown和mouseup来捕获
当鼠标点击后，执行mdown()函数，mdown()函数内首先清除定时器，然后进入上升循环。
当鼠标松开后，执行mup()函数，mup()函数内首先清除定时器，然后进入下坠循环。

这样，一个简单的渔网操作就完成了。

这里仅仅只是完成了简单的渔网移动，还有鱼的随机移动，渔网与鱼的重合检测，甚至说渔网的加速上升，加速下降等等，这里就不一一赘述。

代码优化

在完成一段代码后，我总会去想，有没有什么办法，能够优化一下代码，使代码更简洁。
代码优化有两个切入点：
一、整合重复性
二、升级普通性

首先是重复性，注意看下面这段代码中的重复代码。

可以看到这里有两处一模一样的clearInterval(moveid);下面一行的代码也是大致相同，只是箭头函数内容不一样，那么我们就可以整合代码，将不同的代码抽离出来。

优化后代码如下图所示

感觉有点像化简数学表达式。

下面就是普通性，上面的if语句升级成以取最大最小值的形式来完成。这个切入点是升级普通的代码。例如switch case可以用对象来完成，for循环求和可以用reduce来完成。

总结

其实在最开始，我完成这个程序的过程非常繁琐，远没有上面这么简单，就几个步骤。我在完成某个功能点后，都会去看看这个功能点能否用更好的代码来完成，随着一个个功能的完成、优化，代码越来越和谐，越来越美妙，最后成为一件属于自己的艺术品。当然了，优化是永无止境的，可能随着学习的深入，重看当年自以为天下无敌的一段代码时你会想说，“这写的啥”。

完整代码如下

<script setup>
import { ref } from "vue";

let nettop = ref(180);
let moveid = null;

function mdown() {
	nettop.value = Math.max(nettop.value - 0.5, 0);
}

function mup() {
	nettop.value = Math.min(nettop.value + 0.5, 180);
}

function move(fn) {
	clearInterval(moveid);
	moveid = setInterval(fn);
}
</script>

<template>
	<div class="box" @mousedown="move(mdown)" @mouseup="move(mup)">
		<div class="net" :style="{ top: nettop + 'px' }"></div>
	</div>
</template>

<style scope>
.box {
	margin-left: 700px;
	margin-top: 200px;
	height: 200px;
	width: 50px;
	background: rgb(1, 29, 244);
}

.net {
	position: relative;
	height: 20px;
	background-color: rgba(255, 165, 0, 0.5);
}
</style>