Canvas diagonal movement

Question

I'm trying to put together a simple "game" in HTML5. However I can't get diagonal movement working. The "diagonal movement" only works when the two buttons are pressed at exactly the same time. Even then it moves once. Here's the code:

    // Getting canvas, and canvas context
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    //Keymap, later passed as method parameter
    var map = [false,false,false,false];
    // Top, Right, Bottom, Left


    // Function for resetting keymap
    var resetMap = function() {
       for(i=0;i<map.length;i++) {
           map[i] = false;
       };
    };


    //Function for clearing the screen before drawing
    var clrScrn = function() {
        ctx.clearRect(0,0,500,500);  
    };

    // The player character
    var character = function() {
        this.x = 50;
        this.y = 50;
        this.h = 50;
        this.w = 50;
    };

        // Draw method of the character class
        character.prototype.draw = function() {
          ctx.fillRect(this.x,this.y,this.h,this.w);  
        };

        // The move method of the character class
        character.prototype.move = function(map) {


            if(map[0] === true) {
                if(map[1] == true) {
                    this.x+=5;
                    this.y-=5;
                    console.log("Pressed at the same time");
                }
                else {
                    this.y-=5;
                }
            }

            else if(map[1] === true) {
                this.x+=5;
            }              
            else if(map[2] === true) {
                this.y+=5;
            }              
            else if(map[3] === true) {
                this.x-=5;
            }
        };


    //Making a new character
    var player = new character();
        player.draw();


   // Drawing everything on screen
   var render = function() {

       clrScrn(); 
       player.move(map);
       player.draw();
       resetMap();

       requestAnimFrame(render);
   };

    //Calling  the render function
   render();

    //Binding event listener to window,checking key down, likely the source of the problem
    window.addEventListener("keydown",function(e){


        if(e.keyCode == 38 && e.keyCode == 39) {
            map[0] = true;
            map[1] = true;
        }

        else if(e.keyCode == 38) {
            map[0] = true;
         }
        if(e.keyCode == 39) {
            map[1] = true;
         }
        if(e.keyCode == 40) {
            map[2] = true;
         }
        if(e.keyCode == 37) {
            map[3] = true;
         }

         console.log(e.keyCode);

    },false);


    //Binding event listener to key up
    window.addEventListener("keyup",function(e){
        resetMap();
    },false);

score 0 · Accepted Answer · answered Sep 28 '14 at 14:51

In your render function:

   player.move(map); // you move the player
   player.draw();    // you draw the player
   resetMap();       // you forget all pressed keys

The resetMap() is the reason you need to press the keys again in order to move just one more step.

Note that horizontal and vertical motions may accidentally work due to keyboard repeat when a key is pressed for a long time. But you shouldn't depend on key repeats for a game. You should detect key down and key up individually for individual keys in order to figure out if a key is pressed or not.

Geez, you're right. What a stupid mistake. Thanks! – user2941726 Sep 28 '14 at 14:54 — user2941726, Sep 28 '14 at 14:54

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

try looking at: JavaScript multiple keys pressed at once

and then re-work your if/else logic a little bit.

edited May 23 '17 at 12:13

Community

1
1

answered Sep 28 '14 at 14:59

user1269942

3,772
23
33

Thanks for the suggestion, though I've found that thread before. The current if else logic was only there to demonstrate the problem. – user2941726 Sep 28 '14 at 15:03

Canvas diagonal movement

2 Answers2