Vibe coding 2D web game creation class for beginners

When you first start coding, the first part you get stuck is `What should I start with? `This is it.

Even if you study HTML, CSS, and JavaScript one by one, it's difficult to complete a single game.

This class follows these processes one by one from the beginning, and `A hands-on class for beginners to complete a 2D web game on their ownIt's `.

Rather than memorizing difficult grammar first`A way to watch, follow, and changeProceed with '

Use AI coding tools like ChatGPT and Codex

While understanding the structure of the game, requesting the necessary code, and modifying it yourself

`Learning the development flow naturally`This is the goal.

First, we'll look at the concept of vibe coding and the entire process of creating a 2D web game.

Install VS Code

HTML, CSS, and JavaScript

Understand the basic file structure and prepare the actual development environment.

You'll also learn how to use ChatGPT CLI and Codex, how to record development with markdown, and how to organize game actions with water code before writing code.

The first hands-on project was `Sliding puzzle gameIt's `.

After understanding the game rules and creating a screen in HTML, use JavaScript to move the puzzle pieces.

You can experience how a web game is structured by adding completion conditions and a reset function.

As you build games, the code gets longer and unexpected errors occur.

In this class

How to manage code by dividing it into multiple files,

How to effectively ask ChatGPT about errors,

The basic concepts of Git and GitHub are also covered.

While uploading the finished code to GitHub, you can even experience the basic code management flow used by actual developers.

In addition to implementing features, we also carry out the process of making games more fun.

Use AI to create game characters and image assets, and change buttons, backgrounds, and UI designs.

By adding sound effects and background music, and even applying screen effects that match the game atmosphere, the simple game that was initially created is developed into a single completed content.

The finished game is `GitHub PagesUse `to distribute it on the actual web.

I even experience the process of checking the address of the distributed game, modifying the code, and then updating it again.

At the end, you can organize your completed games and create a simple game portfolio.

After completing the basic course, you will also try your hand at creating 2D minigames in various genres.

`Minesweeper, Tetris, shooting, hunting, jumping, punching, maze escape, scissor rock, match-3 puzzle, missile avoidance gameAs you create `, etc., you will experience different rules and implementation methods for each game.

The goal of this class isn't just to copy code and complete a game.

`Experience the entire production flow for yourself: deciding on an idea → thinking about game rules → requesting it from AI → modifying the code → adding assets → fixing errors → posting it on GitHub → deploying it to the actual web`This is the key.

You don't need to be familiar with HTML or JavaScript.

While making my own small game

Let's learn how to use coding and AI.

ChatGPT AI Vibe Coding 2D Web Game Production Practice Class for Beginners

ChatGPT AI Vibe Coding 2D Web Game Production Practice Class for Beginners