Coding snake HTML

Hey folks, Chris D’Elia on-air. We’re, going to start with a blank text file. We’re gonna make a quick game. This one’s, gonna be a snake-like game and that’s, going to be the kind of game that used to be on cell phones before smartphones.

Since I’m a dinosaur, but the original version of the snake game was also in our arcade or PC game or something from the 70s. So okay, so we’re going into here. We’re going to do canvas equals a document get element by ID.

It’s, most verbose and ugly, where we have to be doing a little bit: interaction between the HTML, the JavaScript. Once we get this stuff sorta a setup. It’s, not so bad get context that’s, gonna grow, a graphics context or buffer, and then we’ve got document, dot, add event listener.

Let’s set up our keyboard. Hooks key down is all we really need, since this game has momentum like a function called key push, I can spell push correctly. Let’s, go and get that step set up as well as start off our game.

On interval timer to call a game function 15 times every second, that’s milliseconds, so we’re, dividing it into it and using flow frame rate since snake works on a very low frame rate. We’re gonna have X, velocity and Y velocity values for a snake.

Part of the thing about snake game right is that you just push the keys to make the character move and it keeps on moving with momentum. We’re gonna switch on the key code. Some people don’t like switch cases.

I don’t like some people, but more importantly, key codes in particular are great case for switch cases. It’s, kind of a natural fit like peas and carrots, and I’m also gonna say. Even though I don’t have all the Kiko’s.

Memorize cuz, I’m, not a nerd. Okay, I’m. Not I’m a nerd. I’m, not that much of a nerd, but after a thousand hours training people wan na want to gain. Do all this stuff, you start to figure out that, like 37 through 40, is the arrow keys and it’s left and then clockwise, because you need two concepts on top your head, when you’re walking people through stuff on skype.

Okay, so there’s, our input now handled. We also want to have our player positions, equals P y equals. Let start in the middle of the world. I’m thinking. The middle work sitting at 20 by 20, so grid size and tile count, will both be 20 cuz 10 times.

20 is 400 and let’s also have an Apple X and an apple Y as our goal, which will start at 15 15. Just to keep things simple, so player X has got a plus equal X, velocity and then player wise got a plus equal Y velocity to implement some rap for those.

So if P X & # 39, s goes less than 0. Some some scene that games rap. Some games, the snake don’t. This game is going to rap, so you know there. It is now again I’m gonna warn. I can’t say it enough times because never have times, which is the previous video people still like, seem to got confused.

This is not meant to be a follow along tutorial at home. Obviously I do those kind of things they are much longer form and more detailed than this, so that’s, gonna wrap the. Why let’s also do a context.

Dot fill style equals black, but I will say to many people who come from the other end of the spectrum where they they have some experience. Maybe first-year computer science, students whatever or new to games is the people who don & # 39.

T really have a sense for the fact that, like there’s a time and place for hockey hockey hockey hockey coding right that, just because you can write rigorous code and I can write rigorous code and professionally, I have it’s.

Also, there’s a time and place for writing some really just fast garbage, because often times I’m, a big believer in the cerny method, which is a built around the notion of rapid prototyping to prove concepts and throw away code Bases where it’s, really it’s about standing up how quickly didn’t get this game play testable.

Oh, so we’re gonna get a trail here, for our trail hold on. You ever need an array for our player because one of things about a snake game right is: it keeps track of all previous positions. Let’s also keep a one called tail to be how long our tails supposed to be trail length, and so anyway, there is a value.

I’m. A strong believer in the notion too, of you, like can’t. Your brains, a terrible emulator, is the way I like to explain it that if you try to close your eyes and play like pac-man or pong or breakout or something you can’t ooh there’s, our x and y, which were Part of mechanics of a snake game, it’s.

You stepping on your tail. You’re in trouble, so we can do it really easily here by doing this, so if it matches on X and it matches on Y, then tail is going to go back to come of five speaking of it matching.

We also need to check and see if we step on that Apple hello no equals five. If we step on that Apple, then we want to increase our tail length so tail plus, plus and as part of the two. We want to randomize that so I’m at the floor, so it’s, an exact integer, and this is going to be math.

random, which is 0 to 1 times tile count on each axis, a part of where I also got these Sort of very, very rapid hacky demonstration techniques background. Oh, we also just going to pile this on trail dot push I’m going to also I’m trying to show
some kind of language agnostic code.

One exception here will be this rapid instantiation of an object. Literal it’s. Gon na help us out here a little also going to trim down the tail. So, if tail down link is greater than tail after being penalized, it shave it back down and also keep it a consistent length as we play by shifting off the end.

Okay, so I think that’s, it for the code game, dot HTML anyway. The point I’m trying to make is that your brain can’t really simulate real time live action gameplay. So if you’re working on a game that’s, really strategic, then in that case it is something you can paper prototype, you can board game, prototype, etc.

When it’s, a game that’s really built around reaction times and angles and spatial layouts, I’m a believer. You need it working on machine because the brain and turns and dice rolls and whatever can’t adequately simulate that kind of stuff certain kinds of games can be certain games can’t, be I’m, a pinball guy That’s, my background, that’s, this type of type of RK style gameplay.

I study so I’m. A big believer in you got ta build a rapidly digital prototype. So anyway, part of my prototyping background was for seven months. I’m getting so long for seven months. I made an experiment: gameplay probably ate my tail, so I lost my length so Abe that part works experiment, game project every day for seven months, that’s called the interaction artist series.

Those games are no longer online. Some of them are awful or offensive other stuff, so I took them down, but they’re all in flash, so some browsers don’t like him anyway. That was long. I was a decade ago so anyway, that’s.

Also part of why, since I spent 219 days, making a digital playable game, every night got pretty used to hacking, in addition to all the other rapid prototyping that have done professionally or on my own projects, etc.

So, anyway, again, if you want to learn game programming, please don’t use this code. I mean you’re. Welcome to I’ll put up on the screen. So if you want to try to compare to it, you can kind of like give it a look.

Can I just easily change my font size there we go. I won’t help you with this game, but I will help you override code. Your first game comm, which is really what this whole stunt, is trying to encourage people to go check out that’s.

Gon na be my instructor dashboard. We don’t want that. Let me open seven browser code reference game, comm, free video course. I literally worked in private training, walked dozens of people through this exact content, not over 50,000 people.

Take this free course. You can do it an evening. Just need a free browser, standard, chrome, standard, Explorer standard edge, standard Firefox, whatever Safari should work plain text editor, like I say, text edit, you can use sublime text.

If you’re already happy as a coder you can use whatever it is. Notepad will work and I actually demonstrate this notepad just to show you you can do it notepad build. I got ta go pick up, you know let’s, say anyway build games.

I look forward to paying you in the future go to code. Your first game, calm after you do that if you want to figure out some more next steps check out gam, keto comm, that’s, GA MKE do there’s, no in the middle game, keto gam, keto and there you’ll find a link with a discount to my second video course cover some 19 days style, basic tile-based collisions for other kinds of mid-eighties style games movie out of the 70s and 80s.

Then we have a world like practice: club gam, Kido Club, entirely online people building games together, learning a lot having a ton of fun doing it. So look forward to seeing you there, you

Go to products