Ben's Bites
← Back
.md

Create an HTML5 web game with Claude

How to use Claude 3.5 Sonnet and Artifacts to create a side-scrolling web game with just a few prompts.

beginner free
Tool: Claude Topic: EngineeringTopic: Creative

2024-11-13

In this quick walk-through, we’re going to create a side-scrolling HTML5 web game with just a few prompts using Claude Sonnet 3.5 and Artifacts.

Artifacts is the new Feature Preview that launched with Anthropic’s new model, Claude Sonnet 3.5. Artifacts allows for one of the best coding experiences with an LLM chatbot. Not only does it output code, but it also lets you view the rendered, interactive version of a web game without leaving your chat window.

Steps we’ll follow in this tutorial:

  • Enable the Artifacts feature
  • Generate an SVG character
  • Generate an SVG background
  • Auto-animate the game with HTML5
  • View, download, and copy the code

This is the game we’ll create in this tutorial using just a few prompts:

Step 1: Enable the Artifacts feature

To get started, you need to enable the new Artifacts Feature Preview. To do this, if you’re in a chat window with Claude, you can click the little beaker icon below the chat text box.

The Feature Preview window will open. Toggle the Artifacts feature “On” to enable the feature. When you enable Artifacts, it will be enabled by default for all of your future chats.

💡 Tip: If you’re on the homepage of Claude, you might see a window allowing you to enable Artifacts from the homepage too.

Step 2: Generate an SVG character

To create our side-scrolling video game, we first need to create a character. We’ll prompt Claude to create an 8-bit style puppy dog.

Sample prompt:

Create an 8-bit style [insert character].
💡 Tip: If you have Artifacts enabled, when Claude responds, a window on the left side of the screen will appear with the Code and Preview tab to preview the rendered code.

You can click between the Code and Preview tab to view the rendered character and the code.

Step 3: Generate an SVG background

Now that we have our SVG character, we can generate the SVG background of the game. To do this, we’ll prompt Claude to generate background objects in the same style. We’ll create fences to be the bottom of the screen object and clouds to be the top of the screen object.

Sample prompt:

Can you make some [insert background object] in the same style?

Now that we have our fences created, let’s create the clouds. We can use a similar prompt with Claude to create this new background object.

Sample prompt:

Can you make some [insert background object] in the same style?

Step 4: Auto-animate the game with HTML5

Now that we have our main character and background objects, we can prompt Claude to animate all of these items together with HTML5 to create a side-scrolling game. You might notice that Claude is already expecting this request from its previous output.

Sample prompt:

Inline these into a simple side-scrolling game with HTML5.

The v1 output of the initial game might have some issues. For instance, in our preview pane, our puppy dog character turned into a brown square and there weren’t as many clouds as we’d want for our game. The fence also looks broken.

We can fix these issues by providing Claude with a list of updates to make to the HTML5 code to tweak and improve our game.

Sample prompt:

There are some issues. Can you fix the below?
- [insert issue #1]
- [insert issue #2]
- [insert issue #3]
💡 Tip: As you iterate on your game with Claude, you can provide instructions to update both visuals (i.e. how the objects in your game look) as well as game mechanics (i.e. how your character and background objects move).

Step 5: View versions, download, and copy code

Once you’ve got your side-scrolling game in a final state, you can toggle between versions in the bottom left corner of the preview pane to see the code alterations. In the bottom right corner, you can copy the code to your clipboard or download the code as an HTML file.

If you ever exit out of the Artifact window, no worries, you can reaccess it by clicking on the Chat Controls icon in the top right corner of the window. You’ll see all Artifacts generated in the chat under the Artifacts section of the Chat Controls pane.

And that’s it! With your HTML file generated, you can add it to a hosting service like GitHub Pages, Netlify, or Firebase Hosting to host your web game and make it live. Being a game developer is now only limited by your imagination.

‍

This tutorial was created by Garrett.