Click here to play Virtual Pet

So let’s use Claude.ai to have some more fun with HTML and make a simple HTML and JavaScript program. We are going to make a Pet, similar to a Tamagotchi, that you can play in your browser. You will notice my prompt is a bit more specific this time, it is because I started by having a chat with Claude.ai about the program I want to make, I just used common language and described what I was looking to do and then asked:

Can you give me a prompt that would explain this program and help me create it with Ai?

Then took that output to start our program:

Could you create a simple, single-file HTML virtual pet game? I want it to have:
* A pet displayed using emojis that changes based on its mood
* Three stats to track: hunger, happiness, and energy
* Progress bars showing each stat
* Three buttons: Feed, Play, and Sleep
* Stats that decrease over time
* A death state where the pet turns into a skull (💀) when any stat hits 0%
* A simple restart button that appears when the pet dies
* Everything should be in one HTML file with CSS and JavaScript included
The pet should change appearance based on its stats (like happy face when stats are high, sad face when low). When a stat reaches 0, the pet should die and be replaced with a skull emoji, with a restart button appearing below. Please include simple animations and styling to make it look nice but keep it beginner-friendly.

This yielded a decent result, but it was missing some of the character and emotion so we asked: Can we make it a cute cat?

You’ll notice in the image, in the chat it gives examples of emoticons and stats for them, and if you wanted to change these you can just ask. In our case, it showed all those emotions in the chat but it broke the mechanism in the app that applied them so we just said that the cat’s face was not changing and it fixed it. Then we just asked for it to give us more nuance to the faces to make it a little more fun.

All in all, programming with Claude.ai is pretty straightforward and even when you do projects that require multiple files, it keeps them all in a list for you. Additionally, Claude.ai lets you download the files with one click, in the images you can see the download button next to the publish button. This saves you from having to copy code back and forth between files with each iteration. So stop waiting and dive in, make something fun.