双人打地鼠是一个经典的双人游戏，可以通过HTML和JavaScript实现。以下是一个简单的实现示例：
代码语言：javascript复制html<!DOCTYPE html>
<html> <head>
<title>双人打地鼠</title>
<style> canvas { width: 400px; height: 400px; border: 1px solid black; }
</style> </head> <body> <canvas id="canvas"></canvas>
<script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");
var mouseX = 0; var mouseY = 0; var isClicked = false; function handleMouseDown(event) { mouseX = event.clientX; mouseY = event.clientY; isClicked = true; } function handleMouseMove(event) { var deltaX = event.clientX - mouseX; var deltaY = event.clientY - mouseY; if (deltaX > -50 && deltaX < 50 && deltaY > -50 && deltaY < 50) { ctx.fillRect(mouseX, mouseY, 50, 50); } } function handleMouseUp(event) { isClicked = false; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(document.getElementById("image"), 0, 0); } function handleClick(event) { if (isClicked) { ctx.fillRect(mouseX, mouseY, 50, 50); } } window.addEventListener("mousedown", handleMouseDown); window.addEventListener("mousemove", handleMouseMove); window.addEventListener("mouseup", handleMouseUp); window.addEventListener("click", handleClick); </script> </body> </html>在这个示例中，我们使用HTML5的Can我们首先获取Canvas元素和上下文对象，然后定义了鼠标事件处理函数。在handleMouseDown函数中，我们获取鼠标的位置，并将isClicked标记为true，以便在处理鼠标点击事件时进行处理。在handleMouseMove函数中，我们计算鼠标的移动距离，并根据距离和方向绘制地鼠。在handleMouseUp函数中，我们将isClicked标记为false，以便在处理鼠标释放事件时进行处理。在draw函数中，我们清除Canvas上的所有内容，并在Canvas上绘制一个地鼠的图像。在handleClick函数中，我们检查是否点击了地鼠，并根据需要绘制地鼠。最后，我们添加了一个鼠标点击事件监听器，以便在用户点击Canvas元素时进行处理。
请注意，这只是一个简单的示例实现，您可以根据自己的需求进行修改和扩展。
