JavaScriptで虫をクリックすると加点するゲームを作っております。画像を挿入する前にcontext.arcでサークルを描いてクリックした時はTrueが帰ってきておりましたが、サークルをImageに変えると全てがFalseで返ってきてきてしまいます。
*変えた部分は、虫の画像とBackgroud画像を挿入しました。
Trueを返したいBoolean ValueはisOnCircleです。
###常にFalseが返ってきてしまう(虫の画像を挿入した場合)
var Bug = (function () { function Bug() { } return Bug; }()); var jumpInterval; var interval = 4000; var bug = new Bug(); var canvas = document.getElementById('canvas'); canvas.width =727 canvas.height = 483; var context = canvas.getContext('2d'); var background = new Image(); background.src = "images/lawn.jpg"; background.onload = function () { context.drawImage(background, 0, 0); } function handleClick(evt) { console.log(evt.x + ',' + evt.y); var x = evt.x - 100; var y = evt.y - 100; // (x - center_x)^2 + (y - center_y)^2 < radius^2 var isOnCircle = Math.pow(x - bug.x, 2) + Math.pow(y - bug.y, 2) < Math.pow(bug.r, 2); console.log(isOnCircle); if (interval > 500) { interval -= 300; } else { interval = 500; } console.log(interval); } function jump() { bug.x = ((Math.random() * 10324897) % 500) + 1; bug.y = ((Math.random() * 10324897) % 500) + 1; bug.r = 32; context.clearRect(0, 0, canvas.width, canvas.height); var background = new Image(); background.src = "images/lawn.jpg"; background.onload = function () { context.drawImage(background, 0, 0); } console.log(bug.x); console.log(bug.y); context.beginPath(); var bugImage = new Image(); bugImage.src = "images/bug.PNG"; bugImage.onload = function () { context.drawImage(bugImage, bug.x, bug.y); } context.stroke(); clearInterval(jumpInterval); jumpInterval = setInterval(jump, interval); } jumpInterval = setInterval(jump, interval); canvas.addEventListener("click", handleClick);
###クリックするとTrueがきちんと返ってくる(サークルで試した場合)
var Bug = (function () { function Bug() { } return Bug; }()); var jumpInterval; var interval = 4000; var bug = new Bug(); var canvas = document.getElementById('canvas'); canvas.width =727 canvas.height = 483; var context = canvas.getContext('2d'); function handleClick(evt) { console.log(evt.x + ',' + evt.y); var x = evt.x - 100; var y = evt.y - 100; //(x - center_x)^2 + (y - center_y)^2 < radius^2 var isOnCircle = Math.pow(x - bug.x, 2) + Math.pow(y - bug.y, 2) < Math.pow(bug.r, 2); console.log(isOnCircle); if (interval > 500) { interval -= 300; } else { interval = 500; } console.log(interval); } function jump() { bug.x = ((Math.random() * 10324897) % 500) + 1; bug.y = ((Math.random() * 10324897) % 500) + 1; bug.r = 32; context.clearRect(0, 0, canvas.width, canvas.height); console.log(bug.x); console.log(bug.y); context.beginPath(); context.arc(bug.x, bug.y, bug.r, 0, 2 * Math.PI); context.stroke(); clearInterval(jumpInterval); jumpInterval = setInterval(jump, interval); } jumpInterval = setInterval(jump, interval); canvas.addEventListener("click", handleClick);
###補足情報(言語/FW/ツール等のバージョンなど)
ちなみにr(半径)の32はちゃんと虫の画像を計って得た値です。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/01 02:12