gabrielecirulli / 2048

A small clone of 1024 (https://web.archive.org/web/20140328011720/https://play.google.com/store/apps/details?id=com.veewo.a1024)

2048

A small clone of 1024, based on Saming's 2048 (also a clone).

Made just for fun. Play it here!

The official app can also be found on the Play Store and App Store!

Contributions

Anna Harren and sigod are maintainers for this repository.

Other notable contributors:

• TimPetricola added best score storage
• chrisprice added custom code for swipe handling on mobile
• marcingajda made swipes work on Windows Phone
• mgarciaisaia added support for Android 2.3

Many thanks to rayhaanj, Mechazawa, grant, remram44 and ghoullier for the many other good contributions.

Screenshot

That screenshot is fake, by the way. I never reached 2048 😄

Contributing

Changes and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specific branch and request to pull into master! If you can, please make sure the game fully works before sending the PR, as that will help speed up the process.

You can find the same information in the contributing guide.

License

2048 is licensed under the MIT license.

Donations

I made this in my spare time, and it's hosted on GitHub (which means I don't have any hosting costs), but if you enjoyed the game and feel like buying me coffee, you can donate at my BTC address: 1Ec6onfsQmoP9kkL3zkpB6c5sA4PVcXU2i. Thank you very much!

2048's Issues

Unit Testing

