Last Updated : 23 Jul, 2025
Snake game is one of the most popular software games ever made for computers as well as mobile devices. It is a simple game where player has to control the snake and eat food which are randomly spawned in order to score points.
In this article, we will be creating the snake game using the Angular framework. Note that this tutorial uses Angular version 17 instead of the outdated AngularJS framework.
Prerequisites ApproachWe will be using the HTML canvas element to display the game, and all the game mechanics and logic will be handled by our Angular component class. Functions for individual features of the game are implemented like:
Before creating the project, make sure that Node is installed in your computer. To install node in your computer you can follow this article. If installed, make sure that Angular is installed as a global dependency in your computer. If you do not have angular installed, install it using the command:
npm install -g @angular/cli
After installing Angular you can check the version. By default, the above command installs the latest Angular version which is available.
ng versionStep 2: Create a new Angular project named "snakegame" using the command:
ng new snakegame
It will ask for selecting stylesheet format. This article uses CSS. Also select No for enabling Server Side Rendering (SSR) if asked. It will take some time to download the project resources.
Folder Structure Folder Structure Dependencies"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Example
HTML
//app.component.html
<div id="container">
<h1>Snake Game</h1>
<canvas #screen id="screen"></canvas>
<h2>Score: {{ score }}</h2>
</div>
CSS
/*app.component.css */
#screen {
width: 400px;
height: 400px;
outline: 1px solid black;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: green;
}
JavaScript
//app.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
score: number = 0;
@ViewChild("screen", { static: false })
canvas!: ElementRef;
ngAfterViewInit() {
let ctx = this.canvas.nativeElement.getContext('2d');
let gameOver: boolean = false;
let snake = [
{ x: 20 * 4, y: 0 },
{ x: 20 * 3, y: 0 },
{ x: 20 * 2, y: 0 },
{ x: 20, y: 0 },
{ x: 0, y: 0 }
];
let xVelocity: number = 20;
let yVelocity: number = 0;
let foodX: number;
let foodY: number;
function checkGameOver() {
if (snake[0].x < 0) {
gameOver = true;
}
else if (snake[0].x >= 280) {
gameOver = true;
}
else if (snake[0].y < 0) {
gameOver = true;
}
else if (snake[0].y >= 140) {
gameOver = true;
}
for (let i = 1; i < snake.length; i += 1) {
if (snake[i].x == snake[0].x && snake[i].y == snake[0].y) {
gameOver = true;
}
}
};
function createFood() {
do {
foodX = Math.floor((Math.random() * 13) + 1) * 20;
foodY = Math.floor((Math.random() * 13) + 1) * 10;
}
while (snake.includes({ x: foodX, y: foodY }))
};
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(foodX, foodY, 20, 10);
};
function moveSnake() {
const head = {
x: snake[0].x + xVelocity,
y: snake[0].y + yVelocity
};
snake.unshift(head);
}
function drawSnake() {
ctx.fillStyle = 'black';
snake.forEach(snakePart => {
ctx.fillRect(snakePart.x, snakePart.y, 20, 10);
})
};
function changeDirection(event: any) {
const keyPressed = event.keyCode;
const LEFT = 37;
const UP = 38;
const RIGHT = 39;
const DOWN = 40;
const goingUp = (yVelocity == -10);
const goingDown = (yVelocity == 10);
const goingRight = (xVelocity == 20);
const goingLeft = (xVelocity == -20);
if (keyPressed == LEFT && !goingRight) {
xVelocity = -20;
yVelocity = 0;
}
else if (keyPressed == UP && !goingDown) {
xVelocity = 0;
yVelocity = -10;
}
else if (keyPressed == RIGHT && !goingLeft) {
xVelocity = 20;
yVelocity = 0;
}
else if (keyPressed == DOWN && !goingUp) {
xVelocity = 0;
yVelocity = 10;
}
};
createFood();
let id = setInterval(() => {
if (!gameOver) {
window.addEventListener("keydown", changeDirection);
checkGameOver();
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, 400, 400);
drawFood();
moveSnake();
drawSnake();
if (snake[0].x == foodX && snake[0].y == foodY) {
this.score++;
createFood();
}
else {
snake.pop();
}
}
else {
var answer = confirm("Game Over!")
if (answer) location.reload();
clearInterval(id)
}
}, 250);
}
}
In order to run the application, use the following command in your terminal:
ng serve
Go to http://localhost:4200 using any browser and you can start playing the snake game.
OutputRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4