Question

这是我用于矩形船的JS画布代码。如果我注释掉switch语句，则该船可见。在取消注释switch语句时，船不显示。怎么了？

 var ship = function() {
     this.velocityX = 0;
     this.velocityY = 0;
     this.accelerationX = 0;
     this.accelerationY = 0;
     this.x = width / 2;
     this.y = height / 2;
     this.speed = 4;
     this.angle = 0;

     this.control = function() {
         context.save();
         context.translate(this.x, this.y);

         this.addEventListener("keydown", function(event) {
             switch (event.keyCode) {
                 case 36:
                     this.accelerationX = Math.cos(this.angle) * this.speed;
                     this.accelerationY = Math.sin(this.angle) * this.speed;
                     break;
                 case 38:
                     this.accelerationX = -Math.cos(this.angle) * this.speed;
                     this.accelerationY = -Math.sin(this.angle) * this.speed;
                     break;
                 case 37:
                     this.angle -= 0.5;
                     break;
                 case 40:
                     this.angle += 0.5;
                     break;
             }
         });

         context.rotate(this.angle);
         context.fillStyle = "rgb(255,255,255)";
         context.fillRect(0, 0, 20, 30);
         context.restore();
     };
 };

Answer 1

我使用你的代码来测试你的想法。该脚本独立工作，没有任何添加，但仍需要改进。也许我的一些更正对您有用：

<html>
<head>  

</head>
<body>
  <canvas id="canvas" style="border: 1px solid black;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var resistance = 0.8;
canvas.width = 400;
canvas.height = 400;

 var ship = function() {
     this.velocityX = 0;
     this.velocityY = 0;
     this.accelerationX = 0;
     this.accelerationY = 0;
     this.x = canvas.width / 2;
     this.y = canvas.height / 2;
     this.speed = 0.5;
     this.angle = 0;

     this.control = function() {
           context.clearRect(0,0,canvas.width,canvas.height);
        this.velocityX += this.accelerationX;
        this.velocityY += this.accelerationY;
      //  context.beginPath();
        context.save();
        context.translate(this.x, this.y);
        this.velocityX *= resistance;
        this.velocityY *= resistance;
        this.x += this.velocityX;
         this.y += this.velocityY;
         context.rotate(this.angle);
        // context.fillStyle = "rgb(255,255,255)";

         context.fillRect(0, 0, 30, 20);
         context.restore();
         this.accelerationX = 0;
         this.accelerationY = 0;
     };
 };

  var s = new ship();
  var keyMap = [];
    setInterval(function(){s.control();}, 1);
     setInterval(function(){move();}, 1);

document.onkeydown = keydown;
document.onkeyup = keyup;

function move()
{
    if(keyMap[38])
  {
                     s.accelerationX = Math.cos(s.angle) * s.speed;
                    s.accelerationY = Math.sin(s.angle) * s.speed;
  }
    if(keyMap[40])
  {

                     s.accelerationX = -Math.cos(s.angle) * s.speed;
                     s.accelerationY = -Math.sin(s.angle) * s.speed;
  }              
     if(keyMap[37])
  {
                     s.angle -= 0.05;
  }                 
     if(keyMap[39])
  {
                    s.angle += 0.05;
  }
}

function keydown(e)
{
    keyMap[e.keyCode] = true;
}

function keyup(e)
{
    keyMap[e.keyCode] = false;
}

</script>
</body>
</html>

JavaScript画布代码不起作用

1 个答案: