Question

我正在尝试创建一个简单的HTML5 Canvas足球游戏。游戏有三个选项，玩家选择左，右或中心来踢球，守门员是随机的，将向左，向右潜水或留在中心。我希望用户按左，右或上箭头键来触发玩家踢球，但我无法识别按下箭头键的代码。我尝试了不同的键，即返回键。

function canvasApp(){   

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //Other Var's

        document.onkeypress = function doKeyDown( e ) {
            var key = e.keyCode;
            if ( key == 37  ){
                userChoice = key;
            } else if (key == 38){
                userChoice = key;
            } else if (key == 39){
                userChoice = key;
            }
        }

        function draw() {
            ctx.clearRect( 0, 0, canvas.width, canvas.height );             
            //------------------------------------------------
            //Player shoots left
            if ( userChoice == 37 ){
                //More code
            //------------------------------------------------
            //Player shoots right
            } else if ( userChoice == 39 ){
                //More code
            //------------------------------------------------
            //Player shoots centre
            } else if ( userChoice == 38 ) {
                //More code
            }

            //------------------------------------------------
        }

        function gameLoop(){
            window.setTimeout(gameLoop, framerate);
            draw()
        }
        gameLoop();
    }

    document.onclick = function( e ){
        window.clearTimeout();
    }

如果您需要查看完整的代码，请告诉我，我会将链接添加到JSFiddle。

Answer 1

您正在触发错误的事件：甚至使用 keydown ：查看此页面：http://help.dottoro.com/ljlkwans.php

以下是带有jquery的代码段：如果您使用 keypress 事件，它将无效。

<html>
    <head>
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    </head>
    <body>
    </body>
    <script type="text/javascript">
    $(document).ready(function(){

        $(document).keydown(function(e){
            var key = e.keyCode;
            if ( key == 37  ){
                console.log("left");
            } else if (key == 38){
                console.log("center");
            } else if (key == 39){
                console.log("right");
            }
        });
    });
    </script>
</html>

html5画布。 document.onkeypress箭头键不起作用

1 个答案: