Question

基本上，我正在尝试创建一个游戏，其中圆圈将在画布上生成，用户必须尽快点击它们。圆圈应在画布上随机生成并具有一定的半径。一旦用户点击一个圆圈，他们就会根据他们点击圆圈所花费的时间获得积分（更少的时间=更多积分）。用户单击圆圈后，它会消失，另一个圆圈会随机生成画布上的某个位置，并且用户会一直这样做，直到整体点击100个圆圈。

这款游戏的重点是帮助提高FPS游戏的准确性和反射能力。我决定创建一个像这样的游戏来主要帮助自己，还有其他人，因为我找不到符合我需要的在线游戏。

无论如何，这是我到目前为止的游戏代码。如果有人可以帮助我进一步开发这个游戏甚至完成它，那将非常感激。

HTML：

var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");

var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;

function spawnTarget() {
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(0, 0, 255);
  text-align: center;
}

#header {
  display: inline-block;
  background-color: rgb(255, 255, 255);
  margin: 64px auto;
  border-radius: 16px;
}

h1 {
  font-family: Arial;
  font-size: 128px;
  color: rgb(0, 0, 0);
}

#myCanvas {
  width: 1800px;
  height: 900px;
  border: 4px solid rgb(0, 0, 0);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Aim Practice</title>
	<link href="stylesheet.css" type="text/css" rel="stylesheet" />
	<script src="script.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="header">
      <h1>Aim Practice</h1>
	</div>
	<div id="container">
	  <canvas id="myCanvas">
	  </canvas>
	</div>
  </body>
</html>

Answer 1

因为圈子不是实际的DOM元素，所以您必须在画布上监听click个事件，并在点击事件上比较screenX和screenY到他所讨论的圆圈的画布坐标。请记住在画布相对于屏幕的偏移量中添加。您还必须手动计算点击是否在圆圈内。

如何使用javascript制作可点击的圈子？

1 个答案: