Introduction to Game Programming

This page contains articles that explain how to create games using only JavaScript, without using any game engines or libraries.

Retro Wall Tennis Game

JavaScript Game Programming Tutorial: Setting Up the Environment

This article is for beginners who want to make a game but don't know where to start. We'll create a simple game using JavaScript. The only tools you need are a browser and a text editor. We'll explain how to set up the environment, draw a ball on the screen, and make it move.

hysblog.com

2024.09.15

JavaScript Game Programming Tutorial: Making a Retro Wall Tennis Game Basic part

We'll make a simple game using JavaScript, and the only tools you need are a browser and a text editor. I'll explain how to take user input and move objects on the screen.

hysblog.com

2024.09.15

JavaScript Game Programming Tutorial: Making a Retro Wall Tennis Game Complete Version

We'll create a simple game using JavaScript, and all you need is a browser and a text editor. We'll manage the game's state and build a small, complete version of a wall tennis game.

hysblog.com

2024.09.15

Push Puzzle Game

How to Make a Push Puzzle - Let's Create a Sokoban-Style Puzzle (First Half)

This article is for people who want to make a game but don’t know where to start. We’ll be creating a game similar to the classic push game, Sokoban. In this article, we'll implement all the basic rules of the game, leaving the visuals aside for now.

hysblog.com

2024.09.16

How to Make a Push Puzzle - Let's Create a Sokoban-Style Puzzle (Second Half)

This article is for people who want to make a game but don't know where to start. We'll create a game similar to the classic Sokoban. This time, we'll display pixel art to give it a retro game feel.

hysblog.com

2024.09.16

Falling Block Puzzle Game

How to Make a Falling Blocks Game – Let's Create a Tetris-like Puzzle Game (First Half)

This article is for people who want to create a game but don't know where to start. We'll be making a Tetris-style falling block puzzle game. In this article, we'll implement falling blocks, stacking, and line clearing.

hysblog.com

2024.09.15

How to Make a Falling Blocks Game – Let's Create a Tetris-like Puzzle Game (Second Half)

In this article, we'll implement the 7 types of block definitions, block rotation, and game state management to create a minimalist version of a Tetris-like game.

hysblog.com

2024.09.15

Pixel Art Character Animation

Game Programming Intro: Character Animation

This article is for beginners who want to create a game but don't know where to start. It explains how to animate pixel art characters using JavaScript.

hysblog.com

2024.09.16

Game Programming Intro: Linking Character Movements with Animation

This article is for beginners who want to create a game but don't know where to start. It explains how to switch pixel art animations based on character states (such as standing and running) using JavaScript.

hysblog.com

2024.09.16

Action Puzzle Game inspired by Lode Runner

How to Make an Action Puzzle Game - Inspired by Lode Runner (Part 1)

We'll create a game similar to Lode Runner using JavaScript. In this article, we'll make the character's movements. It will change based on its state relative to the blocks, ladders, and bars on the screen.

hysblog.com

2024.09.16

How to Make an Action Puzzle Game – Inspired by Lode Runner (Part 2)

We'll create a game similar to Lode Runner using JavaScript. In this part, we'll explain how to manage the map and handle collision detection with the elements on the screen.

hysblog.com

2024.09.16

How to Make an Action Puzzle Game – Inspired by Lode Runner (Part 3)

We're going to make a Lode Runner-like game with JavaScript. In this part, we'll create the main gimmick: blocks that automatically repair themselves.

hysblog.com

2024.09.16

How to Make an Action Puzzle Game – Inspired by Lode Runner (Part 4)

We're going to make a Lode Runner-like game with JavaScript. In this part, we'll introduce the enemy character (a blue monster) that will chase the player endlessly.

hysblog.com

2024.09.16

How to Make an Action Puzzle Game – Inspired by Lode Runner (Final)

We're going to make a Lode Runner-like game with JavaScript. We'll add elements like collecting coins, climbing a hidden ladder to clear the game, and game over when touched by an enemy, to complete the game. I've also added a title screen and a game clear screen.

hysblog.com

2024.09.16

The Game digging tunnels and collect the gold

JavaScript Game: Dig Tunnels and Get the Gold - With Love to Mole Mole

This game was made as a tribute to "MOLE MOLE," a classic by Cross Media Soft released in 1985 Skillfully move the obstructing rocks out of the way and collect all the gold buried in the soil.

hysblog.com

2024.09.29

How to Make a Brilliant Tunnel-Digging Puzzle Game with JavaScript

We're going to create a puzzle game in JavaScript where you dig tunnels and collect gold buried underground. It's an homage to the classic 1980s puzzle game, MOLE MOLE.

hysblog.com

2024.10.02

2D Jump Action Game

Creating a 2D Pixel Art Jump-Action Game Template in JavaScript - With Love to Mario

I've prepared a template (with a working demo) for creating a jump-action game like Mario Bros.. This article explains how to use multiple sprite sheets and how to implement the jump action.

hysblog.com

2024.10.19

Let's Make a 2D Pixel Art Jump Action Game with JavaScript (Part 1) - With Love to Mario

We're creating a 2D jump action game inspired by Mario Brothers using JavaScript. In this article, I'll explain how to implement the iconic game mechanic of 'floor push-up' from Mario.

hysblog.com

2024.10.27

Let’s Make a 2D Pixel Art Jump Action Game with JavaScript (Part 2) – With Love to Mario

We’re building a Mario Bros.-style jump action game. This time, we’ll introduce an enemy character (the Snail) and implement the mechanic of flipping it over by bumping it from below. We’ll also add the PowBlock and explain how to create the screen-shaking effect.

hysblog.com

2024.11.05

Let’s Make a 2D Pixel Art Jump Action Game with JavaScript (Final Part) – With Love to Mario

This is the final installment of our guide on creating a "Mario Bros"-style 2D jump action game. In this article, we’ll explain how to implement score displays and game state transitions, including the title screen and game-over sequence.

hysblog.com

2024.11.17