Simple balloon game

This is a simple game that started with a prompt and was refined through conversation. In each case what I did was to edit the box below in google sites (the "embed code" box), and try the new code that ChatGPT gave. Then you'll see in the conversation, I asked for different features.

Here is the link to the ChatGPT conversation

Different chatbots have an increasing capability to work with code; it's always improving but can have issues - various bots can be tried. In this case with ChatGPT what sometimes works is to keep track of your requirements and instead of just asking ChatGPT to add or fix a feature (like I was doing originally), it can be good to keep a running list of requirements, including the text of the original prompt.

At one point you see I used this set of requirements, and I was keeping a running list in a text editor:

requirements:

scoring system

basic collision detection

on the bottom of the screen, within viewable area, mobile responsive, should be a row with start button, left button and right button all in the same row and centered horizontally, but not covering each other.

left button makes crab go left

right button makes crab go right

start button to start game

when game starts balloons start dropping

crab appears above buttons at bottom of screen

please use crab and balloon emoji

You could try adding the above requirements to the original prompt, including asking for the complete code.

Original prompt:

I would like to make a very simple HTML game with javascript and css in a single file. I'd like a blue background and a beach, with a crab character that can move left and right and catch water balloons that fall from the sky. it should be mobile friendly, including disabling ios touch-focus zooming. on the screen there should be a start button, left and right button