- Happy back to school.

It is August 31st, school for me starts next week.

On The Coding Train, I am going to

attempt to do a classic again.

I am going to attempt to do a coding challenge

and pick the Snake Game.

And yes, I have done this before,

but I'm going to do this in order to celebrate

something that was announced today,

the P5JS web editor.

(audience cheering sound effect)

So the P5JS official web editor is out

and I'm going to try...

The nice thing about this is when I code this,

at the end of it, stop with the sound effects,

at the end of this, you will be able to just go directly

to this URL, which I will include in the video description,

and hit duplicate.

You'll have to make an account for the web editor,

hit duplicate and then make your own version of it

from my code and share that with me.

So I will include all about how to do that

in the video description and I'm going to give myself about...

Oh, my watch isn't on.

There's not timer but I actually have to go,

I have to be home very soon so I'm going to give myself

about 20 minutes, which of course, this is going to take

longer than that but let's see how it goes.

All right so however long this video is,

is however long it takes.

Hopefully, there will be no edits.

Everyone once in a while, you know,

there just has to be an edit

'cause the whole system crashes.

I better get coding.

(deep exhale)

Snake game.

Have you ever played the Snake Game?

The idea of the snake game

is there is a

canvas,

you are a dot, like a little square on that canvas.

Another dot, or another little square, appears,

which is a piece of food.

You want to move,

you can only move to the right, up or down, along,

grab that piece of food.

Once you grab that piece of food,

a new piece of food appears somewhere else

and you get a little more on your tail.

You get another piece of your body

and you get the next piece of food and it gets longer

and it gets longer and anytime you hit the edge,

if you run into one of the edges,

you die, the game's over.

Or if you hit another part of your body,

and it becomes much harder

as your body gets longer and longer.

That's the snake game, that's what I'm going to code.

So in order to do this,

I'm going to use object oriented programming.

In my previous version of the coding challenge,

I used like this constructor function thing

and now we have ES6 classes.

I want like a happy sound (horn blares).

So one thing I'm going to do is I'm going to show you...

Andby the way, if you want to know all about

the P5JS web editor, check a link to a Medium article

that is in the video's description

and a whole bunch of videos from the Processing Foundation.

THere's a nice video with Cassie Tarakajian,

who created the editor, describing all of it's features.

But one feature is that I can go over here

and find this little (tongue clicks) thing,

this little tick, less than, greater than sign.

Whatever it is, and I can say, "Add file."

And I'm going to add a file and I'm going to call it, "Snake.js"

and now, I have a file called, "Snake.js"

where I can create the snake class.

Now, if you've never done object oriented

programming before,

the idea is that this is a teth-link

for this snake object that I'm going to make in my code.

And it has a constructor function.

I will refer you to my tutorials about

broken object programming ES6 classes.

Now...

But in order for...

I need to actually go into index.html

so that

the page, when I run the code,

is actually using both sketch.js and snake.js.

So that's there.

So now I have sketch.js, which is just a...

Oh, and I need to see this.

A 400 by 400 canvas.

And snake.js, which has nothing in it.

But

what I'm going to do is I'm going to say, let snake,

and end setup,

set-up being where the code starts

in a P5JS sketch.

Snake equals new snake.

So I've made a new snake and what do I want to do?

And I want to update the snake's location every frame

and I want it to display it.

So the idea here is I want to say Snake.update

and I want to say snake.show.

I'll use show as meaning show yourself, display.

Hmm, what is this?

Snake.update is not a function.

Oh come on, I have to write the code for it?

Yes, I have to write the code for it.

So if I'm going to write a function called update,

that means I have to put a function in the snake class

called update

and then I have to put a function called show.

Ta-da, I'm done.

Coding challenge complete, snake game not all.

So this is like the skeleton of the code

but I actually need to put stuff in here

and I'm going to hit shift tab to tidy up the notation.

Okay,

what do I need?

So I'm going to do something a little weird.

I know that what I need is an array

because even though the snake's position,

you could think of as like a single X,Y location,

I botched this the last time I did this.

Really, what I want is an array because

I want to keep track of a list of all of its locations.

And maybe the first element and probably, more easily,

the last element of the array.

When with only one thing,

is it's the sort of head of the snake,

the front part of the snake.

So I'm going to do that.

I'm going to say

this, I'm going to call it a body, is an array

and then I'm going to say, this.body index zero.

I'm going to put one thing is createVector.

Now, createVector is a function in P5

that creates a vector object and that vector object

has an X and a Y.

So I'm going to create it at zero, zero.

And then in update, I'm going to say

this.body index zero.x

plus equal this.xspeed

I'll call it xspeed or xdirection or something

and this.body.Y, index zero.y equals this.ydirection.

Oh, this is so ugly

but it's the way I'm doing it, right?

Instead of having...

It's a little weird like really, it's just one thing

that's moving around, I just have an X and a Y.

Instead, I have a body index zero X

and a body index zero Y because later,

imma get to add more pieces to the body.

So if I run this, what's this.xdirection, this.ydirection?

Doesn't even exist so those are going to be variables

that tell me is the snake moving to the right or left?

Is the snake moving up and down?

So those values,

this.xdir will start them at zero.

(deep exhale)

So there's zero and so...

And then show.

I am going to do something, I am going to say...

What do I want to do?

Showing the snake is drawing a rectangle.

I'm going to do something a little bit weird.

So I'm going to draw...

Again, eventually, this is going to become a loop

'cause I'm going to be drawing all the pieces of it.

But let's just start with putting in the X and a Y

and I'm just going to say, I'm going to make it 10.

This is going to be a little weird.

Actually, 10 by 10, the rectangle,

and I'm sorry that you can't see

all the code, let me...

I'm not used to doing challenges with the web editor

so let's see if I can make this a little bit wider.

There we go.

So okay rectangle and then

say fill zero,

just to make it black and look at that.

Already, I see that...

I better save this.

Oh saved a minute ago.

It's auto saving, that's wonderful.

There it is right there.

Let me make X direction one.

(groans)

Oops, two equals by accident.

Look, it's moving now, right?

Because the ID in update the body's, head's

X location is increasing, right?

If I made this 100, it's moving really, really fast.

10, it's moving pretty fast.

If I change this back to zero and make this one,

it's moving down.

I could do all sorts of weird things, make that five.

But that's not, no longer in the snake game.

The snake game, by definition,

I can only move horizontally or vertically.

So I'm going to start these at zero

and then I'm also, just right now,

I'm going to change this to one.

I'm going to explain, I'm going to do this in a funny way

that I think might work well.

It's a tiny little dot, a one pixel dot, that rectangle.

I am going to now, in sketch, I am going to have

the keyboard be the controls.

So I'm going to say, keyPressed.

Oh, I forgot how to do this already.

(chuckles)

So if

key

equals

up,

what is it in P5?

Basically keyPressed is an event

that whenever I press a key, this function happens,

that I can check what key did I press.

But I totally can never remember

how to write this function.

So let's try and look at the P5 reference.

Somebody maybe in the chat will tell me.

Let's look at keyPressed.

If value equals zero, no.

If keyCode equals left arrow.

This is good, this is what I want.

It's the keyCode.

So key is for

which character I press but if I'm using the arrows,

I need to use left arrow erase.

Let me actually just grab this

and I'm going to say if keyCode,

and I know I can use this switch statement.

I'm just not going to right now, okay?

(sniffles)

Please don't, don't at me.

That's what I'm supposed to say.

Somebody taught me that who's younger than me.

(chuckles)

keyCode equals left arrow,

keyCode equals right arrow,

doing a terrible job at paste,

paste,

down arrow,

up arrow,

ah.

Don't hide.

Auto format, there we go.

Okay.

So now what I want to do is if it's the left arrow, then

snake.setdirection

this is the way I did it before, I remember.

Left is negative one to the...

Negative one along the X