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();I'm new to javscript and creating a small project using OOPs concept. I am trying to change the value of snakeDirection by calling changeDirection method but it's can't get updated in moveSnake method which is gets called every 800ms. How will I do this?
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();
You must pass an argument (event) to func.
const snake = new Snake();
document.addEventListener('keydown', e => snake.changeDirection(e));
This is the problem that I have spotted this.snakeDirection cant be used because it is not in the constructor method. use just snakeDirection = e.key.
I mean that it is not the property of the class, it is just a class variable that can't be used as a class property. Class variables and class properties are two different concepts.
It's a context issue with setInterval. If you change your methods to class properties (basically arrow functions) so that this is understood properly the problem disappears.
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();