class Snake { snakeDirection = 'ArrowRight'; constructor() { setInterval(() => { this.moveSnake(); }, 800); document.addEventListener('keydown', this.changeDirection); } moveSnake() { console.log('moveSnake', this.snakeDirection) //ArrowRight } changeDirection(e) { this.snakeDirection = e.key; console.log('key pressed', e.key) } } let a = new Snake();Soy nuevo en javscript y estoy creando un pequeño proyecto usando el concepto OOP. Estoy tratando de cambiar el valor de snakeDirection llamando al método changeDirection, pero no se puede actualizar en el método moveSnake, que se llama cada 800 ms. ¿Cómo haré esto?
class Snake { snakeDirection = 'ArrowRight'; constructor() { setInterval(() => { this.moveSnake(); }, 800); document.addEventListener('keydown', this.changeDirection); } moveSnake() { console.log('moveSnake', this.snakeDirection) //ArrowRight } changeDirection(e) { this.snakeDirection = e.key; console.log('key pressed', e.key) } } let a = new Snake();Debe pasar un argumento (evento) a func.
const snake = new Snake(); document.addEventListener('keydown', e => snake.changeDirection(e));Este es el problema que he detectado this.snakeDirection no se puede usar porque no está en el método constructor. use solo snakeDirection = e.key . Quiero decir que no es propiedad de la clase, es solo una variable de clase que no se puede usar como propiedad de clase. Las variables de clase y las propiedades de clase son dos conceptos diferentes.
Es un problema de contexto con setInterval . Si cambia sus métodos a propiedades de clase (básicamente funciones de flecha) para que this se entienda correctamente, el problema desaparece.
class Snake { snakeDirection = 'ArrowRight'; constructor() { document.addEventListener('keydown', this.changeDirection); setInterval(this.moveSnake, 800); } moveSnake = () => { console.log('moveSnake', this.snakeDirection); } changeDirection = (e) => { console.log(e.key) this.snakeDirection = e.key; } } let a = new Snake();