JS practical object-oriented snake game example

btnstart.addEventListener('click', function() {
     btnstart.style.display = 'none';
     //Call the intermediary class game = new Game();
     var table = document.querySelector('table');
     table.addEventListener('click', function() {
        //Clear timer clearInterval(game.timer);
        btnstop.style.display = 'block';
     })
});

//The current direction accepts willDirection! ! !
this.direction = this.willDirection;
 
//Snake movement in different directions switch (this.direction) {
     case "R":
            //Move right this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col + 1 });
            break;
     case "D":
            //Move down this.body.unshift({ "row": this.body[0].row + 1, "col": this.body[0].col });
            break;
     case "L":
            //Move left this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col - 1 });
            break;
     case "T":
            //Move up this.body.unshift({ "row": this.body[0].row - 1, "col": this.body[0].col });
            break;
}

Game.prototype.bindEvent = function() {
    var self = this;
    //Keyboard event document.onkeydown = function(e) {
        switch (e.keyCode) {
            //Press the left button case 37:
                //Judge first (if the current direction is moving to the right, we cannot press the left button at this time)
                if (self.snake.direction == 'R') return;
                // self.snake.direction = 'L';
                self.snake.changeDirection('L');
                self.d = "L";
                break;
                //Press the up key case 38:
                if (self.snake.direction == 'D') return;
                self.snake.changeDirection('T');
                self.d = "T";
                break;
                //Press right key case 39:
                if (self.snake.direction == 'L') return;
                self.snake.changeDirection('R');
                self.d = "R";
                break;
                //Press the key case 40:
                if (self.snake.direction == 'T') return;
                self.snake.changeDirection('D');
                self.d = "D";
 
                break;
        }
 
    }
 
};

var self = this; //refers to window
    //The following do-while loop statement is used to create a row and col first, and then determine whether it is on the snake.
        //Food location this.row = parseInt(Math.random() * gameSnake.row);
        this.col = parseInt(Math.random() * gameSnake.col);
    } while ((function() {
        //Traverse the row and col of the snake, and then judge whether they overlap with the randomly generated row and col for (var i = 0; i < gameSnake.snake.body.length; i++) {
        if (gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col) {
             return true;
          }
       }
       return false;
})());

//If the current snake's head does not overlap with the food, it means that the food has not been eaten, and the tail is deleted at this time;
if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
      //If they overlap, it means they have been eaten. The tail will not be deleted, only the head will be added. //Create a new food game.food = new Food(game);
      //Reset the frame number to 0, because the snake will jump //eat the food and add points game.score++;
      game.f = 0;
} else {
      this.body.pop();
}

if (this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) {
        //lower right upper left alert('Game is over, your current total score is:' + game.score + 'points');
        this.body.unshift();
        clearInterval(game.timer);
}

for (var i = 1; i < this.body.length; i++) {
    if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row) {
        alert('The game is over, your current total score is:' + game.score + 'points');
        clearInterval(game.timer);
    }
}

btnstop.addEventListener('click', function() {
    btnstop.style.display = 'none';
    game.timer = setInterval(function() {
    // The core of the timer is the essence of game rendering, clear screen - update - render game.f++;
    // Clear the screen game.clear();
    //Snake movement/update //Snake update speed When the snake side is longer, the speed increases var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
    // Snake update game.f % during == 0 && game.snake.update();
    // Render the snake game.snake.render();
    // Render food game.food.render();
    }, 20);
})