JS не работает в FireFox, но работает в Chrome & IE

Question

JS не работает в FireFox, но работает в Chrome & IE

0

Я знаю, что есть такие вопросы, но я все еще не могу найти исправление, я просмотрел консоль и ничего не вижу. Есть два изображения, одно из которых должно появляться в заданных координатах, а другое, которое следует за мышью, то, что означает "следить за мышью", не отображается, а второе.

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);
}
}

Index.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>

JsFiddle

Chris W. 22 сен. 2013, в 13:15

Источник

Теги:

javascript

html

css

html5

1 ответ

Ещё вопросы

Chris W. · Answer 1 · 2013-09-23T01-13-00.000Z

(Исходя из этого кода в указанной вами ссылке).

В вашей функции mouseMovement вы используете mouseEvent.offsetX и mouseEvent.offsetY, чтобы получить позицию игрока, но Firefox, к сожалению, не поддерживает эти свойства. К сожалению, IIRC, единственное, что работает в кросс-браузере, - это получить положение холста и вычесть его из свойств page pageX/pageY. Вы можете использовать метод canvas getBoundingClientRect(), чтобы найти его позицию на странице.

Это пример версии функции, которая должна работать и в Firefox:

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

    userImageX = mouseEvent.pageX - canvasPosition.left;
    userImageY = mouseEvent.pageY - canvasPosition.top;
}