Canvas Bootcamp 16 – Keyboard Control and Movement



Lesson Code: http://www.developphp.com/video/JavaScript/Keyboard-Control-and-Movement
In this exercise you can learn to apply custom keyboard controls to canvas applications and games. We can listen for the keydown and keyup events of the document which returns information to us about what key the user is pressing on their keyboard.

source

17 thoughts on “Canvas Bootcamp 16 – Keyboard Control and Movement”

  1. Hey Adam I have a question:
    How would you go about using an image instead a generated block as the player?
    In my game I have it set that the picture renders when you click on a certain part of a background image; the background image changes and the player image renders. But i can't seem to get it to move with your code or other code I've looked up online.
    Is there a method of doing this with your coding? 
    Please respond as soon as you can — it would be much appreciated.

  2. Nice Adam!
    For smoother control, change the Player's render function:

    this.render = function(){
       if(key_press['A'])
    this.x -= dist;
       if(key_press['S'])
    this.y += dist;
       if(key_press['D'])
    this.x += dist;
       if(key_press['W'])
    this.y -= dist;
       ctx.fillRect(this.x,this.y,this.w,this.h);
    }

    And replace the keydown listener with these lines:

        var key_press = new Array();
        document.addEventListener('keydown', function(event){
    key_press[String.fromCharCode(event.keyCode)] = true;
        });
        document.addEventListener('keyup', function(event){
    key_press[String.fromCharCode(event.keyCode)] = false;
        });

    This way, the player can move in multiple directions (diagonally), and it happens instantly.  Now I wanna figure out acceleration…

  3. HOVER HOVER HOVER HOVER…. Adam can you show us if it is possible to have a bit that will show up using javascript if you hover over it… like if you had a square and when you hover over the square, some information in a box will appear on the canvas tag thing please :)))) <— Come on if not for me for the 4 chinned smiley face 😀

  4. Hello Adam, thanks for this tutorial. How could I set the origin point for scaling the background to the middle of the site or the canvas? It's for flying into the stars… Greetings.

  5. sorry for the offtopic but i have a question.How do i color every second character of a string into red in javascript? for example: var a="This is a string".I want the first, the third character and so on to be colored in red.I would appreciate your help…thx

  6. this movement is unreliable because the user can essentially tap a direction repeatedly really fast and the code won't be able to control the speed. The smoother way to do this is for example when the user presses right, to set a variable called right in the rectObj to true on keyDown and false on keyUp. Then the animate object will check if any direction is true and decrement or increment the x or y coordinate and move the object. This way it doesn't matter how fast the user taps the key, the speed will be no faster than just holding it down.

  7. I know i have complimented you… but you are awesome.. honestly… i have never coded before 2 months ago… and now with your help i have a fully working site that has features including java ajax, pagination cart, dropdowns, extensive css and features that experts would have, you are one of a kind and hope you never stop making awesome videos. Thankyou so much for all of your help you are awesome 

Leave a Reply

Your email address will not be published. Required fields are marked *