0

このような質問があることは知っていますが、まだ修正を見つけることができません。コンソールを調べましたが、何も表示されません。2 つの画像があり、1 つは設定された座標に表示される必要があり、もう 1 つはマウスに追従するものです。

Main.js

/**
* Created with JetBrains WebStorm.
* User: Script47
* Date: 22/09/13
* Time: 00:54
*/

function drawAvatars() {

// Create variable for the canvas & create a new object for image
var gameCanvas = document.getElementById("gameCanvas");
var userImage = new Image();

// The source of the images
userImage.src = ("Images/userImage.png");

// Create an event listener then call function redrawAvatar
gameCanvas.addEventListener("mousemove", redrawAvatar);
}

function redrawAvatar(mouseEvent) {

var gameCanvas = document.getElementById("gameCanvas");
var userImage = new Image();
var enemyImage = new Image();
var score = 0;

userImage.src = ("Images/userImage.png");
enemyImage.src = ("Images/enemyImage.png");

// Erase canvas sort of refresh, then re-draw image following the coordinates of the mouse in the canvas
gameCanvas.width = 400;
gameCanvas.getContext("2d").drawImage(userImage, mouseEvent.offsetX, mouseEvent.offsetY);
gameCanvas.getContext("2d").drawImage(enemyImage, 150, 150);

// Simple hit detection to see if user image hits enemy image
if (mouseEvent.offsetX > 130 && mouseEvent.offsetX < 175 && mouseEvent.offsetY > 130 && mouseEvent.offsetY < 175) {
    score++;
    alert("You hit the enemy!\n You score is: " +score);
}
}

索引.html

<!DOCTYPE html>
<html>
<head>
<title>Avoid Me | Game</title>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<script src="JS/Main.js"></script>
</head>
<body>

<br/>

<center><h3>Avoid Me!</h3>

<br/>
<br/>

<canvas id="gameCanvas" height="300" width="400" onclick="drawAvatars();">
    <p><strong>Notice:</strong> Browser does not support canvas!</p>
</canvas>
</center>

</body>
</html>

Jsフィドル

4

1 に答える 1

0

（これは、提供したリンクのコードに基づいています。）

mouseMovement 関数では、mouseEvent.offsetX と mouseEvent.offsetY を使用してプレイヤーの位置を取得しますが、残念ながら Firefox はこれらのプロパティをサポートしていません。残念ながら、IIRC では、クロス ブラウザーで動作する唯一の方法は、キャンバスの位置を取得し、イベントの pageX/pageY プロパティから差し引くことです。キャンバスの getBoundingClientRect() メソッドを使用して、ページ上の位置を見つけることができます。

これは、Firefox でも機能する関数のバージョンの例です。

function mouseMovement(mouseEvent) {
    var canvasPosition = gameCanvas.getBoundingClientRect();

    userImageX = mouseEvent.pageX - canvasPosition.left;
    userImageY = mouseEvent.pageY - canvasPosition.top;
}
于 2013-09-23T03:27:04.783 に答える