时间戳

首页 > 解决方案 > 事件函数会自动发生，不会触发任何事件

javascript - 事件函数会自动发生，不会触发任何事件

问题描述

使用非常初学者的方法创建 JavaScript 蛇游戏。 当我触发一个事件时（假设按下 ArrowUp 键），我正在使用该KeyboardEvent.key 属性。
我的蛇朝那个方向移动，但是一旦我每隔一段时间（我用作游戏计数器）按下另一个键（比如说按下 ArrowDown 键），setTimeout()蛇就会上下移动。即 ArrowUp 按键事件尚未被删除。

//GAME BOARD
var nodeList = document.getElementById('game-board')
let children = nodeList.childNodes;
var hi = nodeList.children
var i;
for (i = 0; i < hi.length; i++) {
  hi[i].classList.add('square')
}

for (i = 0; i < hi.length; i++) {
  var positionNo = document.createTextNode(''+i+'')
  hi[i].appendChild(positionNo)
}


//SNAKE

//var x = Math.floor(Math.random() * 99) + 1

var x = 22


function control(e) {
var plug = e.key
console.log('position is '+x)

var leftBorder = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
var topBorder = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
var bottomBorder = [90, 91, 92, 93, 94, 95, 96, 97, 98, 99]
var rightBorder = [9, 19, 29, 39, 49, 59, 69, 79, 89, 99]

console.log('NEW KEY')

console.log(plug)

if (e.key == 'ArrowRight'){     //SNAKE MOVE RIGHT
  for (let i=0; i<10; i++){
   setTimeout(function() {
    console.log('right')
    x+=1 
    if(x>100){
     location.reload()
    }else{}
    console.log('x is '+x)
    hi[x].classList.add('snake')
   }, 1000 * i);
   setTimeout(function() {
    hi[x-1].classList.remove('snake')
      }, 1000 * i);
      setTimeout(function() {
        if (leftBorder.includes(x) ||
        topBorder.includes(x) || 
            bottomBorder.includes(x) ||  
            rightBorder.includes(x)
           ){ 
             alert('LOST')
        } else{
          console.log(x)
        }
      }, 1000 * i);
      
      
    }
}
  
  
  else if (e.key == 'ArrowDown'){    //SNAKE MOVE DOWN
    for (let i=0; i<x+9; i++){
        setTimeout(function() {
          console.log('down')
          x+=10 
        if(x>100){
          location.reload()
          }else{
          }
          hi[x].classList.add('snake')
          console.log('x is '+x)
      }, 1000 * i);
        setTimeout(function() {
          hi[x-10].classList.remove('snake')
        }, 1000 * i);
        setTimeout(function() {
          if (leftBorder.includes(x) ||
          topBorder.includes(x) || 
              bottomBorder.includes(x) ||  
              rightBorder.includes(x)
            ){ 
              alert('LOST')
          } else{
            console.log(x)
          }
        }, 1000 * i);  
      }     
  }
      
 
 
  else if (e.key == 'ArrowUp'){    //SNAKE MOVE UP
   for (let i=0; i<10; i++){
       setTimeout(function() {
         console.log('before decrement'+x)
       x-=10 
       if(x<0){
         location.reload()
         }else{
         }
       
       console.log('after decrement '+x)
       hi[x].classList.add('snake')
       }, 1000 * i);
       setTimeout(function() {
         hi[x+10].classList.remove('snake')
         console.log('after classremove '+x)
       }, 1000 * i);
       setTimeout(function() {
         if (leftBorder.includes(x) ||
             topBorder.includes(x) || 
             bottomBorder.includes(x) ||  
             rightBorder.includes(x)
            ){ 
              alert('LOST')
           } else{
             
           }
         }, 1000 * i);  
       }     
       
  }
    
 
  else if (e.key == 'ArrowLeft') {   //SNAKE MOVE LEFT
      for (let i=0; i<x+9; i++){
      setTimeout(function() {
      x-=1 
      if(x<0){
        location.reload()
        }else{
        }
      
      hi[x].classList.add('snake')
      console.log('x is '+x)
    }, 1000 * i);
      setTimeout(function() {
        hi[x+1].classList.remove('snake')
      }, 1000 * i);
      setTimeout(function() {
        if (leftBorder.includes(x) ||
        topBorder.includes(x) || 
        bottomBorder.includes(x) ||  
            rightBorder.includes(x)
            ){ 
             alert('LOST')
        } else{
          console.log(x)
        }
      }, 1000 * i);  
    }     
    
  }
    
    
  
console.log('HIIIIIIIIII')
 
    
}    
    

<!-- begin snippet: js hide: false console: true babel: false -->
*{
 margin: 0;
}

body{
 height: 100vh;
}

#game-board{
 margin: 0 auto;
 width: 200px;
 height:200px;
 border: black solid;
 display: flex;
 flex-wrap: wrap;
}

.snake{
 background-color: blueviolet;
}

.square{
 box-sizing: border-box;
 width: 20px;
 height: 20px;
 border:1px cadetblue solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <title>Document</title>
</head>
<body>
 <div id="game-board">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
<script src="app.js"></script>
</body>
</html>

document.addEventListener("keyup",control)

我如何使它在每次事件后都朝着一个方向发展。

标签： javascripteventsaddeventlistenerevent-listenerkeyboard-events

解决方案

您可能需要考虑设置一些变量，即var s1; var s2;在顶部并且不要将它们设置为任何东西，然后在您的蛇移动功能中，将特定的 setInterval 设置为变量，然后清除除您想要的那个之外的所有其他设置间隔跑步。

我不擅长解释这一点，但你可以在下面看到一个演示。基本上，它会停止 setInterval，阻止您的蛇朝那个方向前进，并允许它朝另一个方向前进。

var s1;
var x = 0;
s1 = setInterval(function() { //When you set your setInterval as a variable you can stop it using clearInterval([the var name]);
  x++;
  document.getElementById('text').innerHTML = x;
}, 1000);

function stop() {
  clearInterval(s1);
}

function continue1() {
  s1 = setInterval(function() {
    x++;
    document.getElementById('text').innerHTML = x;
  }, 1000);
}
<p id="text">0</p>
<button onclick="stop()">Stop</button>
<button onclick="continue1()">Continue</button>

我不知道这是否是您正在寻找的答案，但这可能会有所帮助。

推荐阅读