kin*_*ing 2 javascript keydown
<!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>Run Code Online (Sandbox Code Playgroud)
我正在尝试向段落添加按键事件。但这不起作用。所以我想知道是否可能。这是一个例子:
var game = document.getElementById("mybalise");
game.addEventListener("keydown", function(e){...}, false);
Run Code Online (Sandbox Code Playgroud)
当我这样做时它起作用:
document.addEventListener(...);
Run Code Online (Sandbox Code Playgroud)
但我猜它在所有文档上都这样做了。如果您需要更多代码,请让我知道。如果您需要更多代码,请让我知道。如果您需要更多代码,请让我知道。如果您需要更多代码,请让我知道。如果您需要更多代码,请让我知道。谢谢
要keydown工作:tabindex="1"首先添加并单击它以获得焦点。否则它只会注册文档,因为它具有焦点。
game.addEventListener("keydown", function(e){...}, false);
Run Code Online (Sandbox Code Playgroud)
这段代码绝对完美。用鼠标单击更改的元素并开始输入。
keydown 适用于所有 HTML 元素,除了:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
span然而,像、 、b之类的元素似乎p没有获得适当的焦点来触发 keydown 事件。您可以通过为元素指定 a tabindex(这意味着可以使用选项卡选择它)来规避此问题。在下面的例子中我已经演示了这一点。
game.addEventListener("keydown", function(e){...}, false);
Run Code Online (Sandbox Code Playgroud)
document.getElementById("sample").addEventListener("keydown", function(e){e.preventDefault(); alert(e.type)}, false);Run Code Online (Sandbox Code Playgroud)
#sample {
width: 300px;
height: 300px;
border: 1px solid red;
}Run Code Online (Sandbox Code Playgroud)
另外:您在代码中谈到keypress并使用了。keydown请记住,它们是完全不同的事件。