html5畫布。 document.onkeypress箭頭鍵不起作用

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 個解決方案

解決方案1
1 已采納 2014-06-03 10:23:52

html5畫布。 document.onkeypress箭頭鍵不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2014-06-03 10:23:52

解決方案1
1 已采納 2014-06-03 10:23:52