3D Snake game made 100% with AI
This snake game was made 100% using the Devra AI tool. In the last video, we made it, and in this video, we're going to create a 3D version based on this game. Let's see how it turns out.
We're going to make a new task, and the task is going to be: look at the game of Snake and create a 3D version using the Three.js JavaScript library. The game should follow the exact same logic of the existing version and have a top-down view. It should be well-lit so as to see the arena, and have a slight angle to the view so that we can see the 3D effect of the snake and food cubes.
Alright, so what it's doing right now is it's going through the directory. It's looking at the existing JavaScript snake game and it's learning from what it already did so that it can base the new game off of the existing one. It'll say, "Yep, that plan looks good. Let's just see what happens."
First off, it's probably going to make the index.html, which is relatively simple. Here we go. Next up is the JavaScript. That's going to take a little while. Let's see here. Let's open it up and just see what's coming in. So we have the index.html right now. Style.css is in. Good. JavaScript's going to take a little while, so we're going to skip ahead to that. It'll be like a few, like 30 seconds from now. Ah, not even. Let's create that file and see how it turns out.
Oh my gosh, it's actually playable. It is not perfect, but it is a starting point for this 3D JavaScript game, and this is kind of perfect for this demonstration. So, I like that it works and we can see stuff, but there are some notes. It's sort of like you're working with somebody from, you know, you're working with a PA, programmer, or a partner, or a consultant, and they get it kind of right, and then you have to revise it. So let's go in and ask for a revision.
That looks good. Let us make a few refinements. When you hit the arrow keys, the snake starts going in that direction. We shouldn't have to hold down the arrow key. Also, when the snake eats the food, its tail should grow in length.
You give it this extra context, you ask it to revise what it created, and for me, like, so there's the initial thrill of seeing what it makes, but then kind of the fun part is the revise and resubmit process. Let's do this update and check it out.
Alright, look at this 3D JavaScript snake. Oh my gosh, it looks very good. Okay, so what do we want? We want shadows, and let's have like a 40x40 wall around the arena. Make the lighting so that there are shadows and we can see depth in the cubes. Also, zoom in a bit and let's make a 40x40 square wall around the arena. If the snake hits that wall, then it is game over. Let's just make sure we spell the right word. Hits. Okay, here we go. Let's update the file and see what we have.
Alright, look at this. I can see the 3D of the cubes. Game over. This is awesome. This is awesome. Please tilt the view a bit so that we have a perspective of being slightly near the bottom of the arena, but we are still looking towards the center of it. Alright, let's see what we have.
Okay, interesting. I don't know if this is an improvement, but it is definitely a little more interesting. I think with some work, okay, I see the 3D aspect of it now. The 3D you would think would be more, but it somehow looks less. But it's part of the conversation and working with it, just like working with any person. You iterate through it until you all get it right. I think we'll end it there. Thanks for joining. Bye.
View the video