2048, in Roblox

Help and Feedback Creations Feedback
#1

Not sure if this has been done before, but I have made 2048 in Roblox. It took me just about a day, and could be released as an actual game in a few weeks. I also need to figure out how to make the parts move instead of just basically teleporting them…

Keep in mind that this isn’t an exact recreation, it uses the same game mechanics, but is missing score, the ability to win, and restarting after a fail, in which case the game just freezes; definitely need to fix that. Also, another slight difference is that a number can combine twice in one move instead of requiring more. You may notice it during gameplay.

Here’s a short video showing some gameplay:

Here I will explain the basics of how it works.

Storing the values and numbers

So the first method I came up with to store the numbers is an array, structured like so:

local tiles = {
    {0,0,0,0},
    {0,0,0,0},
    {0,0,0,0},
    {0,0,0,0}
}

Numbers are stored in there, and I have an array of numbers and their tile appearances, listed here:

local numbers = {
    {2, Color3.fromRGB(237, 223, 196), Color3.fromRGB(130, 117, 99), 0.2},
    {4, Color3.fromRGB(237, 223, 196), Color3.fromRGB(130, 117, 99), 0.25},
    {8, Color3.fromRGB(243, 178, 122), Color3.fromRGB(130, 117, 99), 0.3},
    {16, Color3.fromRGB(244, 151, 98), Color3.fromRGB(130, 117, 99), 0.35},
    {32, Color3.fromRGB(246, 126, 92), Color3.fromRGB(249, 244, 226), 0.4},
    {64, Color3.fromRGB(246, 94, 57), Color3.fromRGB(249, 244, 226), 0.5},
    {128, Color3.fromRGB(237, 206, 115), Color3.fromRGB(249, 244, 226), 0.6},
    {256, Color3.fromRGB(237, 202, 100), Color3.fromRGB(249, 244, 226), 0.7},
    {512, Color3.fromRGB(237, 198, 81), Color3.fromRGB(249, 244, 226), 0.8},
    {1024, Color3.fromRGB(238, 199, 68), Color3.fromRGB(249, 244, 226), 0.9},
    {2048, Color3.fromRGB(236, 194, 48), Color3.fromRGB(249, 244, 226), 1},
}

I’ll breakdown what this actually represents. The first value, is just the number that the later values represent. The second value, the first RGB is actually taken straight from 2048, which is the background color of each square. The third value, the second RGB, is also straight from 2048, which is just the font color. I added in the fourth value as a 3D touch, which modifies the height depending on how big the number is.

Rendering the game itself

Now, the game could technically be in the console, because I have a system for printing the game into the console for debugging purposes, but I’d rather play it regularly, and with that, I need a way to render the tiles. I have an update() function which loops through the folder in Workspace that the tiles are stored in, makes them fade out and shrink as a nice transition (at least compared to the rigid teleportation the previous tiles had), and then go through the array and fade in and grow some tiles to regular size and transparency. This function doesn’t run constantly, which would result in some pretty buggy stuff.

"Collision" logic and combining tiles and stuff

2048 isn’t 2048 without the 2048 mechanics, so that’s got to be added in… with a lot of array indexing. I basically run through every part of the array, checking if the tile is “satisfied” (doesn’t need to move). I keep looping through the tiles, applying the correct mechanics to them until all of the tiles are satisfied, and by then the game moves on. The tile is considered “satisfied” if:

  • It is against the wall the same direction of movement (is being pushed into a wall)
  • It is against a tile that it cannot combine with
  • It combined with another tile.

Adding new tiles to play

When you play 2048, you can’t really play when you have no tiles, therefore I need to implement that, using a simple math.random() function, I can make a random number that is either 2 or 4, as 2048 randomly spawns 2s and 4s to keep the game going. Although, randomly spawning 2s and 4s can be fine, until it deletes another tile, even possibly something important, like a 1024. To solve this issue, I need to find tiles that have a number value of 0 (no tile). A function loops through everything, until it finds a black space, which is usually pretty easy to find, unless the entire playing area is full. Then the script hangs and temporarily freezes gameplay.

Thank you for reading this and have a nice day!

9 Likes
#2

You could use the TweenService to move parts right?

2 Likes
#3

Yes, but I use arrays to update the tiles (all of them) every time something is done, like moving or combining.