Question

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>Snake!</title>
</head>

<body>
    <p id="lol"></p>
    <p id="change"></p>
    <script>
        var tableau = new Array(21);

        var direction = [0, 0];

        var word = "MERCI";
        var indice = 1;
        var candy = new Array(2);

        candy[0] = Math.floor(Math.random() * 19) + 1;
        candy[1] = Math.floor(Math.random() * 19) + 1;

        var snake = [
            [8, 8]
        ];

        function full_array() {
            for (var x = 0; x < 21; x++)
                tableau[x] = new Array(20);

        }

        full_array();

        function full_tab() {

            for (var x = 0; x < 20; x++)
                tableau[0][x] = 1;
            for (var y = 1; y < 20; y++) {
                tableau[y][0] = 1;
                for (var x = 1; x < 20; x++) {
                    tableau[y][x] = '*';
                }
                tableau[y][20] = 1;
            }
            for (var x = 0; x < 20; x++)
                tableau[20][x] = 1;


            for (var i = 0; i < snake.length; i++) {
                tableau[snake[i][0]][snake[i][1]] = word[(i + word.length) % word.length];
            }

            tableau[candy[0]][candy[1]] = word[indice];
        }

        function aff_tab() {
            var tab = '';
            for (var i = 0; i < 21; i++)
                tab = tab + tableau[i].toString() + "<br/>";
            document.getElementById("lol").innerHTML = tab;
        }

        document.getElementById("change").innerHTML;


        function move_snake() {

            var sx, sy;
            var sav = [snake[snake.length - 1][0], snake[snake.length - 1][1]];
            for (var i = snake.length - 1; i > 0; i--) {
                sx = snake[i - 1][1];
                sy = snake[i - 1][0];
                snake[i][0] = sy;
                snake[i][1] = sx;
            }

            snake[0][0] += direction[0];
            snake[0][1] += direction[1];
            if (tableau[snake[0][0]][snake[0][1]] == 1) {
                restart_game();
            }

            full_tab();
            aff_tab();
            if (snake[0][0] == candy[0] && snake[0][1] == candy[1]) {

                add_candy();
                indice++;
                snake.push(sav);
                if (indice == word.length)
                    indice = 0;
            }

        }

        function restart_game() {
            clearInterval(timerID);
            snake = [
                [8, 8]
            ];
            direction = [0, 0];
            indice = 1;
            add_candy();
            full_tab();
            timerID = setInterval(function() {
                move_snake();
            }, 300);
        }

        function add_candy() {
            candy[0] = Math.floor(Math.random() * 19) + 1;
            candy[1] = Math.floor(Math.random() * 19) + 1;
        }

        var timerID = setInterval(function() {
            move_snake();
        }, 300);

        var game = document.getElementById('lol');
        game.addEventListener('keydown', function(e) {

                if (e.keyCode == 37)
                    direction = [0, -1];
                if (e.keyCode == 38)
                    direction = [-1, 0];
                if (e.keyCode == 39)
                    direction = [0, 1];
                if (e.keyCode == 40)
                    direction = [1, 0];

            }, false

        );
    </script>

</body>

</html>

＆＃13;

我试图将一个按键事件添加到段落中。但它不起作用。所以我想知道它是否可行。这是一个例子：

var game = document.getElementById("mybalise");
game.addEventListener("keydown", function(e){...}, false);

我可以这样做：

document.addEventListener(...);

但我猜它在所有文件上都这样做。如果您需要更多代码，请告诉我们。如果您需要更多代码，请告诉我们。如果您需要更多代码，请告诉我们。如果您需要更多代码，请告诉我们。如果您需要更多代码，请告诉我们。感谢

Answer 1

要使tabindex="1"生效：添加game.addEventListener("keydown", function(e){...}, false);并先点击它以获得焦点。否则它只会注册文档，因为它具有焦点。

<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

这段代码绝对完美。用鼠标单击更改的元素，然后开始输入。

keydown适用于所有HTML元素，例外：span

但是，b，p，document.getElementById("sample").addEventListener("keydown", function(e){e.preventDefault(); alert(e.type)}, false);这样的元素似乎没有得到适当的焦点，因为keydown-event会被触发。您可以通过赋予元素tabindex来避免这种情况（这意味着可以使用制表符选择它）。在下面的例子中，我已经证明了这一点。

#sample {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

<p tabindex="1" id="sample">
  Sample (click me and type)
  </p>

keypress

此外：您说keydown并在代码中使用$HOME/.cache/google-chrome/Default/。请记住，它们是完全不同的事件。

Javascript keydown-event不会触发段落

1 个答案: