As I embark on the initial phase of developing a snake game, the following steps are required: 1- Establish the game board 2- Create the snake and fruit elements 3- Display the snake and fruit accordingly However, I encounter an issue where the board gets updated after spawning the snake and fruit, but they do not appear on the game board. Note: In each cell, 0 denotes emptiness, 1 represents a snake body, and 2 signifies a fruit.
HTML -> gameboard component:
<div class="gameB">
<div *ngFor="let i of board" class="row"gt;
<div *ngFor="let j of i" class="cell"
[ngClass]="{'snake' : board[board.indexOf(i)][j] === 1, 'fruit': board[board.indexOf(i)][j] === 2}">
{{ board[board.indexOf(i)][j] }}
</div>
</div>
</div>
TS -> gameboard component:
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { NgModule } from '@angular/core';
import { Snake } from '../snake-iterface';
@Component({
selector: 'app-game-board',
standalone: true,
imports: [CommonModule],
templateUrl: './game-board.component.html',
styleUrl: './game-board.component.css'
})
export class GameBoardComponent implements OnInit{
boardWidth:number = 20;
boardHeight:number = 20;
board:number[][] = [];
snake:Snake = {} as Snake;
fruit:number[] = [1,1];
createBoard(){
let temp:number[];
for(let i = 0; i < this.boardHeight;i++){
temp =[]
for(let j = 0; j < this.boardWidth;j++){
temp.push(0)
}
this.board.push(temp)
}
}
spawnSnake():void{
this.board[this.snake.headPositionY][this.snake.headPositionX] = 1;
}
updateBoard():void{
for(let i = 0; i < this.boardHeight; i++){
for(let j = 0; j < this.boardWidth;j++){
if(this.snake.bodyPositions.includes([j, i]) ){
this.board[i][j] = 1;
}else if((j === this.fruit[0] && i == this.fruit[1])){
this.board[i][j] = 2;
}
}
}
}
ngOnInit(): void {
this.createBoard()
console.log("Before Snake creation", this.board)
this.snake = {
headPositionX: Math.floor(this.boardWidth / 2),
headPositionY: Math.floor(this.boardHeight / 2),
bodyPositions: [[Math.floor(this.boardWidth / 2), Math.floor(this.boardHeight / 2)]],
length: 1,
direction: 'right'
};
console.log("Before Spawn", this.board)
this.spawnSnake()
this.updateBoard()
console.log("After Update 1", this.board)
setTimeout(this.updateBoard, 1000)
console.log("After Update 2", this.board)
}
}
CSS -> gameboard component:
.gameB{
margin: auto;
padding:10px;
display: flex;
flex-direction: column;
gap: 3px;
background-color: black;
width:fit-content;
}
.row{
display: flex;
flex-direction: row;
gap: 3px;
}
.cell{
width:20px;
height:20px;
background-color: grey;
}
.snake{
background-color:red;
}
.fruit{
background-color:purple;
}
Other Files:
HTML -> app component:
<app-game-board></app-game-board>
HTML -> index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SnakeGame</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Note: The first console log seems to indicate that the snake and fruit have been added to the board even before being created or updated (how?????) Subsequent logs reveal consistent results
Note: Angular 17 is being used
Please provide precise guidance in your response, as I am relatively new to Angular development
I have attempted to adjust the placement of the snake declaration within the ngOnInit method, but the issue persists