基本的には、キャンバスに円を描き、できるだけ早くクリックしなければならないゲームを作成しようとしています。円は、キャンバス上でランダムに生成され、特定の半径を持つ必要があります。ユーザーがサークルをクリックすると、サークルをクリックするのに要した時間(少ない時間=より多くのポイント)に基づいてポイントが与えられます。ユーザーがサークルをクリックすると、それが消え、キャンバスのどこかに別のサークルがランダムに生成され、ユーザーはサークル全体がクリックされるまでこれを続けます。javascriptを使用してクリック可能な円を作成する方法は?
このゲームの全体のポイントは、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>
\t <link href="stylesheet.css" type="text/css" rel="stylesheet" />
\t <script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>Aim Practice</h1>
\t </div>
\t <div id="container">
\t <canvas id="myCanvas">
\t </canvas>
\t </div>
</body>
</html>
何についてhttp://p5js.org/? – Microsmsm
私の回答は役に立ちますか?そうでない場合は、他に必要なものについてコメントしてください。 – Mobius