Uber-impressive work by t1_hopscotch: It's "2048"!

hopscotch

#1

To my astonishment, today I see that @t1_hopscotch has made a Hopscotch version of the popular number-matrix game, "2048".

Recently, @Ian suggested creating the "2048" game in a thread on this forum. His comment was that it would be uber-impressive (or something like that) if someone would actually do it. It probably wouldn't be easy... But it would be cool.

Well, t1, It appears that you have done just that, demonstrating again that even something kind of complicated and something that other people would really enjoy playing can be created in Hopscotch. I'm impressed. Wow.

Personally, I had never heard of the game before Ian mentioned it, but i checked it out on the app store, and your version of it sure looks like the real deal. If you have the time for it, I would like to ask if you could explain the game and the logic of your complex code. That could be instructive - maybe a little beyond some, but likely to be appreciated, no less, by others. Explained by its author or left as a mystery, I expect that what you've made will see a lot of play, once it's "featured". Very nice going, t1!


Innovative Projects- And What They've Done
#2

This has been many months in the making. Mic drop.


#3

@Liza and t1, I had no idea. Wow. I had assumed that the project was created, shortly after Ian's post, introducing the game itself.

Nope... :blush:

Clearly, a lot more work has gone into this. That's... something.

And, of course. It acts like an enormous project. I've never seen any other take so long to download. I thought it was my internet connection. Let me try that again, just to make sure... same. It's... big, isn't it? Did the lights dim at the Hopscotch server headquarters, just now? Ha. I would never attempt something like this, unless I was working on a desktop or laptop machine with the options to copy, cut and paste... and undo and so forth.

I hope that my questions directed to t1 concerning the game and code logic are appropriate for the forum. This thing may be too complex to even discuss in that knd of detail. If so... I understand. :sunglasses:

Whoa...


#4

That's really brilliant work @t1_hopscotch I'm very impressed by the movements and collision detection of the numbered tiles.:heart::smiley:


#5

I agree, @t1_hopscotch, it's amazing! I've never gotten addicted to Hopscotch project before this! Let alone the mechanics, I'm impressed by one thing:

You coded it so it knows when the game is over and when it's not. I played it, and the grid filled up. I thought it was game over, but it turned out I could still match a pair of '8's. It didn't say game over until there weren't any more moves!

You are so talented! The game is great, although I can't get past 128!


#6

IKR!!!! IT'S AMAZING! GREAT WORK @t1_hopscotch!!!


#7

This amazing piece of work and its author deserve all the props we can offer. Such resourcefulness! Where things available in other languages might make the game almost trivial to code, here it takes both inspiration and perspiration to pull it off.

While the game is legit, and it's fun, the real value here is what can be shared and learned from it. I hope that discussion can happen. I would not be surprised if we see... a... video... on this...? I would watch it! :sunglasses:


#8

Really cool but to me it sometimes glitches and no tiles spawn.:star::star::star::star:️I gave it a rating like the one they have in the App Store:sweat_smile:.


#9

Aww thank you so so much!!! :smile::joy::blush:

I would absolutely love to share what I learnt from making it, @oio! And yes that is the real value — I would know nothing if I didn't get the chance to learn from other people's code.

I'm trying hard not to go on and on about unnecessary things, but I'm going to have to use the details feature (click on each section to expand/collapse it).

The main general lessons that I learnt from making this were:

The most important thing I got from this was perseverance — not giving up.

I did actually start on this sometime last year (around this time as I think it was the holidays as well). I planned and worked on it a few times and left it for a couple of months at times (due to school and just wanting to do other things as well).

I decided I wanted to finish the game during this school break or at least make it playable and so over the past few weeks, I've been coding on Hopscotch for a couple of hours every day or so :grin:. And throughout making it, I've redone a lot of my code in order to make it more efficient or because I couldn't access some bits of code anymore (it's understandable that if you put 200+ blocks in an ability, it will crash if you try to open it again :sweat_smile:).

I've experienced the importance of perseverance before but it really showed again while I was making this. Just don't give up and you can take breaks from code too.

Planning out your code really helps too.

I drew a few diagrams on paper to make it clearer what I was planning so I knew what to do next when I was coding. Writing out what you're planning to do helps heaps, especially because I was doing something that was repetitive.

And thanks @Games I'm aware of that bug but for a workaround, I'd have to extend the wait time between when you make a move and when you can make another move.

@CreativeCoder thank you :blush: how it checks if there are no moves left is by checking if there are no tiles that are empty, then checking if you can make anymore moves horizontally and vertically (basically if there are no more tiles next to each other that have the same number).

I very much appreciate all the feedback :slightly_smiling: :smile: If you have anything else, feel free to share -- like I know the sound can be a little annoying (it was based on the actual game sound) but hey, if I can change the tile colours why can't I change the sound? So if you have suggestions for sounds let me know.

I was planning to add more things achievements that appear for getting certain tiles (512, 1024...), better instructions and credits but I was concerned about the project not publishing which is why I published it in versions.

Anyway thanks heaps again :sparkles: and it's really nice of you to make a post like this @oio, I'd love to continue this sort of thing. I've come across a few projects that have made me smile and would be nice to share, but their creators aren't on the forum so I was thinking of just sharing with them to the Hopscotch Team through email for possible featuring on Rising or Featured.


#10

And the logic is something I want to try to explain as well.

I had to redo this a couple of times to make it as efficient as I could, though I bet there is a better way to do it. I want to explain it because if you can understand it, I'd love to hear your input on how it could be more efficient still. Right now the game is still a little slow. I know that Valgo is working on 2048 as well so I'd love to see how he makes it work too :smiley:

There are two main bits of logic in the game:

Tile Movement and Combining

I was inspired after I saw this glitch while playing the real game (App Store version):


The zeros weren't meant to be there and I started thinking a way of how the game worked. I used the zeros in the logic for my own version so whenever a tile equals 0, it is hidden.

In the version I made, each tile is displayed using objects names A, B, C....P (since there are 16 tiles). And I coded for each situation separately. Like when you swipe right, each row works out what to do. So the row ABCD has its own rule, EFGH has its own rule, IJKL has its own rule and MNOP has its own rule. The same goes with the columns.

I'm going to use the example of the code I used in the event of swiping right for the tiles in the bottom row (which are the tiles MNOP that you might be able to glimpse in the picture above). In the picture I also split the rules in an effort to make it faster for the actual code.

So the basic principle of my version goes like this (this has been refined since):

If M=0, N=0, O=0 and P=0 then
    do nothing

Since all the tiles are equal to 0, when you swipe right, nothing will happen.

Moving onto the next situation

If M≠0, N=0, O=0 and P=0 then
    Set value P to M
    Set M to 0

So here the tile at the very left (M) has a number. When you swipe right, you expect it to go all the way to the very right since there is nothing in between. So it will move to where P is, and this is replicated by setting P to M and then making M 0.

Since we've just done M=0 and M≠0, we'll move onto N=0 and N≠0. N=0 has already been done so far so we'll go onto N≠0.

If M=0, N≠0, O=0, P=0 then
    Set value P to N
    Set value N to 0

Like the previous situation, the tile at N moves all the way to the right to P.

Now we'll continue with checking If M≠0 again:

If M≠0, If N≠0, If O=0 and If P=0
    Check If M=N
        Set value P to (M+N)
        Set value N to 0
        Set value M to 0
    Else
        Set value P to N
        Set value O to M
        Set value N to 0
        Set value M to 0
    End

End

So here, the tiles at M and N have numbers. If they're the same, then we'll add them up and put the number at the very right (at P). Otherwise, we'll just move them to the right and keep them in their order (so N goes to the very right at P and M stays next to it and still to its left at O).

So that's the general principle -- checking whether or not the tiles are equal to 0 and if they aren't, then check if they're equal to each other and add them up, otherwise just move them as far as they go. I did this for every row left and right, and every column down and up.

In the actual code, I did it a little differently by going If P=0, If 0=0, If N=0 and If M=0 instead of the other way with M first. And I also found it was okay to not bother with checking if M=0.

And the tiles moving in the game is just an animation and it's not the actual numbers that are moving. The tiles are moved in each situation.

Here's an example of code from the first situation:


The first block with the █M value (its name should be █M_X) is what moves the square around the M tile 300 units to the right, making it 'look' like it's moving. The "Set value high_C to 1" plays the "ping" sound.

So anyway that's how I did it. I couldn't think of how to do it with collisions since you'd need to account whether or not there are zeroes and if there are numbers equal to each other. That's why I'm eager for input. I don't know how it was done in the original game either. That's my version and if you can see a way to improve it or make it more efficient, let me know :smiley:

Tile Spawning

First I had to check whether or not the player had actually made a move after swiping and I simply ended up doing that by checking if there was a sound played after I added in the sounds.

I had another way of doing tile spawning with Repeat Until, but it took a bit too much time for certain cases (and plus the app crashed after you looked at the rule at the time of this post, but not any more. A current method for doing Repeat Until involves putting an ability inside of itself underneath a Check Once If.)

I've had a bit more experience with coding since I first started on this project, so I thought of a way that was based on arrays (or at least similar to what arrays are, I think they're also called lists but I'm not sure). I am quite new to the concept so I can't explain it very well but basically it's like doing this:

 Set value Group to [apples, bananas, oranges]

But instead, in my code I was thinking of this:

Make a list
If A = 0 then
    Add A to the List
If B = 0 then
    Add B to the List
If C= 0 then
    Add C to the List

and so on....
This is because if a tile is equal to 0, then you can spawn another tile on it.

Set value RandomSpawner to [random(1 -"number of items in List")]
Spawn tile which is at "RandomSpawner" position in List

The value RandomSpawner will be a number chosen randomly. Let's say the number of tiles equal to 0 was 5. A number from 1-5 chosen randomly to equal RandomSpawner might be 3. So then, it will go to the 3rd item in the list, which might be the G tile if it was added as the third item, and that means we will spawn a tile at G.

Coding this in Hopscotch, I did this:

If A=0 then
    Set value 1st_random to 1
    Increase value Most to 1

So this is the same as adding A as the first position in the List, and increasing the number of items in the list by 1.

If B=0 then
    If 1st_random≠0
        Set value 1st_random to 2
        Increase value Most to 1
    Else
        Set value 2nd_random to 2
        Increase value Most to 1
    End

End

This is the same as checking if there's an item already at the first position in the list. If there isn't, then add B to the first position (and I put 2 to represent B). If there is an item at the first position already, then add B to the second position.

If C=0 then
    If 1st_random≠0
        Set value 1st_random to 3
        Increase value Most to 1
    Else
        If 2nd_random=0
            Set value 2nd_random to 3
            Increase value Most to 1
        Else
            Set value 3rd_random to 3
            Increase value Most to 1
        End

    End

End

And I continued this pattern all the way to P. Sorry that it's not explained very well and again I'm not very familiar with arrays and lists. (And I think this was the ability that had 200+ blocks, which had a name starting with "Assign" so you know to avoid it if you happen to be looking around my code.)

Then I set the RandomSpawner value:

Set value RandomSpawner to random(1-Most)

and then I had a whole bunch of rules for this:

If RandomSpawner = 1
    If 1st_random = 1
        Set value A to SpawnedTile
    End

    If 1st_random = 2
        Set value B to SpawnedTile
    End

    If 1st_random = 3
        Set value C to SpawnedTile
    End

    If 1st_random = 4
        Set value D to SpawnedTile
    End

    If 1st_random = 5
        Set value E to SpawnedTile
    End

etc
End

Then:

If RandomSpawner = 2
    
    If 2nd_random = 2
        Set value B to SpawnedTile
    End

    If 2nd_random = 3
        Set value C to SpawnedTile
    End

    If 2nd_random = 4
        Set value D to SpawnedTile
    End

    If 2nd_random = 5
        Set value E to SpawnedTile
    End

etc
End

"SpawnedTile" is just equal to 2 or 4 (chosen randomly).

And that's the tile spawning. Again sorry about it not being very clear but if you have suggestions for improvement please share!


2048 if you're @t1 pls read
How to measure the difference between 2 scores without standard maths
Hopscotch Programming Puzzles
#11

@t1_hopscotch That is truly amazing. I could never imagine myself creating something like this!

One suggestion I have for the future would be challenges. The game on the App Store has challenges where you basically have to get a certain amount of blocks (ex: two 8s, a sixteen and a thirty-two) in a certain amount of moves.

It would be difficult, but it would be AMAZING! It could even be a standalone game!


#12

I'd love to add Challenges! I've thought about this before too. A way to do it would be you have a set number of moves and each time you make a move, it will check if you have > 0 moves and then decrease it by 1 once you've made a move. And it will be able to check if you've got those tiles (I made this code for checking if you have the 2048 tile which could be applied to the same thing).


#13

It's harder than the app store one I got score:47424 and tile 4096
In yours I got score 2046 and tile 256.:neutral_face::sweat::smile::smiley::grinning:


#14

You're good at it!!!!!!!


#15

Yeah challenges would be fun and maybe later if the hopscotch team mad some kind of cloud data you could play multiplayer like in the one that you are with another player and you work together at the same time to get 2048 and the one your against the player and maybe you can add high score for forever so you know your high score the next time you go back in the game and maybe just maybe @t1_hopscotch you could even add a leaderboard and achievements but those probably would be at least a 1 year away(sorry this post is so long:sweat_smile:).


#16

@t1_hopscotch, Thank you!

In addition to having written a very cool and well thought-out piece of code, t1, you have done the only thing i can think of that could have been more impressive to me: you have composed a very nice explanation of the code logic and of the process giving rise to it. Further, you have shared your personal experience of having worked on something for many months - apparently, about a year - and offered some words of wisdom to anyone who will heed them about perseverance.

And, after all of that, you humbly ask for suggestions.

I wouldn't dare.

Your responses to my questions deliver on their highest hopes. Yeaay! By being awesome, you are showing others how to be awesome. I don't want to smother the subject in gravitas, so I think I'll just follow @Liza's lead: "mic drop"!

:sunglasses:


#17

Is it possible to get higher than 2048 in your game @t1_hopscotch?


#18

I haven't been able to get 2048 in the version I published yet and I don't know if anyone else has been able to :joy: The version I made is slower, like I mentioned before, so it'll take a little longer to get to bigger tiles. Though I've been able to get 4096 in the real game too.

But yes it is possible to get the 4096 tile in the project, and even the 8192 tile. I didn't prepare a new tile colour for 16384 and really, if anyone gets that high they can choose a colour :stuck_out_tongue:


#19

Wow... this is really impressive. Way to go @t1_hopscotch!


#20

But what about thing which are even higher than them cause I know 131072 is the highest tile possible unless people hack it and in your game I just got a 1024 so I'm pretty sure it's possible