FIRST, Watch my Instructions . . .
YouTube version if the other version does not work and has Subtitles.
Here is an example of what AI created. Everyone's project will look different.
Today you will be making a simple JavaScript game using AI (Copilot) and LiveWeave a JavaScript editing playground. You will start off with a simple game template where the player avoids falling obstacles for 60 seconds. Then you are going to take the game to the NEXT LEVEL based on your imagination.
When you open up the site it will look like this . . .
Below is a simple Javascript starter template for the game we are making in easy to read and understand bullet points. I added "Create a 3 file web-based JavaScript game" to make sure we get the correct output - HTML, CSS, & JS. First get it working and the save the code in your portfolio. Then start tweaking it into your new and improved game.
FIRST open CoPilot then Copy the AI instructions below and paste it in Copilot.
AI Instructions for Copliot
“Create a 3 file web-based JavaScript game to be tested in LiveWeave where the player avoids falling obstacles for 60 seconds.”
Mechanics:
Player is a blue square at the bottom, moves left/right with arrow keys.
Red blocks fall from random x positions at increasing speed.
Survive 60 seconds to win; collision triggers Game Over.
Score counts seconds survived.
Give instructions on the start screen “Press Space to Start”.
Display the timer/score in the upper right corner.
When game is over display "Game Over" with the player's score and a “Restart” option.
Pause with “p”.
Difficulty scaling every 10 seconds.
Play a simple bleep when the player moves
Play an end of game sound when player collides with Red block.
Toggle sound with "s" on/off by default is 'on'.
You will be using LiveWeave and the interface and it has 4 panels, HTML (upper left), CSS (lower left), JavaScript (upper right), and a output panel (lower right). I expanded the output panel so that I can see the entire game.
DOWNLOAD BOTH the HTML file and a ZIP file for save keeping. The HTML code will allow you to play your game in a web browser.
Now that you have a working game, TAKE IT TO THE NEXT LEVEL. Make it an entirely new version of the game.
Add lives
Instead of losing instantly, the player could have 2–3 lives.
Different obstacle types
Some fall faster, some move sideways, some are bigger or smaller.
Power‑ups
Items the player can catch, like:
Slow down obstacles
Temporary shield
Speed boost
Freeze time for a moment
Levels or stages
After surviving 60 seconds, move to a new level with new colors or faster blocks.
Better graphics
Replace squares with images, animations, or glowing effects.
Background music
Add looping music that can also be toggled on/off.
High score system
Save the best score in localStorage so it stays even after refreshing.
Character selection
Let the player choose different shapes or colors for the player block.
Obstacle patterns
Instead of random falling, create waves or patterns the player must dodge.
Mobile controls
Add touch buttons or swipe controls so it works on phones.
Screen shake
Shake the screen slightly when a block hits the ground or on near‑misses.
Particle effects
Add sparks or small particles when obstacles fall or when the player moves.
Sound variety
Different move sounds, different collision sounds, or a countdown beep.
Countdown start
Show “3…2…1…Go!” before the game begins.
Custom difficulty settings
Let the player choose Easy, Medium, or Hard before starting.
Bigger play area
Make the canvas larger or allow resizing.
Obstacle shadows
Add a shadow under falling blocks to make them look 3D.
Score bonuses
Extra points for risky moves like staying near falling blocks.
Replay slow‑motion
After game over, show the last 2 seconds in slow motion.