Hi,
Do you plan to add unit tests ?
I was about to make a PR ( I have just done #6 ) but I don't like to contribute without tests and with the popularity of your game, I think it's important.

BTC donate button

In commit bc2a710 I added a BTC donate button.

I don't know if this is ethical, and I'm a bit conflicted about it as well, but quite a few people suggested to add it and I thought I should give it a try.

I opened this issue in case there are any complaints about it. I can remove it if it infringes any rules or causes any other issues.

Allow retry using Enter key

Since it's a keyboard game on desktop, it would be cool to be able to retry using Enter key :)

git.io/2048 for short

http://git.io/2048

$ curl -si http://git.io/2048 | grep Location:
Location: http://gabrielecirulli.github.com/2048/

You're welcome : )

Animations broken on Firefox 27

Hi, animations are currently broken on Firefox 27, maybe it is related to #28?

WSAD?

Arrow keys and vim bindings is cool.. but what about us gamers?

Universal Best Score

After seeing the popularity of this little game I think it's time to add a database here but since it's hosted on git pages, I would love to work on a web service which can be used with ajax for fetching and saving the universal best score.

Stuttery animation on mobile

The tile moving animation is slightly jittery on my iPhone, I imagine it is even worse on some older devices and it is one of the main things holding this back from feeling perfect on mobile. The reason it feels jittery is because we are animating left and top. This is a classic thing jQuery does, which has made people believe it is the right way to do it. The issue is that at every step, it uses the CPU to render.

If it is changed to using CSS transforms, it shifts that responsibility to the GPU so everything will run buttery smooth on mobile.

I haven't bothered forking the repo yet to make changes, but what would need to be done, is replace the left and right movements with.

-webkit-transform: translate(Xpx, Ypx)

obviously using the other prefixes and prefix-less version as well. The transition property then would be translate instead of top and left as well.

Add localization

More info: #78 (comment)

Add replay button

Record moves and add a replay button when game over. (not replay game but review moves from begin to end)

Add a link tho 2048 offline android app

An offline version of this game in the form of an android app is really useful if you don't alway have an internet connection on your smartphone.

This one seems to work great:
https://github.com/uberspot/2048-android

Maybe it should be added as a link somewhere on the game.

[BUG] GameOver

Button Try Again not disappear when pressed.

Adding tweet this

It will be pretty good If someone is able to tweet his score.

Not fluid merger in Windows Phone

If I play your game in my Lumia 920, the mergers aren't fluid.

getting past 4000 score causes issue

When I get to around 4000 as a score, using a tactic of up, left, right only, at some point (at least three times now) the game doesn't add another tile until I press down, which ruins my tactic.

As it's happened three times, I thought it best to log it.

Has anyone reached 2048?

My best is 512...

Add a timer

^

Jumpy animations

I've only noticed it on a "4" tile, but in theory it will replicate with every tile.

If you move 4 from the bottom of the screen to the top of the screen, and it then joins with another 4 in the same move (creating an 8) the animation of the slide and pulse seem a little bit jumpy.

I think this could be because there is a time limit for the animation to run (e.g. 1 second) and so the animation runs faster to fit in that time limit, and results in a jumpy movement.

loads previous games

Loads games that have previosly been played, possibly other users games.

Bad swiping with mobile

On mobile its clunky to play because you need to swipe in the box. A simple change is to change the target from .game-container to .container, this has the unintended side affect of not allowing scrolling. However, it greatly improves gameplay. I believe a solution can be found.

To make never ending insert a 0 it will delete tiles but also it can be used to clear space when full

Attribute the original Threes game instead of the 1024 clone.

1024 is a clone of the original Threes game, and probably an illegal clone seeing as the artwork is almost copied pixel for pixel.

You should credit the original game instead of one of the clones.

[linux] Opera 12 throws JS error during initialize

Uncaught exception: TypeError: 'window.requestAnimationFrame' is not a function.

Easiest is to add the polyfill from Paul Irish to fix this for older browsers on Linux (amongst others): http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Inconsistencies between the Readme and the site

In the readme it says:

A small clone of 1024, based on Saming's 2048 (also a clone).

However, on the site it says:

All other apps or sites are derivatives or fakes, and should be used with caution.

Which seems a bit off, if this is actually based on Saming's 2048.

SASS configuration needed to replicate .scss compilation

When I run sass -q main.scss > main.css my results do not quite match the main.css that is in the repository. One bit of mixin code is nested differently, and a lot of @include blocks are missing trailing newlines. Here is a diff from your main.css to my generated main.css:

diff --git a/style/main.css b/style/main.css
index 869661c..21a1d9c 100644
--- a/style/main.css
+++ b/style/main.css
@@ -30,7 +30,6 @@ h1.title {
   100% {
     top: -50px;
     opacity: 0; } }
-
 @-moz-keyframes move-up {
   0% {
     top: 25px;
@@ -39,7 +38,6 @@ h1.title {
   100% {
     top: -50px;
     opacity: 0; } }
-
 @keyframes move-up {
   0% {
     top: 25px;
@@ -48,7 +46,6 @@ h1.title {
   100% {
     top: -50px;
     opacity: 0; } }
-
 .score-container {
   position: relative;
   float: right;
@@ -116,31 +113,18 @@ hr {

   100% {
     opacity: 1; } }
-
 @-moz-keyframes fade-in {
   0% {
     opacity: 0; }

   100% {
     opacity: 1; } }
-
 @keyframes fade-in {
   0% {
     opacity: 0; }

   100% {
     opacity: 1; } }
-
-.game-container .game-message a {
-  display: inline-block;
-  background: #8f7a66;
-  border-radius: 3px;
-  padding: 0 20px;
-  text-decoration: none;
-  color: #f9f6f2;
-  height: 40px;
-  line-height: 42px; }
-
 .game-container {
   margin-top: 40px;
   position: relative;
@@ -180,6 +164,14 @@ hr {
       display: block;
       margin-top: 59px; }
     .game-container .game-message a {
+      display: inline-block;
+      background: #8f7a66;
+      border-radius: 3px;
+      padding: 0 20px;
+      text-decoration: none;
+      color: #f9f6f2;
+      height: 40px;
+      line-height: 42px;
       margin-left: 9px; }
     .game-container .game-message.game-won {
       background: rgba(237, 194, 46, 0.5);
@@ -363,7 +355,6 @@ hr {
     opacity: 1;
     -webkit-transform: scale(1);
     -moz-transform: scale(1); } }
-
 @-moz-keyframes appear {
   0% {
     opacity: 0;
@@ -374,7 +365,6 @@ hr {
     opacity: 1;
     -webkit-transform: scale(1);
     -moz-transform: scale(1); } }
-
 @keyframes appear {
   0% {
     opacity: 0;
@@ -385,7 +375,6 @@ hr {
     opacity: 1;
     -webkit-transform: scale(1);
     -moz-transform: scale(1); } }
-
 .tile-new {
   -webkit-animation: appear 200ms ease 100ms;
   -moz-animation: appear 200ms ease 100ms;
@@ -404,7 +393,6 @@ hr {
   100% {
     -webkit-transform: scale(1);
     -moz-transform: scale(1); } }
-
 @-moz-keyframes pop {
   0% {
     -webkit-transform: scale(0);
@@ -417,7 +405,6 @@ hr {
   100% {
     -webkit-transform: scale(1);
     -moz-transform: scale(1); } }
-
 @keyframes pop {
   0% {
     -webkit-transform: scale(0);
@@ -430,7 +417,6 @@ hr {
   100% {
     -webkit-transform: scale(1);
     -moz-transform: scale(1); } }
-
 .tile-merged {
   z-index: 20;
   -webkit-animation: pop 200ms ease 100ms;
@@ -504,6 +490,14 @@ hr {
         display: block;
         margin-top: 59px; }
       .game-container .game-message a {
+        display: inline-block;
+        background: #8f7a66;
+        border-radius: 3px;
+        padding: 0 20px;
+        text-decoration: none;
+        color: #f9f6f2;
+        height: 40px;
+        line-height: 42px;
         margin-left: 9px; }
       .game-container .game-message.game-won {
         background: rgba(237, 194, 46, 0.5);

Can you provide the options/configuration(/version?) that you are using with SASS to create your main.css?

Onscreen arrow keys support

Pls add onscreen arrow keys support for mobiles as swiping many a times is not as smooth and results in scrolling of page

Leader Board

I looked over your guidelines and I don't believe this falls under a "wont do" category. I have made a fork of your repo which allows users to authenticate with 4 different networks and keep their high score (rather than local storage). My implementation isn't completely clean, but I wonder if you'd be interested in including the concept into the game itself. I would also think that having a leaderboard would be a lot of fun as well. There are a lot of directions you could take this I think.

My question is: are you interested in taking the game this direction?

If you're curious, here's my implementation (and the repo)

Make colours beyond 128 tile more distinguishable.

When playing, I have noticed that the tiles from around 128 upwards are coloured a light golden-yellow colour that makes the numbers hard to read (if you are moving quickly) and often means that tiles of different numbers get confused. Dozens of times I've thought the game had a bug, only to find out I was trying to join a 128 tile with a 256. This is especially so when I have the brightness on my screen turned down (on laptop/phone).

Even a darker colour would fix this, though noticeably different colours for tiles above 128 would be best. The difference between 32 and 64 is about perfect.

Add confirmation to new game button.

This is to avoid accidental presses resetting the game.

Right swipe on board on iPhone (iOS 7) goes back to the previous page.

Sometimes when you perform a long swipe the navigator will go back by a page. This can be annoying because it might reset the game. Is there any way to stop this from happening?

Add minor sound effect?

I don't know if this was mentioned before (can't seem to find a related issue with a quick browse) but it would be cool to have optional sound effects when tiles are merged in a move. Similar to a short "pop" sound maybe?
It should probably be de-activated by default, to avoid being obtrusive, and be toggled on/off by a small fadded speaker icon?
There are a lot of short sound effects licensed with creative commons or something similar so there shouldn't be a problem finding one.

Restart problem

When I lose and it says "Game over... try again...tweet" as usual, "Try again" click restarts the game (it starts again and events from keyboard are being captured), but the message does not disappear, background is darkened and every time I click this "Try again" button the game starts over.
Firefox (linux), addons disabled

Reset too easy to do accidentally

Spacebar isn't mentioned in the how-to-play, but it resets the game without any confirmation.

Accidentally resetting a game that is going well sucks. I should know, since I found this feature by accidentally hitting spacebar while playing http://joppi.github.io/2048-3D/ with >370k points and close to getting a 32768 tile.

I propose mentioning the spacebar-reset-functionality in the how-to-play section and adding a confirmation dialog. (Or just removing the feature, reloading the page isn't that hard)

@gabrielecirulli should reach 2048

The main page says @gabrielecirulli never reached the 2048, this is unacceptable and need to be properly fixed. I got a few tips but I am too afraid to spoil them publicly.

zoom-in/out problem in Chrome

I realized when playing the game in Chrome on my laptop, if you zoom-out (for example to 75% of the original size) the grid will shrink but the tiles will not so they will stretch across the boundaries of the grid and look a bit funny... does this count as a bug?

Here's my screenshot:

.appcache for offline support

We should add an appcache file to support devices that are offline. I had to download the page on my laptop so I can continue playing, I can't do that on my mobile phone.

Hard Mode

You can't see the numbers on the tiles, except for the one that has just appeared

Solution algorithm

I found a method with which you can easily get to 2048. Maybe add this somewhere as help?
Described it here: http://techblog.asmaps.de/2014/03/2048-game-solution-algorithm.html

Hammer gestures not working on Firefox OS

Hi Gabrielle,

Fantastic and addictive game, congratulations! I decided to port it to Firefox OS and most of the things worked perfectly out of the box. The major issue was that Hammer gestures were not working so I reimplemented the swipe gestures using touch events. I also tweaked the UI to better fit the small 480x320 screen of Firefox OS devices.

Do you want a pull request for the touch events?

Cheers
PS: The game is awaiting review in the Firefox Marketplace right now.

Fix the 2 vs 4 AI

This may be improvable for a logic strategy based game:

https://github.com/gabrielecirulli/2048/blob/master/js/game_manager.js#L62

It means you could win or lose a game entirely up to chance, even if your strategy is sound. The spawning of a 2 or 4 should be deterministic. My suggestion:

Always spawn a 2, unless the location of the tile spawned is adjacent to a 4 tile.

2048 slow on retina MBP

I need confirmation that this happens. I never experienced it (I don't own a retina MBP). If possible, someone should try to reproduce and fix it.

Support Android 2.3 browser

Android's built-in browser doesn't support 2048. It really doesn't support HTML5, so it has problems with continue keyword being used as a function, it doesn't have a bind function in the function prototype, and the like.

What would be the best way to correct this?

Endless Mode

Please add a checkbox for "Endless Mode" where reaching 2048 is just another number and you are allowed to continue playing.

This should probably be differentiated in the pre-populated tweet so as to differentiate it from normal "2048" mode.

Implement a leaderboard

It is nice to see one's high score, but it would be better to be able to compare with others

Add info to contributing guide

Info includes

• Things that won't be merged
• Branch workflow

There doesn't seem to be a tile-4096 class.

Changing up some of the HTML (http://puu.sh/7MJem.png) gives me a result of this in the game: http://puu.sh/7MJ8m.png

I'm guessing this is because there isn't a class for the 4096 tile.

Game Lag

When playing at a fast rate, the game seems to lag as we play and causes it to function too slow.

[Bug] Fail to start/initialise in Safari on iOS 5.1.1 (iPad1)

Board and webpage draw correctly, but both initial tiles do not display and hence the game cannot be started.

Enabling debug to the console for Safari reports two issues:

• HTML: Error line 14 "Viewport argument key "target-densitydpi" not recognized and ignored
• Javascript: Error undefined TypeError: 'undefined' is not a function

Works fine on a later iOS release (7.1), but this older iPad is effectively orphaned on 5.1.1 as the last available OS :)

Save ranking on a mysql database

Is there a way to optionally save the records to a mysql database?

pause/resume feature

Can you save the game board like you save local score, so that I don't have to play the game in a continuously.

Currently if I leave the game for a while it restarts and does not start from the earlier position.