mirror of
https://github.com/gabrielecirulli/2048.git
synced 2026-08-29 03:52:07 +08:00
+2
-2
@@ -11,11 +11,11 @@ Please follow the house rules to have a bigger chance of your contribution being
|
||||
- If you want to modify the CSS, please edit the SCSS files present in `style/`: `main.scss` and others. Don't edit the `main.css`, because it's supposed to be generated.
|
||||
In order to compile your SCSS modifications, you need to use the `sass` gem (install it by running `gem install sass` once Ruby is installed).
|
||||
To run SASS, simply use the following command:
|
||||
`sass --watch style/main.scss`
|
||||
`sass --unix-newlines --watch style/main.scss`
|
||||
SASS will automatically recompile your css when changed.
|
||||
- `Rakefile` contains some tasks that help during development. Feel free to add useful tasks if needed.
|
||||
- Please use 2-space indentation when editing the JavaScript. A `.jshintrc` file is present, which will help your code to follow the guidelines if you install and run `jshint`.
|
||||
- Please test your modification thouroughly before submitting your Pull Request.
|
||||
- Please test your modification thoroughly before submitting your Pull Request.
|
||||
|
||||
### Changes that might not be accepted
|
||||
We have to be conservative with the core game. This means that some modifications won't be merged, or will have to be evaluated carefully before being merged:
|
||||
|
||||
@@ -13,7 +13,7 @@ Other notable contributors:
|
||||
|
||||
- [TimPetricola](https://github.com/TimPetricola) added best score storage
|
||||
- [chrisprice](https://github.com/chrisprice) added custom code for swipe handling on mobile
|
||||
- [elektryk](https://github.com/elektryk) made swipes work on Windows Phone
|
||||
- [marcingajda](https://github.com/marcingajda) made swipes work on Windows Phone
|
||||
- [mgarciaisaia](https://github.com/mgarciaisaia) added support for Android 2.3
|
||||
|
||||
Many thanks to [rayhaanj](https://github.com/rayhaanj), [Mechazawa](https://github.com/Mechazawa), [grant](https://github.com/grant), [remram44](https://github.com/remram44) and [ghoullier](https://github.com/ghoullier) for the many other good contributions.
|
||||
@@ -21,7 +21,7 @@ Many thanks to [rayhaanj](https://github.com/rayhaanj), [Mechazawa](https://gith
|
||||
### Screenshot
|
||||
|
||||
<p align="center">
|
||||
<img src="http://pictures.gabrielecirulli.com/2048-20140309-234100.png" alt="Screenshot"/>
|
||||
<img src="https://cloud.githubusercontent.com/assets/1175750/8614312/280e5dc2-26f1-11e5-9f1f-5891c3ca8b26.png" alt="Screenshot"/>
|
||||
</p>
|
||||
|
||||
That screenshot is fake, by the way. I never reached 2048 :smile:
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@ CACHE MANIFEST
|
||||
# Adds the ability to play the game online.
|
||||
# The following comment needs to be updated whenever a change is made.
|
||||
# Run `rake appcache:update` to do so
|
||||
# Updated: 2014-12-10T12:13:34-08:00
|
||||
# Updated: 2015-10-20T11:14:00-08:00
|
||||
|
||||
# Main page
|
||||
index.html
|
||||
|
||||
@@ -82,7 +82,7 @@ KeyboardInputManager.prototype.listen = function () {
|
||||
|
||||
gameContainer.addEventListener(this.eventTouchstart, function (event) {
|
||||
if ((!window.navigator.msPointerEnabled && event.touches.length > 1) ||
|
||||
event.targetTouches > 1 ||
|
||||
event.targetTouches.length > 1 ||
|
||||
self.targetIsInput(event)) {
|
||||
return; // Ignore if touching with more than 1 finger or touching input
|
||||
}
|
||||
@@ -104,7 +104,7 @@ KeyboardInputManager.prototype.listen = function () {
|
||||
|
||||
gameContainer.addEventListener(this.eventTouchend, function (event) {
|
||||
if ((!window.navigator.msPointerEnabled && event.touches.length > 0) ||
|
||||
event.targetTouches > 0 ||
|
||||
event.targetTouches.length > 0 ||
|
||||
self.targetIsInput(event)) {
|
||||
return; // Ignore if still touching with one or more fingers or input
|
||||
}
|
||||
|
||||
@@ -48,6 +48,7 @@
|
||||
@mixin transform($args...) {
|
||||
-webkit-transform: $args;
|
||||
-moz-transform: $args;
|
||||
-ms-transform: $args;
|
||||
transform: $args;
|
||||
}
|
||||
|
||||
|
||||
@@ -314,66 +314,82 @@ hr {
|
||||
.tile.tile-position-1-1 {
|
||||
-webkit-transform: translate(0px, 0px);
|
||||
-moz-transform: translate(0px, 0px);
|
||||
-ms-transform: translate(0px, 0px);
|
||||
transform: translate(0px, 0px); }
|
||||
.tile.tile-position-1-2 {
|
||||
-webkit-transform: translate(0px, 121px);
|
||||
-moz-transform: translate(0px, 121px);
|
||||
-ms-transform: translate(0px, 121px);
|
||||
transform: translate(0px, 121px); }
|
||||
.tile.tile-position-1-3 {
|
||||
-webkit-transform: translate(0px, 242px);
|
||||
-moz-transform: translate(0px, 242px);
|
||||
-ms-transform: translate(0px, 242px);
|
||||
transform: translate(0px, 242px); }
|
||||
.tile.tile-position-1-4 {
|
||||
-webkit-transform: translate(0px, 363px);
|
||||
-moz-transform: translate(0px, 363px);
|
||||
-ms-transform: translate(0px, 363px);
|
||||
transform: translate(0px, 363px); }
|
||||
.tile.tile-position-2-1 {
|
||||
-webkit-transform: translate(121px, 0px);
|
||||
-moz-transform: translate(121px, 0px);
|
||||
-ms-transform: translate(121px, 0px);
|
||||
transform: translate(121px, 0px); }
|
||||
.tile.tile-position-2-2 {
|
||||
-webkit-transform: translate(121px, 121px);
|
||||
-moz-transform: translate(121px, 121px);
|
||||
-ms-transform: translate(121px, 121px);
|
||||
transform: translate(121px, 121px); }
|
||||
.tile.tile-position-2-3 {
|
||||
-webkit-transform: translate(121px, 242px);
|
||||
-moz-transform: translate(121px, 242px);
|
||||
-ms-transform: translate(121px, 242px);
|
||||
transform: translate(121px, 242px); }
|
||||
.tile.tile-position-2-4 {
|
||||
-webkit-transform: translate(121px, 363px);
|
||||
-moz-transform: translate(121px, 363px);
|
||||
-ms-transform: translate(121px, 363px);
|
||||
transform: translate(121px, 363px); }
|
||||
.tile.tile-position-3-1 {
|
||||
-webkit-transform: translate(242px, 0px);
|
||||
-moz-transform: translate(242px, 0px);
|
||||
-ms-transform: translate(242px, 0px);
|
||||
transform: translate(242px, 0px); }
|
||||
.tile.tile-position-3-2 {
|
||||
-webkit-transform: translate(242px, 121px);
|
||||
-moz-transform: translate(242px, 121px);
|
||||
-ms-transform: translate(242px, 121px);
|
||||
transform: translate(242px, 121px); }
|
||||
.tile.tile-position-3-3 {
|
||||
-webkit-transform: translate(242px, 242px);
|
||||
-moz-transform: translate(242px, 242px);
|
||||
-ms-transform: translate(242px, 242px);
|
||||
transform: translate(242px, 242px); }
|
||||
.tile.tile-position-3-4 {
|
||||
-webkit-transform: translate(242px, 363px);
|
||||
-moz-transform: translate(242px, 363px);
|
||||
-ms-transform: translate(242px, 363px);
|
||||
transform: translate(242px, 363px); }
|
||||
.tile.tile-position-4-1 {
|
||||
-webkit-transform: translate(363px, 0px);
|
||||
-moz-transform: translate(363px, 0px);
|
||||
-ms-transform: translate(363px, 0px);
|
||||
transform: translate(363px, 0px); }
|
||||
.tile.tile-position-4-2 {
|
||||
-webkit-transform: translate(363px, 121px);
|
||||
-moz-transform: translate(363px, 121px);
|
||||
-ms-transform: translate(363px, 121px);
|
||||
transform: translate(363px, 121px); }
|
||||
.tile.tile-position-4-3 {
|
||||
-webkit-transform: translate(363px, 242px);
|
||||
-moz-transform: translate(363px, 242px);
|
||||
-ms-transform: translate(363px, 242px);
|
||||
transform: translate(363px, 242px); }
|
||||
.tile.tile-position-4-4 {
|
||||
-webkit-transform: translate(363px, 363px);
|
||||
-moz-transform: translate(363px, 363px);
|
||||
-ms-transform: translate(363px, 363px);
|
||||
transform: translate(363px, 363px); }
|
||||
|
||||
.tile {
|
||||
@@ -462,36 +478,42 @@ hr {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0); }
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
@-moz-keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0); }
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0); }
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
.tile-new .tile-inner {
|
||||
-webkit-animation: appear 200ms ease 100ms;
|
||||
@@ -505,46 +527,55 @@ hr {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0); }
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2);
|
||||
-moz-transform: scale(1.2);
|
||||
-ms-transform: scale(1.2);
|
||||
transform: scale(1.2); }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
@-moz-keyframes pop {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0); }
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2);
|
||||
-moz-transform: scale(1.2);
|
||||
-ms-transform: scale(1.2);
|
||||
transform: scale(1.2); }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
@keyframes pop {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
-moz-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0); }
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2);
|
||||
-moz-transform: scale(1.2);
|
||||
-ms-transform: scale(1.2);
|
||||
transform: scale(1.2); }
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
.tile-merged .tile-inner {
|
||||
z-index: 20;
|
||||
@@ -753,66 +784,82 @@ hr {
|
||||
.tile.tile-position-1-1 {
|
||||
-webkit-transform: translate(0px, 0px);
|
||||
-moz-transform: translate(0px, 0px);
|
||||
-ms-transform: translate(0px, 0px);
|
||||
transform: translate(0px, 0px); }
|
||||
.tile.tile-position-1-2 {
|
||||
-webkit-transform: translate(0px, 67px);
|
||||
-moz-transform: translate(0px, 67px);
|
||||
-ms-transform: translate(0px, 67px);
|
||||
transform: translate(0px, 67px); }
|
||||
.tile.tile-position-1-3 {
|
||||
-webkit-transform: translate(0px, 135px);
|
||||
-moz-transform: translate(0px, 135px);
|
||||
-ms-transform: translate(0px, 135px);
|
||||
transform: translate(0px, 135px); }
|
||||
.tile.tile-position-1-4 {
|
||||
-webkit-transform: translate(0px, 202px);
|
||||
-moz-transform: translate(0px, 202px);
|
||||
-ms-transform: translate(0px, 202px);
|
||||
transform: translate(0px, 202px); }
|
||||
.tile.tile-position-2-1 {
|
||||
-webkit-transform: translate(67px, 0px);
|
||||
-moz-transform: translate(67px, 0px);
|
||||
-ms-transform: translate(67px, 0px);
|
||||
transform: translate(67px, 0px); }
|
||||
.tile.tile-position-2-2 {
|
||||
-webkit-transform: translate(67px, 67px);
|
||||
-moz-transform: translate(67px, 67px);
|
||||
-ms-transform: translate(67px, 67px);
|
||||
transform: translate(67px, 67px); }
|
||||
.tile.tile-position-2-3 {
|
||||
-webkit-transform: translate(67px, 135px);
|
||||
-moz-transform: translate(67px, 135px);
|
||||
-ms-transform: translate(67px, 135px);
|
||||
transform: translate(67px, 135px); }
|
||||
.tile.tile-position-2-4 {
|
||||
-webkit-transform: translate(67px, 202px);
|
||||
-moz-transform: translate(67px, 202px);
|
||||
-ms-transform: translate(67px, 202px);
|
||||
transform: translate(67px, 202px); }
|
||||
.tile.tile-position-3-1 {
|
||||
-webkit-transform: translate(135px, 0px);
|
||||
-moz-transform: translate(135px, 0px);
|
||||
-ms-transform: translate(135px, 0px);
|
||||
transform: translate(135px, 0px); }
|
||||
.tile.tile-position-3-2 {
|
||||
-webkit-transform: translate(135px, 67px);
|
||||
-moz-transform: translate(135px, 67px);
|
||||
-ms-transform: translate(135px, 67px);
|
||||
transform: translate(135px, 67px); }
|
||||
.tile.tile-position-3-3 {
|
||||
-webkit-transform: translate(135px, 135px);
|
||||
-moz-transform: translate(135px, 135px);
|
||||
-ms-transform: translate(135px, 135px);
|
||||
transform: translate(135px, 135px); }
|
||||
.tile.tile-position-3-4 {
|
||||
-webkit-transform: translate(135px, 202px);
|
||||
-moz-transform: translate(135px, 202px);
|
||||
-ms-transform: translate(135px, 202px);
|
||||
transform: translate(135px, 202px); }
|
||||
.tile.tile-position-4-1 {
|
||||
-webkit-transform: translate(202px, 0px);
|
||||
-moz-transform: translate(202px, 0px);
|
||||
-ms-transform: translate(202px, 0px);
|
||||
transform: translate(202px, 0px); }
|
||||
.tile.tile-position-4-2 {
|
||||
-webkit-transform: translate(202px, 67px);
|
||||
-moz-transform: translate(202px, 67px);
|
||||
-ms-transform: translate(202px, 67px);
|
||||
transform: translate(202px, 67px); }
|
||||
.tile.tile-position-4-3 {
|
||||
-webkit-transform: translate(202px, 135px);
|
||||
-moz-transform: translate(202px, 135px);
|
||||
-ms-transform: translate(202px, 135px);
|
||||
transform: translate(202px, 135px); }
|
||||
.tile.tile-position-4-4 {
|
||||
-webkit-transform: translate(202px, 202px);
|
||||
-moz-transform: translate(202px, 202px);
|
||||
-ms-transform: translate(202px, 202px);
|
||||
transform: translate(202px, 202px); }
|
||||
|
||||
.tile .tile-inner {
|
||||
|
||||
Reference in New Issue
Block a user