SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Keypresse and releases

    In my code I want my image to move right when the right arrow key is pressed (which it already does) then to stop when you release it, also is their an easier way to write/remember the keyboard numbers?

    Code:
    const FPS = 30;
    var x = 0;
    var y = 0;
    var image = new Image();
    image.src = "jsplatformer1-smiley.jpg";
    var canvas = null;
    var context2D = null;
    var left = false
    var up = false
    right = false
    var down = false
    window.onload = init;
    
    function init()
    {
    	canvas = document.getElementById('canvas');
    	context2D = canvas.getContext('2d');
    	setInterval(draw, 1000 / FPS);
            document.addEventListener('keydown', draw, false);
    }
    
    function draw(event)
    {
    	context2D.clearRect(0, 0, canvas.width, canvas.height);
        	context2D.drawImage(image, x, y);
    
    	if (event.keyCode == 39) {
    	right=1;
    	}
    	if (right == true) {
    	x+=1
    	}	
    }

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    One way to keep track of keys that are down is to create a whole separate object for it:

    Code JavaScript:
    var isDown = {
        up: false,
        down: false,
        right: false,
        left: false
    };

    Then you can change those values to true or false on key up/down:

    Code JavaScript:
    var keyCodes = {
        37: 'left',
        38: 'up',
        39: 'right',
        40: 'down'
    };
     
    function keyCheck(e) {
        if (keyCodes[e.keyCode]) {
            isDown[keyCodes[e.keyCode]] = e.type === 'keydown' ? true : false;
        }
    }
     
    function init() {
        canvas = document.getElementById('canvas');
        context2D = canvas.getContext('2d');
        // note that there's no setInterval line here
        document.addEventListener('keydown', keyCheck, false);
        document.addEventListener('keyup', keyCheck, false);
    }

    But when it comes to actually moving the square on the canvas, you can go back to using setTimeout:

    Code JavaScript:
    function draw() {
        if (isDown.up || isDown.down) {
            y += isDown.up ? -1 : 1;
        }
        if (isDown.left || isDown.right) {
            x += isDown.left ? -1 : 1;
        }
        context2D.clearRect(0, 0, canvas.width, canvas.height);
        context2D.drawImage(image, x, y);
        setTimeout(draw, 1000 / FPS);
    }
    draw(); // note that we call it immediately

    That will constantly clear/redraw the square, even if its position hasn't changed, so you could improve that a little (if you wanted to) by only redrawing if the x/y values were changed.
    I'm the web overlord for Graphic Business Systems


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •