develop

Coding Challenge #94.1: 2048 - Part 1



Sharing buttons:

oh is that the coding train I see coming

along the tracks oh I will when it's

brought us today oh look it's the game

2048 so this is a much much requested

and often not a not whatever the

opposite of requests it is suggested

that I don't attempt this Kody

challenging many of you watching this

are probably familiar with this game if

you are not this game is a sliding block

puzzle created by the developer

Gabrielle cerulean in a weekend it

became extraordinarily popular is now

actually open source you could go and

check out the code that is written in an

excellent way I'm sure much better than

whatever code that I'm going to write in

this video this of course is a game that

is a very similar to threes and another

game 1024 so there's a lot of this game

comes from a long line of sliding puzzle

add numbers together I can't believe I'm

still wearing this games so what am I

doing here so I have attempted to make

my own version of the game and I really

what I've discovered in this process

which I've already completed this and

you could see how ugly mine is compared

to this one is that object-oriented

programming would really help me because

one of the main things that's missing

right now look at this not from here

because look at this beautiful look at

all these beautiful animations is I

don't have any animations but I have the

functionality of the game I even have

some some little things in here that you

could learn from perhaps I don't know so

uh this is why I'm here this took like a

long time and I had a lot of problems

and I couldn't solve a whole bunch of

things that you would think that I would

be able to solve but I really had

trouble with that and the coding

challenge is apparently it's in

something like 2048 parts so it's

actually right now it's only in four

parts if I come back and do the

animation so I'm sure it'll be five

parts if you can make it through all of

these parts I will I don't know if I

could somehow give you a medal I would

that would be amazing

but I would love to hear your feedback

get your suggestions for improvements

you can make your own version of this

your own twist on this game and you

could submit it at the coding training

com instructions are there link in this

video's description for how to do that

so part 1 is pretty long parts two and

three are kind of short and part four we

don't speak we don't speak about the

part four

you don't speak about the part four so

enjoy I hope to see you sometime again

in the future I'm going to go take a

trip on the coding train to the in the

corner and wonder what I'm doing with my

life train goodbye so what is the core

let's let me first before I get started

coding I really am very pessimistic

about this let me try to talk through my

understanding of how the game works and

what kind of code stuff I might need all

right so the game by definition is

played on a four by four grid now again

there are obviously variations of this

this is not their their predecessors to

2048 of the same game with slightly

different designs and flavors and ideas

but the core idea of the 2048 game is

four by four grid it starts I think with

two random spots filled in with either a

two or a four and then you can press a

key right up left down obviously on a

mobile or touch version you can swipe

and you send all the votes so if I swipe

to the right I send all the values this

way so the two and the four would end up

here then maybe a new value pops in if a

two pops in here and I swipe to the

right again numbers that are the same

will combine so these twos will combine

into a four and so let's go back and

look at that and we can kind of see

let's see that happening here right as I

press down nothing happens I press to

the left everything goes the left of

four moves to the left at two uh let me

move that to up and then let me move

that over those two six teens will

combine and those two twos will combine

and these two twos will combine there we

go not give you down so you get the idea

so what do I need

well actually interestingly enough all I

need to figure out

if I have basically four you know I have

a matrix a two-dimensional array but

it's really just an array of arrays and

I did too many of it so if I have four

if I can figure out how to just condense

things to one direction one direction

then I don't know any one direction

songs otherwise I would started like

singing as a joke but I don't actually

know the name one direction anyway I'm

more of like a ninety eight to greet 98

degrees I don't even remember whatever

was in the like 1940s when I was a

teenager okay so yes 2048 if I can just

get them figure out how to do it in one

direction then if the user or the player

presses up I could kind of just rotate

the whole thing and go in that direction

so so let's let's see if we can figure

this out it alright so let's start

writing some code I'm going to say I'm

gonna have a variable called grid and

guess what I'm just gonna hard-coded I

feel okay with that do you feel okay

with that

obviously what is it it's going to start

as it needs it's basically this right I

need to have four arrays of zeros and

let's see if yeah there we go this is

that's the book 2048 board I could try

to say like new array and fill and math

and all that stuff all these like but

this is gonna work there we go so now

what do I need to do first the first

thing that I need to do is for each is

unless write a function to do this is

add add num add I don't know what's add

spot I don't know how to call this

add number so what the add number

function should do is it should pick a

random location that does not already

that has a zero and it should add a two

or a four there so what I'll do is so

first I should check first I need to

check is the whole board full of

everything that's not is there are there

any zero spots so let's make a list of

all of the in

all the possible spots that I can add so

I'm gonna say I'm gonna make an array

called options and now what I'm gonna do

is how could I use to get the index

values out I'm just gonna loop through

it so I'm gonna use I and J I kind of

have this idea that I'm gonna use all

these fancy array functions you're just

gonna loop through it I and J and I'm

gonna say if grid I J equals 0 this is a

valid spot options dot push and I'll

just make a little array with I and J I

and J in it oh maybe I'll make an object

X I Y J ok so I'm going to put a little

object in that array now what I'm going

to do is once I'm done I'm going to say

let spot equal a random option so if

options length is greater than 0 then I

can pick a spot and then I'm going to

say grid spot dot X spot dot y spot dot

y equals and I can I basically want to

pick I don't want to pick a 2 or a 4 so

I can use a ternary operator whoo I've

gone totally nuts today which basically

what a ternary operator does is it says

what kind of pick a random number and

okay hold on I'm gonna pick a random

number R is a random number between 0

and 1 and I'm gonna say is are greater

than 0.5 if it is give me a 2 otherwise

give me a 4 I think and I don't know if

this should be in parentheses or not I

don't think I need it so this is a nice

little way of just giving me based on

whether R is greater than 0.5 give me a

2 or a 4 I've got a written in their

statement but everybody

Wayans when I don't use the ternary

operator so I'm gonna try using it and

who knows if I got it right so let's in

setup I'm going to say console dot log

table I'm gonna say add number add

number and console dot table grid

console table is a really nice way to

display a array in the browser in the

end of JavaScript console in the browser

so let me do this so I look at that look

at that let's do it again

2 & 2 2 & 2 all right so in a way like

almost 100 just do this the entire thing

in the console and not draw anything

because I could just do the whole thing

in the console and play the game but I

think it's gonna be much easier if I can

represent what we're seeing in the

console in the canvas so let's put that

into draw so here I'm gonna this is my

nested loop that I'm going to be using

constantly and I am going to first draw

a rectangle and I guess though the size

is always going to be the width divided

by 4 you know I think I can probably for

right now just say it's a hundred like I

can hard code a lot of stuff cuz it's

400 by 400 refactor later and so I'm

gonna draw a rectangle at I x WJ x w w w

and I'm gonna say no fill stroke weight

to stroke zero and let's make the

background 255 and I should see a nice

grid now there we go I've got my nice

grid now what I should do and this is

almost like too big I don't need that

much space okay now and I'm gonna move

this over a little bit so I'm not

staying in front of it so much I am

going to now I should also say if grid I

J is not equal to 0 I could draw the

number there now let's just use the text

function in P 5 so I'm gonna say

text-align:center

our text I want to draw the value so I

should actually just let me get the

value the value is grid I J and so I'm

going to draw that value at x w- w / -

that's kind of like the center J times W

minus J divided by 2 W divided by 2

what does that do and I'm gonna say text

size 64 I don't know fill 0 no stroke

this should be rendering it and I should

I should just put this in its own

function just to kind of like get out of

here function draw grid and I'll call

that in draw so let's see how this goes

yeah that's not so horrible I've seen

worse so let's - W divided by 4 about

oops Oh what happened here J times oh

wait oh wait does the text draw from

let's see this so I'm seeing a 4 times

Oh interestingly I am seeing things in

the wrong differently than I'm seeing

them here because the way that I'm

treating columns and rows and I think

I'm drawing stuff above so it actually

should be J times W plus W divided by 2

why do I sometimes get one thing

text-align text-align:center Center

that's what I meant to do thank you

text-align:center Center there we go

I knew those that's what I wanted to do

but why am i sometimes getting only one

number hold on let's say I let's

actually draw the let's draw the

coordinates

look at me

I have everything shifted over wrong

that's clearly the problem so my ex

location is I times I times W minus plus

what am i do the minus four it's a plus

I lost my mind

oh what a terrible error that's much

better sorry you had to sit through that

so now it's fine and now I can put the

value there there we go so now this

should work this is my opening board no

matter what whoo okay we're getting

there

20:48 here we come so now what's the

deal I'm just gonna say for right now

whenever I hit the spacebar

I'm gonna send everything to the right

okay so let's think about this there's

if I have an array of numbers there's so

many different ways you could approach

this problem when I'm sure I'm not going

to do it in the most efficient or

sensical way but the first thing that I

would do like let's say let's say this

is the row the first thing that I would

do is just pack everything to the right

so that any empty spots would be left on

the left side so let's first do that so

that's let's write a function called

slide and I'm gonna give it an argument

a row now I know that I probably am

mixing up my rows and columns have to

figure that out later but I'm going to

assume row it's just a single array and

what I want to do is I want to look

through I'm gonna take that row and I

want to filter out I could use filter to

I mean it's sort of silly I just want to

move everything over if it's not a zero

so let's try using let's let's try using

some array functions I'm gonna say row

equals I'm gonna want to return I'm

gonna so I'm gonna we're going to return

an array so array equals Rho dot filter

so this is actually going to keep

everything that is not a zero in the

same order this is kind of crazy but

filter

is a function that takes any value and

let me just and that and that because

there's a true or false test just

seriously then I'm gonna say return

array so first I'm just gonna oh no

don't and then what I need to do is I

need to say I need to add two I need to

add however many so whatever many their

rates are like the missing is all I

could just sort no I can't sort it

missing equals 4 minus array dot length

and I'm just going to I'm gonna say let

zeros equal an array of missing size

filled with zeros and then I should be

able to just say array dot put now what

how do you put something on the front of

the array push would go on the back

which maybe is fine because I could be

sliding that other way just be sliding

the other way so I'm gonna say push the

zeros and then return the array let's

let me just test this function out right

so the idea here let me get rid of this

console this console dot table stuff

where is that yeah I don't need that

anymore so let's say I haven't or let's

say I want to say slide and my array is

zero zero two four okay so push doesn't

do that it doesn't push I use can cat

maybe can cat

where's I slide array can cat zeros no

oh it makes a new array it makes a new

array okay so I need to say array equals

array can cat zeros okay there we go now

let's take a look at this let's get out

of here

go back to here there we go

it's slide

everything to the left yeah and let's

just try some other things slide 4 0 2 4

4 2 oh yes that's good everything's

going that way which is fine I don't

care which direction that's fine with me

so now I should say every time I press a

key

I'm just can use the spacebar right now

if key key equals space what I want to

do is loop over loop over the grid and

say grid index I equals slide grid index

I right so this is sliding them over for

each one oh they're going up so that's

great so after I do that right each time

after each time I play play the game

like this is one this is one move so to

speak then I should add a number again

add another 2 or a 4 randomly great this

appears to be doing what it's supposed

to be doing be nice to have an animation

but there is no animation now there's no

more room left that's fine ok ok all

right so now I need to combine so just

like I have this slide function now I

need a combined function so assuming

that I've slid everything one way or the

other what I need to do is if there are

two that match starting from the back

they should be combined into one number

all right I know this is where I ran

into a problem before someone's I'm

gonna need somebody who vodka goes live

to help me oh if nothing moves no tiles

should be added ok ok I gotta get to

that later yes so that's a part of the

game we don't if if you're done if

nothing can move you can't add another

tile but I will I will

I remind me I need to fix that I need to

fix that

so let's do combine so if I have a row

what I want to do kind of use reduce

filter then I could loop through it for

sure so let's let me try doing this very

manually right now let me loop from the

back right let me loop from the back all

the way down and first I want to say and

I actually just want to go to here

because I want to say a is the this one

right the current one that I'm at like

the last one and B is row I minus one

and if a equals B then row I should

equal a plus B and row I minus 1 should

equal 0

and then I shouldn't do any more so I'm

going to say break so this is again I'm

gonna need to do more but this and this

probably way for me to write this

shorter but I'm just gonna go from the

back and check the last two like I'm

gonna check so if this is so we fit got

but I've already slid everything so if

it's like this I'm gonna check this one

versus this one if they're the same this

becomes 0 and this becomes 4 now if this

were here I still have to do more I've

got a slide again but let's see here now

I should be able to now I should say

where I want to slide the grid oh and so

hold on oh I'm actually operating on the

row itself so in this case I don't need

to I'm up this is a little bit this is a

little awkward I'm making a new array to

send back and here I'm operating on that

array so this is a bit awkward but I'm

just going to remember that so I'm just

gonna write a comments operating

arrey itself making new array and so now

I'm gonna say after I slide I'm gonna

combine so I'm gonna combine let's see

if this works okay I forget what I just

press spacebar and everything goes up oh

boy

error error cannot read properties zero

of undefined at add number sketchy-ass

line 20 sketch touch a s line 20 if grid

o had number oh oh I messed up something

Oh

because silly me silly me if I am not

returning her this is terrible

so let me actually just say return the

row even though it's the same array I

can return a reference to itself and

that's going to fix it now here's the

thing this is I don't think this is

working so those two should combine to

be a four they're not at the moment and

something weird is going on so let me

look at my code again all right let me

be try to let me try to be smart about

this here and let's try to do some work

in the console so if I say combined 0 4

2 2 that's right 0 4 2 2 those two get

combined now I need to slide that slide

zero four zero four and that's lid the

other way so I'm combining the opposite

way that I'm sliding which is definitely

a problem

so maybe what I should do is just slide

the other way around which would be let

me think about this I could just reverse

it right but that's probably a bad idea

what I should just do is right I could

no no no I can just say zeros

cat array right I could just put the

zeros on the other side yeah that should

do it

right so now if I say combine zero four

two two zero four zero four then slide

zero zero four four okay this seems

right now so now hit spacebar eight yep

