Build Your Own Version of A Classic Javascript Snake Game

Build Your Own Version of A Classic Javascript Snake Game


(repetitive whooshing sound) Hello everyone, in this video we’re gonna be building a snake clone, this is the classic snake game, we called this one Sheep Dog. So you can see, if
click we herd the sheep, we move around the screen and every time we collect a sheep, the sheep will follow the sheep dog. And once we hit the edge, we have a little message says your dog bumped his head. we’re gonna build this
game in about five minutes. Should be pretty simple, follow along. Let’s go ahead and get started by going to gokoji.com/templates so you wanna make sure
you’re on the template page. We’ll scroll down, there is a nice snake clone
here towards the bottom, and this may change because we’re getting templates
submitted every single day, so it might be in a different place. All right, so you can see
here we have a snake template, we’re gonna click on use template and we’ll just call this one Sheep Dog and we’ll go ahead and
begin creating the project. Now what’s happening here, is it’s setting up everything, it’s getting all your project files, it’s starting the development environment, it’s starting a dev
server with Hot Reload. We don’t have to worry about any of that, but it’s just nice to know what is happening while this
loading bar is progressing. And this activity is
perfect for a classroom, or for students just learning how to code. You can see that now that
the editor has loaded, we have a preview on the right hand side, we have our terminal here at the bottom. We can go ahead and close that out. And then on the left hand side we have our directory, but what we really wanna focus on is the visual customization controls, because that is what
we’re going to be editing for this very simple project. All right, let’s jump into the colors, maybe for the text color we will go with sort of
a darker greenish color. Yip that’s looking pretty good, let’s go ahead and save that. For the primary color, maybe we’ll go with like
an orange or a yellow. That looks all right. And now for the background color, let’s go with like a light green color, make it sort of look like a pasture. Okay, now for the font
family here at the bottom, they’re using a Grand Hotel font and I found this font called Indie Flower that I think looks just a
little bit more playful, so I’m going to go ahead
and copy paste that in here. So now you can see it has
changed on the right hand side, but it still says Vegan Snake, so we’re gonna want to change
that in our Game settings. So let’s jump into Game settings, we’ll call this one Sheep Dog. For the Start Button
we’ll say something like herd the sheep. And for the Game Over text
maybe we’ll say something like your dog bumped its head. And we gotta make sure we
spelled bumped correctly, there we go. And now for the game size, we wanna make sure that this looks good on both mobile and on desktop, so I’m just gonna increase
this to a 20 here. There we go, let’s go
ahead and reload the page, just see how we’re looking. So right now we don’t
have any sort of sheep. Oh, we’ve got some music there. So it looks pretty small on here, but it will look better as we continue. Let’s go ahead and go into desktop and see how that looks for now. All right, that’s looking pretty good. So let’s go ahead and
change up the images. So for the head, we’re
going to use a dog face. Now I found a really good dog face here, we’re just gonna copy that URL and we’re gonna Import from URL. You can upload your own images, that’s totally fine too, I just have this hosted on Imgur. And for the food we’re
actually going to have sheep. So here’s another sheep icon I found, let’s go ahead import that,
rehost it, there we go. Now let’s go ahead and
go into the metadata, we’ll change the name of the game, we’ll call this Sheep Dog. And we’ll change the
description to herd your sheep. It’s like the classic snake game. Now for the Share Image, let’s go ahead and change
that to our dog image, so we’ll do the same thing we
did for our character images, there’s our dog. Now for the icon. Let’s use the sheep for the icon. So here we go. And now that that is all uploaded, let’s go ahead and reload the page, see what we’ve got. Here we go, herd the sheep. There’s our dog. And it is looking a little small on here, maybe we go into Game settings again, and see what were can do here. Maybe we change this to
15, see what happens. Let’s reload the page again. And there we go, that’s
looking a little bit better. Now let’s take a look on
desktop and see how that looks. So herd the sheep. There we go, that’s a
nice size on desktop. Perfect. Okay so if we hit the side, it says your dog bumped its head, perfect. All right, looks like it is all working, so let’s go ahead and deploy this project. We’re gonna go into Deploy project here. For our game we’re gonna call
this sheepdog.withkoji.com and we can publish this to
several different places, but I’m just gonna do the
very basic deployment here by clicking on Deploy now. And basically what’s happening right now, is we are starting an ECT2 instance, and compiling the container, we’re compiling your project
on a remote build server and hosting the production bundle. All these things you don’t
really need to worry about, but it’s just sort of nice to understand what’s happening when you
click that deploy button. And you can also see underneath we have a few different ways in which you can deploy your project. Lot of cool new features
being added every day, so make sure you follow us on Facebook, Instagram, YouTube, Twitter,
all of the social medias. And that nice sound means that
the project is all deployed, so let’s go ahead and check it out at sheepdog.withkoji.com, we’ll open that up. And this is a link that is
live on the web right now, so anybody can play it. There we go, we have the music, we’re gonna turn that off. And we have a nice little
snake game that we’ve built, in about five minutes. Now the whole point of this is that you can make your own games. I definitely challenge you
to go into the code itself, see how you can make it better. If you have something
interesting that you discovered, leave a comment in the comments. Hope you enjoyed this video, and we will see you next time.

Leave a Reply

Your email address will not be published. Required fields are marked *