gabrielecirulli / 2048 Goto Github PK
View Code? Open in Web Editor NEWA small clone of 1024 (https://web.archive.org/web/20140328011720/https://play.google.com/store/apps/details?id=com.veewo.a1024)
License: MIT License
A small clone of 1024 (https://web.archive.org/web/20140328011720/https://play.google.com/store/apps/details?id=com.veewo.a1024)
License: MIT License
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.
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.
It will be pretty good If someone is able to tweet his score.
Is there a way to optionally save the records to a mysql database?
My best is 512...
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/
$ curl -si http://git.io/2048 | grep Location:
Location: http://gabrielecirulli.github.com/2048/
You're welcome : )
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?
Arrow keys and vim bindings is cool.. but what about us gamers?
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.
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.
When playing at a fast rate, the game seems to lag as we play and causes it to function too slow.
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.
Since it's a keyboard game on desktop, it would be cool to be able to retry using Enter key :)
Record moves and add a replay button when game over. (not replay game but review moves from begin to end)
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.
More info: #78 (comment)
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
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?
Hi, animations are currently broken on Firefox 27, maybe it is related to #28?
^
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.
Pls add onscreen arrow keys support for mobiles as swiping many a times is not as smooth and results in scrolling of page
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?
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.
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.
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.
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.
Loads games that have previosly been played, possibly other users games.
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)
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.
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.
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.
If I play your game in my Lumia 920, the mergers aren't fluid.
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
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.
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.
It is nice to see one's high score, but it would be better to be able to compare with others
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.
Button Try Again not disappear when pressed.
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.
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.
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)
Info includes
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:
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 :)
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.
This is to avoid accidental presses resetting the game.
You can't see the numbers on the tiles, except for the one that has just appeared
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.