they've slid down to four two two two

four yep yep okay this is working now

okay now I'm sure there's going to be

lots of scenarios that aren't correct so

what I need to do also is after I

combine where we need to slide again

right because and so really what I what

I kind of want is I need a I operate row

row equals operate on the row so let me

make this one function where I get an

array and I say row equals slide row

equals combined row equals slide and

then return row so I just want to do

this in a function I'm in some ways this

is kind of silly and what I'm doing here

but I just want this to be a separate

function so I can call it myself

so now up sketched out 48 returned I

forgot my R okay so now what I want to

do is I want to say operate on zero zero

two two that should now be zero zero

zero four operate is not defined I

didn't refresh I is not defined Oh silly

me these are no longer grid index I

these are row okay we're we're moving

along here operate all right that's good

okay operate that's right

now here's what's going to be wrong

right this now should be zero zero four

four is that correct so I need to do it

one more time

but I need to be careful because this

should not go to eight so how do I

consider those two as different

scenarios I mean certainly right if I

just run this again it can only happen

twice because there's only four spots

but this isn't going to be correct

because like this oh I didn't did i

refresh this gave me the correct

response but this is going to give me

the incorrect this should be zero to

four this would be zero two four four

and I got zero two zero eight because

the four and the four combined so I

suppose what I could do is the second

time I do combine alright the second

time I do combine I could start from the

second-to-last spot right just start

from the second-to-last spot or do

combine twice before sliding that's an

interesting idea

well this actually do the trick so let's

say operate two four two two zero two

four four that is correct

Oh interesting

can anybody let me think of I think that

actually worked

are there any other scenarios that

wouldn't work like operate zero two two

four let's try this one this should be

zero zero zero four ah

that's not right oh is that or is this

correct this is this wouldn't work right

this should give me zero zero four four

right it is zero zero four four

so the

Raik so actually am I just being silly

and I just need to do combined once but

get rid of the break and so let me think

about this look it's a look at the

combine if I get rid of the break ah so

I think here's what I could do so let's

let's say I have this is the case that's

a little bit weird

I have zero for two - if I do this and

now try to combine again and then slide

these won't go together but and if I do

this then I this should give me zero

four zero four and then slide they will

go together so I think I'm thinking this

through I think that I can actually I

knew it'd get rid of the break and just

come back all combined once and call

slide again after that's correct that's

correct

well is another one of my scenarios and

that is correct

the break is so silly I thought I was

being smart by getting out of there but

actually I just need to combine

everything and then slide everything ha

ha ha okay wonderful I think we're just

about kind of done right so now I need

to whoops uh-oh what did I do

rose not to find a key pressed oh yeah I

messed something up

where's that line 38 oh look at silly me

these are grid index I and down here I'm

passing it to RO so they're row here

very silly thing that I've done here

okay so now I hit space yep

this to me is the behavior of the game

now here's the thing yeah here's the

thing

I shouldn't be adding numbers if nothing

moved so one thing I have to check is if

anything moved so one thing that I might

do is right here I might create what I

what I think I'd like to do is let past

equal copy grid so let me make a

function copy grid we're past equals

this is very silly but I'm just gonna do

this past equals the new a new

two-dimensional array and then our copy

new no no grid extra I'm going to call

it extra extra equals a new copy then

I'm just going to for I'm going to use

my nested loop which I have somewhere

else I'm sure I could just you slice or

something but I just don't have it

within me right now why do 2048 extra i

J equals grid I J okay so I'm just and

then I'm gonna say return extra

so that's just a total copy of the

two-dimensional array so past so past is

past is now a copy and now this is the

new grid so I can check to see if

anything changed so I can say changed

equals compare copy and grid okay so I'm

gonna write another function this is all

very silly but called compare where I

have two different matrices and I'm

gonna say if a does not equal to be

returned something changed return true

so true means something change I'm gonna

check every spot as soon as something's

not equal something moved and then if I

get all the way to the end I'll just

return false so now I should only add a

number if changed now add a number okay

here we go oops

so p5 doesn't like that I call it

something copy so I'm gonna call this

copy grid and I'm gonna do this so now I

should be able to say whoops OOP cannot

read property 0 under spine at compare

sketch dot J's line 37 so a and B in

compare oh and this is called this

should be passed this is why shouldn't

use the word copy this is passed that

should be passed oh yeah no nothing's

moving so I don't get a new number

nothing's moving so I don't get a new

number got a new number got a new number

got a new number got a new number

nothing's moving got any number all

right

so ends part 1 of 2048 where I have the

entire game mechanic but only for going

in one direction one direction I'm going

to take a short break and have a part

two to the 2048 challenge where I deal

with the rotation of the matrix I and I

hope you enjoy watching that part and

then the game will be finished

[Music]

you