-2
當我按下按鈕（N和O）10次時，腳本變得非常沒有響應，是否有人有解決方案？ 我想要做的是在遊戲中有2個菜單。這是一個應該有同樣效果的測試。按下按鈕後Javascript變得沒有響應
//html code
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Snake</title>
</head>
<body>
<style>
canvas{
display: block;
position: absolute;
border: 1px solid "Black";
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
<script type = "text/javascript" src = "menu2.js"></script>
<script type = "text/javascript" src = "menu1.js"></script>
<script type = "text/javascript" src = "main.js"></script>
<script type = "text/javascript">
main();
</script>
</body>
</html>
//main function
var
COLS = 20,
ROWS = 20,
canvas,
ctx,
keystate,
KEY_O = 79,
KEY_N = 78;
var main = function()
{
// create and initiate the canvas element
canvas = document.createElement("canvas");
canvas.width = COLS*20;
canvas.height = ROWS*20;
ctx = canvas.getContext("2d");
// add the canvas element to the body of the document
document.body.appendChild(canvas);
// sets an base font for bigger score display
ctx.font = "12px Ariel";
keystate = {};
// keeps track of the keybourd input
document.addEventListener("keydown", function(evt) {
keystate[evt.keyCode] = true;
});
document.addEventListener("keyup", function(evt) {
delete keystate[evt.keyCode];
});
menu1();
};
//first menu
var menu1 = function()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "Red";
ctx.fillRect(0,0,canvas.height, canvas.width);
document.addEventListener('keydown', function(event) {
if (keystate[KEY_N]) {
menu2();
}});
};
//second menu
var menu2 = function()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "Blue";
ctx.fillRect(0,0,canvas.height, canvas.width);
document.addEventListener('keydown', function(event) {
if (keystate[KEY_O]) {
menu1();
}});
};
您繼續添加EventListeners - 您只需要這樣做一次 –
每次調用函數時都添加一個額外的偵聽器。 – Adwaenyth
'menu1'增加了一個調用'menu2'的事件監聽器。 'menu2'增加了一個調用'menu1'的事件監聽器。這_____exponentially___增加了被調用的點擊事件處理程序的數量。 – Cerbrus