If you ever want to make a small game that runs in the browser, Phaser.com is a great place to start JS. This is a simple JavaScript library that helps you create interactive 2-D games that you can play in the browser.
In this guide, you will learn what a phaseer is and then use it to create a popular snake game. The snake walks on a grid. It eats food for food. If it collides with the wall or dies itself. The full project fits into two files, and the code is divided into small blocks so it is easy to follow.
Finally, you will be able to understand and copy the code, run it and compose it. You will also learn why every part exists and how it fits in a physician way.
Play the game Here to find a sense of your construction.
The table of content
What is phaser.js?
Feasible There is a free JavaScript library for 2D games. You write a simple JavaScript and let the Phaseer heavy lifting. You do not need a blood system or game engine installer. You can start with the same HTML file and a Javascript file.
Manages the Code of Code in the scenes. There are three common steps in one scene. Load your assets preloadYou have sorted photos and variables createAnd you update your game in every frame update. That little loop is mostly the main focus of arcade games.
Now set the project.
Project Setup
Create a folder with two files index.html And main.js. The HTML page loads Phaser from CDN and then loads your script.
html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser Snaketitle>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>body { margin: 0; background: #111; }style>
head>
<body>
<div id="game">div>
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js">script>
<script src="main.js">script>
body>
html>
This page includes a container DIV and includes Phaser 3 from JSDelivr. Your main.js The file will create the game and connect it to this DIV.
Grid, color, and game configure
The snake is the easiest on a grid. You choose tile size and multiple tiles wide and high. You also explain the background, snake and colors for food. Then you create a feasler game configuration that points to the functions of your scene.
const TILE = 16;
const COLS = 40;
const ROWS = 30;
const WIDTH = COLS * TILE;
const HEIGHT = ROWS * TILE;
const COLORS = {
bg: 0x1d1d1d,
head: 0x30c452,
body: 0x2aa04a,
food: 0xe94f37,
};
const DIR = {
left: { x: -1, y: 0, name: 'left' },
right: { x: 1, y: 0, name: 'right' },
up: { x: 0, y: -1, name: 'up' },
down: { x: 0, y: 1, name: 'down' },
};