JavaScript canvas code not working

Question

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

JSHint only detect syntax error, it will not detect any runtime errors. — Mox
– Mox, Commented Apr 1, 2017 at 9:21
anyway you sure your variable, angle,x and y are defined? this.angle != angle — Mox
– Mox, Commented Apr 1, 2017 at 9:22
Okay, I changed it to context.rotate(this.angle) and uncommenting that line now doesn't cause a problem. Changed x and y too. — udbhavs
– udbhavs, Commented Apr 1, 2017 at 9:26
Okay, I was just missing a bunch of this keywords. I'll update the code, there still seems to be a problem. — udbhavs
– udbhavs, Commented Apr 1, 2017 at 9:31
To me, it's looking like you need a better understanding of the keyword this. — StackSlave
– StackSlave, Commented Apr 1, 2017 at 9:32

5ka · Accepted Answer · 2017-04-01 10:35:54Z

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>

so are the last two functions keydown and keyup called automatically?
Yes. They are assigned to events: document.onkeydown and document.onkeyup

Collectives™ on Stack Overflow

JavaScript canvas code not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related