Question

我正在尝试根据用户按下的箭头键在画布中移动图像，但即使按下箭头键，图像仍然保持不动。这是我的HTML代码。

<!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>

由于

注意：我对图像本身没有任何问题，我认为由于我对javascript的经验不足，我在脚本标记内的某处做了一些微不足道的错误，所以我需要你的帮助。

Answer 1

问题出在wrap()和updateKeys()函数：

        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

另外，你还没有定义变量，而且你混淆了不同箭头键的键码。

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

Answer 2

始终关注浏览器控制台是否存在错误。这样做会向您显示您的键盘代码列表中尚未定义K_UP。（K_UP也有错误的密钥代码）

您的wrap()功能需要稍微调整一下。见评论。

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

完整示例：https://jsfiddle.net/ok0jh0rf/7/

另请参阅：Using Chrome DevTools

为什么我的javascript键盘输入不起作用？

2 个答案: