Creating a 2D game just with JavaScript | Code with Beto

Learn how to create a basic 2D game using only vanilla JavaScript, HTML, and CSS. It’s perfect for beginners who want to understand the fundamentals of game development on the web without any frameworks or build tools.

You’ll see how to set up your project folder, create essential files like , , and , and link them properly. The tutorial also covers how to use the HTML element to draw and animate game elements.

What's inside

Setting up the project folder and files
Creating the basic HTML structure
Linking CSS and JavaScript files to the HTML
Adding global styles with CSS
Using BrowserSync for automatic reloads
Introducing the HTML canvas element
Preparing the canvas for game rendering
Overview of the JavaScript game engine setup

Setting up the project folder and files

I start by creating a new folder named using the terminal command . This folder will contain all the project files. Opening this folder in Visual Studio Code (or any text editor) is recommended for better syntax highlighting and development experience.

Inside the folder, three main files are created: (the entry point), (for styling), and (for JavaScript logic). This simple structure keeps the project organized and easy to manage.

Creating the basic HTML structure

The file is set up with the standard HTML5 boilerplate. It includes the declaration, , , and tags. Inside the , a tag is added to name the page "Epic Game" and a tag ensures proper character encoding for international support.

In the , a simple header is added initially to verify the setup. This minimal HTML structure is enough to start building the game interface.

Linking CSS and JavaScript files to the HTML

To apply styles and add game logic, the and files are linked inside the . The CSS file is linked using a tag in the . The JavaScript file is included at the end of the with .

This setup ensures that styles load before the page renders and scripts run after the DOM is ready.

Adding global styles with CSS

I demonstrate adding some basic global styles in . The tag is styled with and to arrange content vertically. The background color is set to white, and text color is set to a dark gray (). Text is centered with , and default margins are removed with .

These styles create a clean, centered layout for the game interface.

Using BrowserSync for automatic reloads

To speed up development, I introduce BrowserSync, a tool that automatically reloads the browser whenever files change. It is installed globally via npm with .

Running in the project folder launches a local server on and watches for file changes. This saves time by eliminating manual reloads during development.

Introducing the HTML canvas element

The core of the game is built inside an HTML element. I add a tag to the HTML body. The canvas provides a drawable area where JavaScript can render shapes, images, and animations.

Initially, the canvas is empty and white, so it’s not visible until styled or drawn on.

Preparing the canvas for game rendering

The canvas is given an ID so it can be referenced from JavaScript and CSS. I show inspecting the canvas element in the browser developer tools to confirm its presence.

Styling and scripting will later control the canvas size, background, and game objects. This sets the foundation for rendering the player, ball, and game mechanics.

Overview of the JavaScript game engine setup

The file will contain all the game logic, including tracking keyboard input, simulating simple physics, and drawing on the canvas. I hints at building a basic game engine with movement and collision detection using vanilla JavaScript.

This approach keeps the project lightweight and accessible for beginners learning game development fundamentals.

Resources

CourseReact (web) course

Learn React fundamentals and build interactive web apps with modern JavaScript.

Premium resourcePro Membership

Access exclusive tutorials, courses, and live coding sessions.

Let's connect!