Question

如何将绿色三角形朝向/看红色三角形的尖端？

    rotation: function() {
      enemy.angle = Math.atan2(player.y - enemy.y, player.x - enemy.x) * (180 / Math.PI);
    },

绿色三角形在敌人之下。我使用这个功能，但我可以说我做错了。

如果你能帮助解释你的所作所为以及你是如何做到的，我将非常感谢！

Answer 1

您需要将此行添加到enemy.tick函数

 enemy.angle =  Math.atan2(player.y - this.y, player.x - this.x);

<html>

  <head>
    <title>Black Friday</title>
  </head>

  <body>
    <style>


    </style>
    <canvas id="canvas" style="border:2px solid darkred" width="700" height="500"></canvas>
    <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var bounds = canvas.getBoundingClientRect();
      var mouseX = 0.0;
      var mouseY = 0.0;
      var pressingDown = false;
      var pressingUp = false;
      var pressingLeft = false;
      var pressingRight = false;

      var player = {
        x: 210,
        y: 250,
        radius: 17.5,
        angle: 0.0,
        tick: function() {
          this.angle = Math.atan2(mouseY - this.y, mouseX - this.x);
        },

        draw: function() {
          context.fillStyle = "darkred";
          context.strokeStyle = "black";
          context.translate(this.x, this.y);
          context.rotate(this.angle);
          context.beginPath();
          context.moveTo(this.radius, 0.0);
          context.lineTo(-0.5 * this.radius, 0.5 * this.radius);
          context.lineTo(-0.5 * this.radius, -0.5 * this.radius);
          context.lineTo(this.radius, 0.0);
          context.fill();
          context.stroke();
          context.rotate(-this.angle);
          context.translate(-this.x, -this.y);
        },

        updatePlayerPosition: function() {
          if (pressingRight)
            player.x += 1;
          if (pressingLeft)
            player.x -= 1;
          if (pressingDown)
            player.y += 1;
          if (pressingUp)
            player.y -= 1;
        }

      }

      var bullet = {
        x: player.x,
        y: player.y,
        dx: 0.0,
        dy: 0.0,
        radius: 5.0,

        tick: function() {
          this.x += this.dx;
          this.y += this.dy;

          if (this.x + this.radius < 0.0 || this.x - this.radius > canvas.width || this.y + this.radius < 0.0 || this.y - this.radius > canvas.height) {
            this.dx = 0.0;
            this.dy = 0.0;
          }
        },

        render: function() {
          context.fillStyle = "darkcyan";
          context.strokeStyle = "white";
          context.beginPath();
          context.arc(this.x, this.y, this.radius, 0.0, 2.0 * Math.PI, false);
          context.fill();
          context.stroke();
        }
      };
	
  	var enemy = {       
    		x: 200,
        y: 300,
        radius: 17.5,
        angle: 0.0,
        tick: function() {
         enemy.angle =  Math.atan2(player.y - this.y, player.x - this.x);
        },

        draw: function() {
          context.fillStyle = "Green";
          context.strokeStyle = "darkgreen";
          context.translate(this.x, this.y);
          context.rotate(this.angle);
          context.beginPath();
          context.moveTo(this.radius, 0.0);
          context.lineTo(-0.5 * this.radius, 0.5 * this.radius);
          context.lineTo(-0.5 * this.radius, -0.5 * this.radius);
          context.lineTo(this.radius, 0.0);
          context.fill();
          context.stroke();
          context.rotate(-this.angle);
          context.translate(-this.x, -this.y);
        }
        }





      function Refresh() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        bullet.render();
        bullet.tick();
        player.draw();
        player.tick();
        player.updatePlayerPosition();
        enemy.draw();
        enemy.tick();

      }
      

      setInterval(Refresh, 0)

      window.onmousemove = function(e) {
        mouseX = e.clientX - bounds.left;
        mouseY = e.clientY - bounds.top;
      }

      document.onkeydown = function(event) {
        if (event.keyCode === 83) //s
          pressingDown = true;
        else if (event.keyCode === 87) //w
          pressingUp = true;
        else if (event.keyCode === 65) //a
          pressingLeft = true;
        else if (event.keyCode === 68) //d
          pressingRight = true;
      }

      document.onkeyup = function(event) {
        if (event.keyCode === 83) //s
          pressingDown = false;
        else if (event.keyCode === 87) //w
          pressingUp = false;
        else if (event.keyCode === 65) //a
          pressingLeft = false;
        else if (event.keyCode === 68) //d
          pressingRight = false;
      }

      window.onmousedown = function(e) {
        // The mouse pos - the player pos gives a vector
        // that points from the player toward the mouse
        var x = mouseX - player.x;
        var y = mouseY - player.y;

        // Using pythagoras' theorm to find the distance (the length of the vector)
        var l = Math.sqrt(x * x + y * y);

        // Dividing by the distance gives a normalized vector whose length is 1
        x = x / l;
        y = y / l;

        // Reset bullet position
        bullet.x = player.x;
        bullet.y = player.y;

        // Get the bullet to travel towards the mouse pos with a new speed of 10.0 (you can change this)
        bullet.dx = x * 10.0;
        bullet.dy = y * 10.0;
      }

    </script>
  </body>

</html>

希望它有所帮助。

Javascript如何使对象面向播放器？

1 个答案: