CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
John Mike
John Mike

Reputation: 147

Why is my keyboard input in javascript not working?

I am trying to move an image in canvas based on arrow keys pressed by the user, but the image stays still without moving even if I press the arrow keys. Here is my html code.

<!DOCTYPE html>
<html>
    <head>
        <title>Keyboard Animation Demo</title>
        <meta  charset="UTF-8"/>
        <style type="text/css">
            .hidden{
                display: none;
            }
        </style>
        <script type="text/javascript">
            var drawing;
            var con;
            var gokupic;
            CANV_HEIGHT = 200;
            CANV_WIDTH = 200;
            SPR_HEIGHT = 50;
            SPR_WIDTH = 40;
            var x = 0;
            var y = 0;
            var dx = 10;
            var dy = 7;
            var currentKey;

            function init(){
                drawing = document.getElementById("drawing");
                con = drawing.getContext("2d");
                gokupic = document.getElementById("goku");
                document.onkeydown = updateKeys;
                setInterval(draw, 100);
            }

            function updateKeys(e){
                currentKey = e.keyCode;

                if(currentKey == K_LEFT){
                    dx = -5;
                }
                if(currentKey == K_RIGHT){
                    dx = 5;
                }
                if(currentKey == K_TOP){
                    dy = -5;
                }
                if(currentKey == K_DOWN){
                    dy = 5;
                }
                if(currentKey == K_SPACE){
                    dx = 0;
                    dy = 0;
                }
            }//end updateKeys

            function draw(){
                //clear bg
                con.clearRect(0,0,200,200);

                currentKey = null;

                //move the element
                x += dx;
                y += dy;

                //check for boundaries
                wrap();

                //draw the image
                con.drawImage(gokupic, x,y,SPR_WIDTH, SPR_HEIGHT);

                //draw a rectangle
                con.strokeStyle = "red";
                con.lineWidth = 5;
                con.strokeRect(0,0,CANV_WIDTH,CANV_HEIGHT);
            }//end draw

            function wrap(){
                if(x > CANV_WIDTH){
                    x = 0;
                }
                if(x < CANV_WIDTH){
                    x = 0;
                }
                if(y > CANV_HEIGHT){
                    y = 0;
                }
                if(y < CANV_HEIGHT){
                    y = 0;
                }
            }//end wrap

            //keyboard constans
            K_LEFT = 37; K_RIGHT = 39; K_UP = 39; K_DOWN = 40; K_SPACE = 32;
        </script>
    </head>
    <body onload = "init()">
        <h1>Keyboard Motion</h1>
        <img class = "hidden" id = "goku" src = "goku.jpg" alt = "goku pic" />
        <canvas id = "drawing" height=200 width=200>Canvas not supported</canvas>
        <p>Use arrow keys to move image, space bar to stop the motion.</p>
    </body>
</html>

Thanks

Note: I have no problems with the image itself, I assume I am doing some trivial mistake somewhere inside script tag due to my inexperience with javascript, so I need your help.

Upvotes: 0

Views: 1583

Answers (2)

user6360214
user6360214

Reputation:

The problem is in wrap() and updateKeys() function:

        function updateKeys(e){
            currentKey = e.keyCode;
            if(currentKey == K_LEFT){
                dx = -5;
                dy = 0;
            }
            if(currentKey == K_RIGHT){
                dx = 5;
                dy = 0;
            }
            if(currentKey == K_UP){
                dy = -5;
                dx = 0;
            }
            if(currentKey == K_DOWN){
                dy = 5;
                dx = 0;
            }
            if(currentKey == K_SPACE){
                dy = 0;
                dx = 0;
            }
        }//end updateKeys

        function wrap(){
            if(x > CANV_WIDTH){
                x = 0;
            }
            if(x < 0){ // this one should be 0, right?
                x = 0;
            }
            if(y > CANV_HEIGHT){
                y = 0;
            }
            if(y < 0){ // this one should be 0, right?
                y = 0;
            }
        }//end wrap

Plus, you haven't DEFINED the variables, and you mixed up the keycode of different arrow keys.

        //keyboard constans
        var K_LEFT = 37, K_RIGHT = 39, K_UP = 38, K_DOWN = 40, K_SPACE = 32;

Upvotes: 1

cyber_dave
cyber_dave

Reputation: 2029

Always pay attention to the browser console for errors. Doing so would reveal to you that K_UP has not been defined in the list of your keyboard codes. (K_UP also has the wrong key code for its direction)

Your wrap() function needs a little tweak. See comments.

function wrap(){

  if(x > CANV_WIDTH) {
    x = 0;
  }
  if(x < 0) { // Reset `x` to 0 when it's less than 0
    x = 0;
  }
  if(y > CANV_HEIGHT) {
    y = 0;
  }
  if(y < 0) { // Reset `y` to 0 when it's less than 0
    y = 0;
  }
}//end wrap

Full example: https://jsfiddle.net/ok0jh0rf/7/

See also: Using Chrome DevTools

Upvotes: 0

Related Questions