AI makes JS Breakout 🧱
We're going to make a version of JavaScript Breakout using only AI. I'm going to show you how to do it right now. We're using Devra. We're creating a task to create a JavaScript version of Breakout.
The game will have four rows of bricks in rainbow colors and a paddle at the bottom of the screen that is controlled by the user with the arrow keys. Every time the ball hits one of the bricks, it bounces and makes that brick disappear. Each time a brick disappears, the score goes up. If the paddle misses the ball more than three times, then it is game over, and "Game Over" will be displayed.
Hit "Create and Start" and let's see what it does. First, it's got this little proposal. Here's the index. Let's create that and see it pop up. There it goes. All right, here's our CSS. Let's make that pop up right there. Okay, here's the JavaScript. Let's create that. It pops up, and let's launch the game to see what happens.
Oh my God, that is trippy. It works, but that is a psychedelic nightmare of a game. Let's just make a tiny revision to make it not so seizure-inducing. We'll make the rainbow color of bricks consistent so that they do not switch colors with each frame.
Here's the revised JavaScript. Let's see how it does this time. Launching the game... all right, looks fantastic. Go to Devra to get this code and start making your own apps with AI.
View the video