Question

我正在尝试让我的inputhandler在Javascript中工作。什么

在我的Game.update中，我目前有这段代码：

this.Update = function() {
    if (input.GetMousePressed()) {
       console.log(input.GetMousePosition());            
    } 
}

这是我的输入处理程序：

function InputHandler(canvas) {
    this.canvas = canvas;
    this.mousePressed = false;
    this.mouseDown = false;
    this.mousePosition = new Position(0, 0);

this.GetMousePosition = function() {
    return this.mousePosition;
}

this.SetMousePosition = function(event) {
    var rect = this.canvas.getBoundingClientRect();
    this.mousePosition = new Position(event.clientX - rect.left, event.clientY - rect.top);
}

this.GetMousePressed = function() {
    return this.mousePressed;
}

this.canvas.onmousedown = function(event) {
    input.mouseDown = true;
    input.SetMousePosition(event);
}

this.canvas.onclick = function(event) {
    input.mouseClicked = true;
    input.SetMousePosition(event);
}


window.onmouseup = function(event) {
    if (input.mouseDown == true) {
        input.mousePressed = true;
        input.mouseDown = false;            
    }
}

第一个问题是我不知道如何处理mousePressed并将其设置为false。现在它永远存在。

我对Javascript很陌生，我很感谢任何可以使这个更好或更清晰的代码的改变，或者我正在做的是不好的做法。

我正在使用addEventListener进行正常的按键操作，也许我应该这样做？

Answer 1

不确定为什么需要mousepressed / mouseup和click个事件。成功的按下/上升和click之间的唯一区别是，点击目标应该是相同的元素。

所以我要么使用第一个选项，要么使用最后一个选项但不能同时使用。

您的mousePressed标记设置为true，因为一旦您按下鼠标，它就会被赋予真值。您需要在某个时候将其重置为false。

通常，您甚至不需要此标记，因为您在mousepressed事件中触发了所需的任何功能。不确定为什么要保存这些信息，你在其他地方使用它吗？

另外，使用addEventListener会更好。

Answer 2

＆＃13;

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      body {
        background-color: black;
      }
      
      canvas {
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        border: solid 1px white;
        border-radius: 10px;
      }
    </style>
  </head>
  
  <body>
    <canvas id="canvas"></canvas>
    <script type="application/javascript">
    
    var imageWidth = 180;
    var imageHeight = 160;
    var canvas = null;
    var ctx = null;
    
    var mouseDown = false;
    var mouseX = 0;
    var mouseY = 0;
    var bounds = null;
    
    function canvas_onmousedown(e) {
      mouseDown = true;
    }
    
    function canvas_onmousemove(e) {
      if (mouseDown) {
        mouseX = e.clientX - bounds.left;
        mouseY = e.clientY - bounds.top;
      }
    }
    
    function canvas_onmouseup(e) {
      mouseDown = false;
    }
    
    function loop() {
      ctx.fillStyle = "gray";
      ctx.fillRect(0,0,imageWidth,imageHeight);
      
      if (mouseDown) {
        ctx.fillStyle = "yellow";
      } else {
        ctx.fillStyle = "black";
      }
      
      ctx.fillRect(mouseX - 25,mouseY - 25,50,50);
      
      requestAnimationFrame(loop);
    }
    
    window.onload = function() {
      canvas = document.getElementById("canvas");
      canvas.width = imageWidth;
      canvas.height = imageHeight;
      canvas.onmousedown = canvas_onmousedown;
      canvas.onmousemove = canvas_onmousemove;
      canvas.onmouseup = canvas_onmouseup;
      
      ctx = canvas.getContext("2d");
      bounds = canvas.getBoundingClientRect();
      
      requestAnimationFrame(loop);
    }
    
    </script>
  </body>
</html>

＆＃13;

Javascript帮助处理画布中的鼠标点击

2 个答案: