Building a 2D Game with JavaScript Only | Code with Beto

In this video, I show you how to build a basic 2D game using only JavaScript, HTML, and CSS, with no external libraries. It is a great starting point if you want to understand how these three pieces work together in a simple app.

You will see everything from creating the main files and HTML structure to CSS styling and game logic in JavaScript. Everything is step by step so you can replicate it and customize it.

What's inside

Introduction and project setup
Basic HTML file structure
Initial CSS setup and styles
Linking CSS and JavaScript to HTML
Using Flexbox to lay out elements on screen
Style tweaks to improve appearance
Preparing the canvas for the game
Keyboard arrow controls for movement

Introduction and project setup

I start by creating a project folder with in the terminal. Then we open that folder in Visual Studio Code and start with a clean workspace. Good organization from the start makes the rest of the project easier.

I recommend three main files: for structure, for styles, and for game logic. Keeping them in one folder avoids path headaches.

Basic HTML file structure

We create with a proper declaration and the basic structure: , , and .

In , we add the page title and meta tags, including UTF-8 charset for special characters. In , we add visible elements, starting with an for the game title.

Initial CSS setup and styles

We create and link it from HTML with . Global styles use to center content and to stack elements vertically.

We set background color, text color, and . Margins are reset and colors are chosen for a clean, consistent look.

Linking CSS and JavaScript to HTML

CSS goes in . JavaScript loads just before closing with . That way styles load first and the script runs after the DOM is ready.

Because all files live in the same folder, you only need the filename in or , no complex paths.

Using Flexbox to lay out elements on screen

Flexbox with and stacks game elements vertically in order.

We add multiple tags to test layout and fix common mistakes, like typos in CSS properties ( instead of ). That helps you see how Flexbox controls layout and how to fix visual bugs.

Style tweaks to improve appearance

Extra styles like remove unwanted spacing. Text color is set to dark gray with , and text stays centered for a cleaner presentation.

I emphasize saving changes and reloading the browser to see updates, and how small CSS tweaks can change the whole look.

Preparing the canvas for the game

Although the transcript is truncated, we set up a canvas element in HTML as the drawing surface for the 2D game. JavaScript will manipulate it for graphics and animation.

A canvas is essential for web 2D games because it lets you draw and animate with code.

Keyboard arrow controls for movement

We capture keyboard events to move elements on the canvas, like a ball or character. Arrow keys control direction and update positions each frame.

This basic control is the foundation for interactivity. From here you can add collisions, scoring, and more.

Resources

YouTubeBuilding a 2D Game with JavaScript Only

Step-by-step video to build a basic 2D game with JavaScript, HTML, and CSS.

CourseReact (web) course

Learn modern web development with React and take your projects further.

Let's connect!