Местоположение местоположения Javascript Mouse?

Question

Im, пытающийся построить игру, цель состоит в том, чтобы ударить по экранам, которые выходят из воды, нажимая на них, я пытаюсь получить струйку воды из устья статуй (которая была вроде бы успешной и могла можно увидеть здесь: http://mckenziedave.co.uk/client_files/html5_game/), однако это немного, я считаю, что это связано с тем, что игра находится в игровом экране (div id = "gamefiled"). Как я могу принять это в фактор в сценарии JS (скрипт ниже)

var flame, 
    sourceX = 780, 
    sourceY = 215; 

window.onload = function() { 
    flame = document.getElementById('flame'); 
    game.addEventListener('click', function(e) { 
     var targetX = e.pageX, 
      targetY = e.pageY, 
      deltaX = targetX - sourceX, 
      deltaY = targetY - sourceY, 
      rad = Math.atan2(deltaY, deltaX), 
      deg = rad * (180/Math.PI), 
      length = Math.sqrt(deltaX*deltaX+deltaY*deltaY); 

     fire(deg,length); 
    }, false); 
}; 

function fire(deg,length) { 
    flame.style.opacity = 1; 
    flame.style.transform = 'rotate(' + deg + 'deg)' 
    flame.style.width = length + 'px'; 
    setTimeout(function() { 
     flame.style.opacity = 0; 
    },780); 
}; 

Приветствие

Answer 1

Вы должны определить смещение сНа ид = «gamefiled», относительно окна браузера в вашем нажатии события и вычесть его из положения мыши.

Answer 2

Я пробовал играть в вашу игру, и я нажал несколько крабов, но не ударил. Вероятно, это математическая ошибка, так как игроки играют в игру на разных разрешениях на разных устройствах. Не говоря уже о проблеме с размером пикселей, где ПК, планшеты и телефоны не имеют универсальных размеров пикселей.

Вы пробовали получить координаты, как это:

http://www.w3schools.com/jsref/event_clientx.asp

var x = event.clientX; 
var y = event.clientY; 

Для рисования линий (точные) я бы рекомендовал что-то вроде алгоритма Bresenham, но это только мое мнение.

Вы также можете попробовать гораздо более простое решение, как это:

http://www.w3schools.com/tags/canvas_lineto.asp

Вы можете использовать холст для рисования линий, как так:

function drawLine (x_start, y_start, x_end, y_end) { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.moveTo(x_start, y_start); 
    ctx.lineTo(x_end, y_end); 
    //set line width and color 
    ctx.lineWidth = 10; 
    ctx.strokeStyle = '#000'; 
    ctx.stroke(); 
} 

Я переписал это решение от w3schools.com ,