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

-2

基本上，我试图创建一个游戏，其中圈子会在画布上产生，用户必须尽可能快地点击它们。圆圈应该在画布上随机生成并具有一定的半径。一旦用户点击一个圆圈，他们就会根据他们点击该圆圈所花费的时间（较少的时间=更多的点数）获得积分。用户点击圆圈后，它会消失，另一个圆圈会随机产生在画布的某个位置，用户会一直这样做，直到总共点击100个圆圈。如何使用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>

来源

2017-03-03 Sire Enfeg

http://p5js.org/怎么样？ – Microsmsm

我的回答有帮助吗？如果不是，请评论你还需要什么。 – Mobius

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

来源

2017-03-03 04:17:34 Mobius

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

回答

相关问题