Search code examples
javascripthtmlhtml5-canvastranslate-animation

JavaScript canvas code not working

Here is my JS canvas code for a rectangular ship. If I comment out the switch statement, the ship is visible. On uncommenting the switch statement, the ship doesn't show. What's wrong? 

 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();
     };
 };
Solution

  • I made that code using yours to test your ideas. That script works solo without any addidtions but still needs improvements. Maybe some of my corrections will be useful for you:

    <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>