Javascript JS-射击-鼠标

我遇到了一个问题。我将感谢任何帮助

我试着从一个玩家的位置射击到鼠标点击的位置。代码不会给我任何错误，根据我的逻辑，它应该可以工作，但不会

它创建了bullet对象，但仅此而已

//Bullets
   function bullet(id, color, size, speed, x, y, eX, eY) {
          this.id = id;           
          this.color = color;
          this.size = size;
          this.x = x;
          this.y = y;
          this.eX = eX;
          this.eY = eY;
          this.velocityX;
          this.velocityY;
          this.speed = speed;
      }

      var bulletList = []; 

      function addBullet(color, bsize, bspeed, x, y, eX, eY) {
          bulletList[bulletId] = new bullet(bulletId, color, bsize, bspeed, x, y, eX, eY);
          bulletId += 1;
      }

      function updateBullet(bullet, player)
      {
          var dx = (bullet.eX - player.x);
          var dy = (bullet.eY - player.y);
          var mag = Math.sqrt(dx * dx + dy * dy);              
          bullet.velocityX = (dx / mag) * speed;
          bullet.velocityY = (dy / mag) * speed;
          bullet.x += bullet.velocityX;
          bullet.y += bullet.velocityY;
      }

      // Add event listener for `click` events.
      canvas.onmousedown = function(e) {
          addBullet("black", 10, 2, playerList[0].x, playerList[0].y, e.x, e.y);
      }  
    //draw bullets (taken from drawFrame function)
                  $.each(bulletList, function (index, bullet) {  
                     updateBullet(bullet, playerList[0]);
                     ctx.fillStyle = bullet.color;
                     ctx.fillRect(bullet.x, bullet.y, bullet.size, bullet.size);
                  });  

---

由于您已经在使用jQuery，请更改行

canvas.onmousedown = function(e) {
    addBullet("black", 10, 2, playerList[0].x, playerList[0].y, e.x, e.y);
}  

到

并考虑将所有这些输入移动到PARAM对象。

另外：永远不要在“如果”中定义你的程序，而是取消“如果不是”

工作版本：

---

编辑：如果JSFIDLE不起作用，您可能会遇到浏览器/noscripts xss guard，使用xss->unsafe reload（在firefox noscript中）应该可以工作。

Cna您在jsFIDLE.com上提供了该问题的演示？以下是全部代码：但出于某种原因，它没有在其中绘制任何内容。对我来说有效。你使用了什么浏览器？尝试了ff和chrome，没有为我绘制任何东西（jsfidle），你看到在那里绘制的项目符号了吗？谢谢，但是为什么它不能与js事件一起工作？但与jquery的特性（clientX/Y）相比，jquery解决方案更优雅、更安全，跨浏览器也更规范。另一个注意事项：如果您不确定对象的内容，请执行console.log（my_对象），并使用chrome开发控制台或firebug查看结果。

$(canvas).mousedown(function (e) {
    addBullet("black", 10, 2, playerList[0].x, playerList[0].y, e.clientX, e.clientY);
});