Question

我试图建立一个游戏的目的是通过点击它们来击中从水中出来的装饰物，我一直试图从一个雕像口中取出水射流（这有点成功和可以在这里看到：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

您必须确定div id =＆＃34; gamefiled＆＃34;相对于点击事件中的浏览器窗口的偏移量，并从鼠标位置减去它。

Answer 2

我试过玩你的游戏，我点击了一些螃蟹，但没有点击。这可能是一个数学错误，因为玩家在不同设备上以不同的分辨率玩游戏。更不用说像素尺寸问题，其中PC，平板电脑和手机不具备通用像素尺寸。

您是否尝试过这样的坐标：

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重写了这个解决方案。

Javascript鼠标位置？

2 个答案: