2017-03-03 22 views
-2

基本的には、キャンバスに円を描き、できるだけ早くクリックしなければならないゲームを作成しようとしています。円は、キャンバス上でランダムに生成され、特定の半径を持つ必要があります。ユーザーがサークルをクリックすると、サークルをクリックするのに要した時間(少ない時間=より多くのポイント)に基づいてポイントが与えられます。ユーザーがサークルをクリックすると、それが消え、キャンバスのどこかに別のサークルがランダムに生成され、ユーザーはサークル全体がクリックされるまでこれを続けます。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>

+0

何についてhttp://p5js.org/? – Microsmsm

+0

私の回答は役に立ちますか?そうでない場合は、他に必要なものについてコメントしてください。 – Mobius

答えて

0

円は、実際のDOM要素ではありませんので、あなたはキャンバス上clickイベントをリッスンする必要があり、かつ上screenXscreenYを比較しますクリックイベントを問題の円のキャンバス座標に変換します。画面に対してキャンバスのオフセットを追加することを忘れないでください。また、クリックが円の内側にあるかどうかを手動で計算する必要があります。

関連する問題