- 6737151's blog
Fe_26 （2048 衍生）模组
-
6737151
LV 8
@
2023-5-12 18:44:08
下载这个网址后用第一份代码替换 game_manager.js，第二份代码替换 main.css 即可。
function GameManager(size, InputManager, Actuator, StorageManager) {
this.size = size; // Size of the grid
this.inputManager = new InputManager;
this.storageManager = new StorageManager;
this.actuator = new Actuator;
this.version = 0.8;
this.storageManager.clearIfOutdated(this.version);
this.startTiles = 2;
this.winningValue = "56Fe";
this.inputManager.on("move", this.move.bind(this));
this.inputManager.on("restart", this.restart.bind(this));
this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
this.setup();
return this;
}
// Restart the game
GameManager.prototype.restart = function () {
this.storageManager.clearGameState();
this.actuator.continueGame(); // Clear the game won/lost message
this.setup();
};
// Keep playing after winning (allows going over 2048)
GameManager.prototype.keepPlaying = function () {
this.keepPlaying = true;
this.actuator.continueGame(); // Clear the game won/lost message
};
// Return true if the game is lost, or has won and the user hasn't kept playing
GameManager.prototype.isGameTerminated = function () {
if (this.over || (this.won && !this.keepPlaying)) {
return true;
} else {
return false;
}
};
// Set up the game
GameManager.prototype.setup = function () {
var previousState = this.storageManager.getGameState();
// Reload the game from a previous game if present
if (previousState) {
this.grid = new Grid(previousState.grid.size,
previousState.grid.cells); // Reload grid
this.score = previousState.score;
this.over = previousState.over;
this.won = previousState.won;
this.keepPlaying = previousState.keepPlaying;
} else {
this.grid = new Grid(this.size);
this.score = 0;
this.over = false;
this.won = false;
this.keepPlaying = false;
// Add the initial tiles
this.addStartTiles();
}
// Update the actuator
this.actuate();
};
// Set up the initial tiles to start the game with
GameManager.prototype.addStartTiles = function () {
for (var i = 0; i < this.startTiles; i++) {
this.addRandomTile();
}
};
// Adds a tile in a random position
GameManager.prototype.addRandomTile = function () {
if (this.grid.cellsAvailable()) {
var value = Math.random() < 0.9 ? "1H" : "2H";
var tile = new Tile(this.grid.randomAvailableCell(), value, this.labels[value]);
this.grid.insertTile(tile);
}
};
// Sends the updated grid to the actuator
GameManager.prototype.actuate = function () {
if (this.storageManager.getBestScore() < this.score) {
this.storageManager.setBestScore(this.score);
}
// Clear the state when the game is over (game over only, not win)
if (this.over) {
this.storageManager.clearGameState();
} else {
this.storageManager.setGameState(this.serialize());
}
this.actuator.actuate(this.grid, {
score: this.score,
over: this.over,
won: this.won,
bestScore: this.storageManager.getBestScore(),
terminated: this.isGameTerminated()
});
};
// Represent the current game as an object
GameManager.prototype.serialize = function () {
return {
grid: this.grid.serialize(),
score: this.score,
over: this.over,
won: this.won,
keepPlaying: this.keepPlaying
};
};
// Save all tile positions and remove merger info
GameManager.prototype.prepareTiles = function () {
this.grid.eachCell(function (x, y, tile) {
if (tile) {
tile.mergedFrom = null;
tile.savePosition();
}
});
};
// Move a tile and its representation
GameManager.prototype.moveTile = function (tile, cell) {
this.grid.cells[tile.x][tile.y] = null;
this.grid.cells[cell.x][cell.y] = tile;
tile.updatePosition(cell);
};
// Move tiles on the grid in the specified direction
GameManager.prototype.move = function (direction) {
// 0: up, 1: right, 2: down, 3: left
var self = this;
if (this.isGameTerminated()) return; // Don't do anything if the game's over
var cell, tile;
var vector = this.getVector(direction);
var traversals = this.buildTraversals(vector);
var moved = false;
// Save the current tile positions and remove merger information
this.prepareTiles();
// Traverse the grid in the right direction and move tiles
traversals.x.forEach(function (x) {
traversals.y.forEach(function (y) {
cell = { x: x, y: y };
tile = self.grid.cellContent(cell);
if (tile) {
var positions = self.findFarthestPosition(cell, vector);
var next = self.grid.cellContent(positions.next);
// Only one merger per row traversal?
var shouldMove = true;
if (next && !next.mergedFrom) {
//if(next.value === tile.value) {
if( self.canFuse(next.value,tile.value) ) {
shouldMove = false;
var fusionValue = self.fusion(next.value,tile.value);
var merged = new Tile(positions.next, fusionValue, self.labels[fusionValue]);
merged.mergedFrom = [tile, next];
var decay = self.decay[fusionValue] || false;
if(decay !== false) {
if (decay['multipler']>1000) {
merged.movesLeft = decay['multipler']-999;
}
else {
merged.movesLeft = Math.floor(Math.random() * (Math.ceil(8*decay['multipler']) - Math.ceil(4*decay['multipler']) + 1)) + Math.ceil(4*decay['multipler']);
}
}
self.grid.insertTile(merged);
self.grid.removeTile(tile);
// Converge the two tiles' positions
tile.updatePosition(positions.next);
// Update the score
self.score += self.pointValues[merged.value];
// TODO win state ( if not decaying )
if (merged.value === self.winningValue) self.won = true;
}
}
if (shouldMove) {
self.moveTile(tile, positions.farthest);
}
if (!self.positionsEqual(cell, tile)) {
moved = true; // The tile moved from its original cell!
}
}
});
});
if (moved) {
this.addRandomTile();
this.grid.eachCell(function(x, y, tile) {
if(tile !== null && self.decay[tile.value] && tile.decay()) {
var decayValue = self.decay[tile.value]['to'];
var decayed = new Tile({
x: tile.x,
y: tile.y
}, decayValue, self.labels[decayValue]);
var decay = self.decay[decayValue] || false;
if(decay !== false) {
if (decay['multipler']>1000) {
decayed.movesLeft = decay['multipler']-999;
}
else {
decayed.movesLeft = Math.floor(Math.random() * (Math.ceil(8*decay['multipler']) - Math.ceil(4*decay['multipler']) + 1)) + Math.ceil(4*decay['multipler']);
}
}
self.grid.removeTile(tile);
self.grid.insertTile(decayed);
self.score += self.decay[tile.value].points;
if (decayed.value === self.winningValue) self.won = true;
}
});
if (!this.movesAvailable()) {
this.over = true; // Game over!
}
this.actuate();
}
};
// Get the vector representing the chosen direction
GameManager.prototype.getVector = function (direction) {
// Vectors representing tile movement
var map = {
0: { x: 0, y: -1 }, // Up
1: { x: 1, y: 0 }, // Right
2: { x: 0, y: 1 }, // Down
3: { x: -1, y: 0 } // Left
};
return map[direction];
};
// Build a list of positions to traverse in the right order
GameManager.prototype.buildTraversals = function (vector) {
var traversals = { x: [], y: [] };
for (var pos = 0; pos < this.size; pos++) {
traversals.x.push(pos);
traversals.y.push(pos);
}
// Always traverse from the farthest cell in the chosen direction
if (vector.x === 1) traversals.x = traversals.x.reverse();
if (vector.y === 1) traversals.y = traversals.y.reverse();
return traversals;
};
GameManager.prototype.findFarthestPosition = function (cell, vector) {
var previous;
// Progress towards the vector direction until an obstacle is found
do {
previous = cell;
cell = { x: previous.x + vector.x, y: previous.y + vector.y };
} while (this.grid.withinBounds(cell) &&
this.grid.cellAvailable(cell));
return {
farthest: previous,
next: cell // Used to check if a merge is required
};
};
GameManager.prototype.movesAvailable = function () {
return this.grid.cellsAvailable() || this.tileMatchesAvailable();
};
// Check for available matches between tiles (more expensive check)
GameManager.prototype.tileMatchesAvailable = function () {
var self = this;
var tile;
for (var x = 0; x < this.size; x++) {
for (var y = 0; y < this.size; y++) {
tile = this.grid.cellContent({ x: x, y: y });
if (tile) {
for (var direction = 0; direction < 4; direction++) {
var vector = self.getVector(direction);
var cell = { x: x + vector.x, y: y + vector.y };
var other = self.grid.cellContent(cell);
if (other && self.canFuse(other.value, tile.value)) {
return true; // These two tiles can be merged
}
}
}
}
}
return false;
};
GameManager.prototype.positionsEqual = function (first, second) {
return first.x === second.x && first.y === second.y;
};
GameManager.prototype.canFuse = function (first, second) {
return (this.fusionRules[first] && this.fusionRules[first][second]) ||
(this.fusionRules[second] && this.fusionRules[second][first]);
};
GameManager.prototype.fusion = function (first, second) {
var forward = this.fusionRules[first];
if (forward && forward[second]) {
return forward[second];
} else {
var backward = this.fusionRules[second][first];
return backward;
}
};
// a:{b:c}
// a + b = c
GameManager.prototype.fusionRules = {
"1H":{"1H":"2He", "2H":"3He",
"6Li":"7Be",
"7Li":"4He",
"7Be":"8B",
"12C":"13N",
"13C":"14N",
"13N":"14O",
"14N":"15O",
"15N":"12C",
"16O":"17F",
"17O":"14N",
"18O":"15N",
"17F":"18Ne",
"18F":"19Ne",
"19F":"16O",
"23Na":"24Mg",
"26Mg":"27Al",
"27Al":"24Mg",
"30Si":"31P",
"31P":"32S",
"35Cl":"36Ar"},
"2H":{"2H":"3H", "3H":"5He", "3He":"5Li"},
"3H":{"3H":"6He"},
"3He":{"3He":"6Be","4He":"7Be"},
"4He":{"4He":"8Be", // unstable decays into 2 4heliums
"8Be":"12C",
"12C":"16O",
"16O":"20Ne",
"20Ne":"24Mg",
"22Ne":"26Mg",
"23Na":"27Al",
"28Si":"32S",
"32Si":"36S",
"31P":"35Cl",
"32S":"36Ar",
"36S":"40Ar",
"36Ar":"40Ca",
"40Ar":"44Ca",
"40Ca":"44Ti",
"44Ca":"48Ti",
"44Sc":"48V",
"44Ti":"48Cr",
"48Ti":"52Cr",
"48V":"52Mn",
"48Cr":"52Fe",
"52Cr":"56Fe",
"52Mn":"56Co",
"52Fe":"56Ni"
},
"16O":{"16O":"30P"},
"12C":{"12C":"23Mg"}
};
GameManager.prototype.labels = {
"1H": "<sup>1</sup>Hydrogen",
"2H": "<sup>2</sup>Hydrogen",
"3H": "<sup>3</sup>Hydrogen",
"2He": "<sup>2</sup>Helium",
"3He": "<sup>3</sup>Helium",
"4He": "<sup>4</sup>Helium",
"5He": "<sup>5</sup>Helium",
"6He": "<sup>6</sup>Helium",
"5Li": "<sup>5</sup>Lithium",
"6Li": "<sup>6</sup>Lithium",
"7Li": "<sup>7</sup>Lithium",
"6Be": "<sup>6</sup>Beryllium",
"7Be": "<sup>7</sup>Beryllium",
"8Be": "<sup>8</sup>Beryllium",
"8B": "<sup>8</sup>Boron",
"12C": "<sup>12</sup>Carbon",
"13C": "<sup>13</sup>Carbon",
"13N": "<sup>13</sup>Nitrogen",
"14N": "<sup>14</sup>Nitrogen",
"15N": "<sup>15</sup>Nitrogen",
"14O": "<sup>14</sup>Oxygen",
"15O": "<sup>15</sup>Oxygen",
"16O": "<sup>16</sup>Oxygen",
"17O": "<sup>17</sup>Oxygen",
"18O": "<sup>18</sup>Oxygen",
"17F": "<sup>17</sup>Fluorine",
"18F": "<sup>18</sup>Fluorine",
"19F": "<sup>19</sup>Fluorine",
"18Ne": "<sup>18</sup>Neon",
"19Ne": "<sup>19</sup>Neon",
"20Ne": "<sup>20</sup>Neon",
"22Ne": "<sup>22</sup>Neon",
"23Na": "<sup>23</sup>Sodium",
"23Mg": "<sup>23</sup>Magnesium",
"24Mg": "<sup>24</sup>Magnesium",
"26Mg": "<sup>26</sup>Magnesium",
"27Al": "<sup>27</sup>Aluminium",
"28Si": "<sup>28</sup>Silicon",
"30Si": "<sup>30</sup>Silicon",
"32Si": "<sup>32</sup>Silicon",
"30P": "<sup>30</sup>Phosphorus",
"31P": "<sup>31</sup>Phosphorus",
"32P": "<sup>32</sup>Phosphorus",
"32S": "<sup>32</sup>Sulfur",
"36S": "<sup>36</sup>Sulfur",
"35Cl": "<sup>35</sup>Chlorine",
"36Ar": "<sup>36</sup>Argon",
"40Ar": "<sup>40</sup>Argon",
"40Ca": "<sup>40</sup>Calcium",
"44Ca": "<sup>44</sup>Calcium",
"44Sc": "<sup>44</sup>Scandium",
"44Ti": "<sup>44</sup>Titanium",
"48Ti": "<sup>48</sup>Titanium",
"48V": "<sup>48</sup>Vanadium",
"48Cr": "<sup>48</sup>Chromium",
"52Cr": "<sup>52</sup>Chromium",
"52Mn": "<sup>52</sup>Manganese",
"52Fe": "<sup>52</sup>Iron",
"56Fe": "<sup>56</sup>Iron",
"56Co": "<sup>56</sup>Cobalt",
"56Ni": "<sup>56</sup>Nickel"
}; /*
GameManager.prototype.labels = {
"1H": "<sup>1</sup>氢",
"2H": "<sup>2</sup>氘",
"3H": "<sup>3</sup>氚",
"2He": "<sup>2</sup>氦",
"3He": "<sup>3</sup>氦",
"4He": "<sup>4</sup>氦",
"5He": "<sup>5</sup>氦",
"6He": "<sup>6</sup>氦",
"5Li": "<sup>5</sup>锂",
"6Li": "<sup>6</sup>锂",
"7Li": "<sup>7</sup>锂",
"6Be": "<sup>6</sup>铍",
"7Be": "<sup>7</sup>铍",
"8Be": "<sup>8</sup>铍",
"8B": "<sup>8</sup>硼",
"12C": "<sup>12</sup>碳",
"13C": "<sup>13</sup>碳",
"13N": "<sup>13</sup>氮",
"14N": "<sup>14</sup>氮",
"15N": "<sup>15</sup>氮",
"14O": "<sup>14</sup>氧",
"15O": "<sup>15</sup>氧",
"16O": "<sup>16</sup>氧",
"17O": "<sup>17</sup>氧",
"18O": "<sup>18</sup>氧",
"17F": "<sup>17</sup>氟",
"18F": "<sup>18</sup>氟",
"19F": "<sup>19</sup>氟",
"18Ne": "<sup>18</sup>氖",
"19Ne": "<sup>19</sup>氖",
"20Ne": "<sup>20</sup>氖",
"22Ne": "<sup>22</sup>氖",
"23Na": "<sup>23</sup>钠",
"23Mg": "<sup>23</sup>镁",
"24Mg": "<sup>24</sup>镁",
"26Mg": "<sup>26</sup>镁",
"27Al": "<sup>27</sup>铝",
"28Si": "<sup>28</sup>硅",
"30Si": "<sup>30</sup>硅",
"32Si": "<sup>32</sup>硅",
"30P": "<sup>30</sup>磷",
"31P": "<sup>31</sup>磷",
"32P": "<sup>32</sup>磷",
"32S": "<sup>32</sup>硫",
"36S": "<sup>36</sup>硫",
"35Cl": "<sup>35</sup>氯",
"36Ar": "<sup>36</sup>氩",
"40Ar": "<sup>40</sup>氩",
"40Ca": "<sup>40</sup>钙",
"44Ca": "<sup>44</sup>钙",
"44Sc": "<sup>44</sup>钪",
"44Ti": "<sup>44</sup>钛",
"48Ti": "<sup>48</sup>钛",
"48V": "<sup>48</sup>钒",
"48Cr": "<sup>48</sup>铬",
"52Cr": "<sup>52</sup>铬",
"52Mn": "<sup>52</sup>锰",
"52Fe": "<sup>52</sup>铁",
"56Fe": "<sup>56</sup>铁",
"56Co": "<sup>56</sup>钴",
"56Ni": "<sup>56</sup>镍"
};*/
GameManager.prototype.pointValues = {
"1H": 1,
"2H": 2,
"3H": 3,
"2He": 2,
"3He": 3,
"4He": 4,
"5He": 5,
"6He": 6,
"5Li": 5,
"6Li": 6,
"7Li": 7,
"6Be": 6,
"7Be": 7,
"8Be": 8,
"8B": 8,
"12C": 12,
"13C": 13,
"13N": 13,
"14N": 14,
"15N": 15,
"14O": 14,
"15O": 15,
"16O": 16,
"17O": 17,
"18O": 18,
"17F": 17,
"18F": 18,
"19F": 19,
"18Ne": 18,
"19Ne": 19,
"20Ne": 20,
"22Ne": 22,
"23Na": 23,
"23Mg": 23,
"24Mg": 24,
"26Mg": 26,
"27Al": 27,
"28Si": 28,
"30Si": 30,
"32Si": 32,
"30P": 30,
"31P": 31,
"32P": 32,
"32S": 32,
"36S": 36,
"35Cl": 35,
"36Ar": 36,
"40Ar": 40,
"40Ca": 40,
"44Ca": 44,
"44Sc": 44,
"44Ti": 44,
"48Ti": 48,
"48V": 48,
"48Cr": 48,
"52Cr": 52,
"52Mn": 52,
"52Fe": 52,
"56Fe": 56,
"56Co": 56,
"56Ni": 56
};
GameManager.prototype.decay = {
"3H": {
"multipler": "1",
"to": "3He",
"points": 3
},
"2He": {
"multipler": "1001",
"to": "2H",
"points": 2
},
"5He": {
"multipler": "1001",
"to": "4He",
"points": 5
},
"6He": {
"multipler": "1001",
"to": "6Li",
"points": 6
},
"5Li": {
"multipler": "1001",
"to": "4He",
"points": 5
},
"6Be": {
"multipler": "1001",
"to": "4He",
"points": 6
},
"7Be": {
"multipler": "3",
"to": "7Li",
"points": 7
},
"8Be": {
"multipler": "1001",
"to": "4He",
"points": 8
},
"8B": {
"multipler": "4",
"to": "4He",
"points": 8
},
"13N": {
"multipler": "1",
"to": "13C",
"points": 13
},
"14O": {
"multipler": "1",
"to": "14N",
"points": 14
},
"15O": {
"multipler": "1",
"to": "15N",
"points": 15
},
"17F": {
"multipler": "1002",
"to": "17O",
"points": 17
},
"18F": {
"multipler": "1002",
"to": "18O",
"points": 18
},
"18Ne": {
"multipler": "1",
"to": "18F",
"points": 18
},
"19Ne": {
"multipler": "1",
"to": "19F",
"points": 19
},
"20Ne": {
"multipler": "3.5",
"to": "16O",
"points": 20
},
"22Ne": {
"multipler": "3",
"to": "18O",
"points": 22
},
"23Na": {
"multipler": "4",
"to": "19F",
"points": 23
},
"23Mg": {
"multipler": "2",
"to": "23Na",
"points": 23
},
"24Mg": {
"multipler": "12",
"to": "20Ne",
"points": 24
},
"26Mg": {
"multipler": "8",
"to": "22Ne",
"points": 26
},
"28Si": {
"multipler": "2",
"to": "24Mg",
"points": 28
},
"27Al": {
"multipler": "4",
"to": "23Na",
"points": 27
},
"28Si": {
"multipler": "2",
"to": "24Mg",
"points": 28
},
"30Si": {
"multipler": "2",
"to": "26Mg",
"points": 30
},
"32Si": {
"multipler": "0.5",
"to": "32P",
"points": 32
},
"30P": {
"multipler": "2",
"to": "30Si",
"points": 30
},
"31P": {
"multipler": "2",
"to": "27Al",
"points": 31
},
"32P": {
"multipler": "1",
"to": "32S",
"points": 32
},
"35Cl": {
"multipler": "2",
"to": "31P",
"points": 35
},
"32S": {
"multipler": "2",
"to": "28Si",
"points": 32
},
"36S": {
"multipler": "2",
"to": "32Si",
"points": 36
},
"36Ar": {
"multipler": "2",
"to": "32S",
"points": 36
},
"40Ar": {
"multipler": "2",
"to": "36S",
"points": 40
},
"40Ca": {
"multipler": "2",
"to": "36Ar",
"points": 40
},
"44Ca": {
"multipler": "2",
"to": "40Ar",
"points": 44
},
"44Sc": {
"multipler": "10",
"to": "44Ca",
"points": 44
},
"44Ti": {
"multipler": "2",
"to": "44Sc",
"points": 44
},
"48Ti": {
"multipler": "2",
"to": "44Ca",
"points": 48
},
"48V": {
"multipler": "10",
"to": "48Ti",
"points": 48
},
"48Cr": {
"multipler": "2",
"to": "48V",
"points": 48
},
"52Cr": {
"multipler": "2",
"to": "48Ti",
"points": 52
},
"52Mn": {
"multipler": "10",
"to": "52Cr",
"points": 52
},
"52Fe": {
"multipler": "2",
"to": "52Mn",
"points": 52
},
"56Co": {
"multipler": "5.5",
"to": "56Fe",
"points": 56
},
"56Ni": {
"multipler": "2.5",
"to": "56Co",
"points": 56
}
};
@import url(fonts/clear-sans.css);
.ad {
background: #00ada0;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
font-size: 36px;
color: white;
}
html, body {
margin: 0;
padding: 0;
color: #776e65;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 18px; }
body {
background: url("../images/stars_bg2.jpg") repeat;
margin: 80px 0; }
.heading:after {
content: "";
display: block;
clear: both; }
h1.title {
font-size: 80px;
font-weight: bold;
margin: 0;
display: block;
float: left; }
@-webkit-keyframes move-up {
0% {
top: 25px;
opacity: 1; }
100% {
top: -50px;
opacity: 0; } }
@-moz-keyframes move-up {
0% {
top: 25px;
opacity: 1; }
100% {
top: -50px;
opacity: 0; } }
@keyframes move-up {
0% {
top: 25px;
opacity: 1; }
100% {
top: -50px;
opacity: 0; } }
.scores-container {
float: right;
text-align: right; }
.score-container, .best-container {
position: relative;
display: inline-block;
background: #00ada0;
padding: 15px 25px;
font-size: 25px;
height: 25px;
line-height: 47px;
font-weight: bold;
border-radius: 3px;
color: white;
margin-top: 8px;
text-align: center; }
.score-container:after, .best-container:after {
position: absolute;
width: 100%;
top: 10px;
left: 0;
text-transform: uppercase;
font-size: 13px;
line-height: 13px;
text-align: center;
color: #eee4da; }
.score-container .score-addition, .best-container .score-addition {
position: absolute;
right: 30px;
color: red;
font-size: 25px;
line-height: 25px;
font-weight: bold;
color: rgba(119, 110, 101, 0.9);
z-index: 100;
-webkit-animation: move-up 600ms ease-in;
-moz-animation: move-up 600ms ease-in;
animation: move-up 600ms ease-in;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.score-container:after {
content: "Score"; }
.best-container:after {
content: "Best"; }
p {
margin-top: 0;
margin-bottom: 10px;
line-height: 1.65; }
a {
color: #776e65;
font-weight: bold;
text-decoration: underline;
cursor: pointer; }
strong.important {
text-transform: uppercase; }
hr {
border: none;
border-bottom: 1px solid #d8d4d0;
margin-top: 20px;
margin-bottom: 30px; }
.container {
width: 500px;
margin: 0 auto; }
@-webkit-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fade-in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.game-container {
margin-top: 40px;
position: relative;
padding: 15px;
cursor: default;
-webkit-touch-callout: none;
-ms-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
touch-action: none;
background: #00ada0;
border-radius: 6px;
width: 500px;
height: 500px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.game-container .game-message {
border-radius: 6px;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(238, 228, 218, 0.5);
z-index: 100;
text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.game-container .game-message p {
font-size: 40px;
font-weight: bold;
height: 60px;
line-height: 60px;
margin-top: 222px; }
.game-container .game-message .lower {
display: block;
margin-top: 59px; }
.game-container .game-message a {
display: inline-block;
background: #004742;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
margin-left: 9px; }
.game-container .game-message a.keep-playing-button {
display: none; }
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button {
display: inline-block; }
.game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; }
.grid-container {
position: absolute;
z-index: 1; }
.grid-row {
margin-bottom: 15px; }
.grid-row:last-child {
margin-bottom: 0; }
.grid-row:after {
content: "";
display: block;
clear: both; }
.grid-cell {
width: 106.25px;
height: 106.25px;
margin-right: 15px;
float: left;
border-radius: 3px;
background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child {
margin-right: 0; }
.tile-container {
position: absolute;
z-index: 2; }
.tile, .tile .tile-inner {
width: 107px;
height: 107px;
line-height: 116.25px; }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 121px);
-moz-transform: translate(0px, 121px);
transform: translate(0px, 121px); }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 242px);
-moz-transform: translate(0px, 242px);
transform: translate(0px, 242px); }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 363px);
-moz-transform: translate(0px, 363px);
transform: translate(0px, 363px); }
.tile.tile-position-2-1 {
-webkit-transform: translate(121px, 0px);
-moz-transform: translate(121px, 0px);
transform: translate(121px, 0px); }
.tile.tile-position-2-2 {
-webkit-transform: translate(121px, 121px);
-moz-transform: translate(121px, 121px);
transform: translate(121px, 121px); }
.tile.tile-position-2-3 {
-webkit-transform: translate(121px, 242px);
-moz-transform: translate(121px, 242px);
transform: translate(121px, 242px); }
.tile.tile-position-2-4 {
-webkit-transform: translate(121px, 363px);
-moz-transform: translate(121px, 363px);
transform: translate(121px, 363px); }
.tile.tile-position-3-1 {
-webkit-transform: translate(242px, 0px);
-moz-transform: translate(242px, 0px);
transform: translate(242px, 0px); }
.tile.tile-position-3-2 {
-webkit-transform: translate(242px, 121px);
-moz-transform: translate(242px, 121px);
transform: translate(242px, 121px); }
.tile.tile-position-3-3 {
-webkit-transform: translate(242px, 242px);
-moz-transform: translate(242px, 242px);
transform: translate(242px, 242px); }
.tile.tile-position-3-4 {
-webkit-transform: translate(242px, 363px);
-moz-transform: translate(242px, 363px);
transform: translate(242px, 363px); }
.tile.tile-position-4-1 {
-webkit-transform: translate(363px, 0px);
-moz-transform: translate(363px, 0px);
transform: translate(363px, 0px); }
.tile.tile-position-4-2 {
-webkit-transform: translate(363px, 121px);
-moz-transform: translate(363px, 121px);
transform: translate(363px, 121px); }
.tile.tile-position-4-3 {
-webkit-transform: translate(363px, 242px);
-moz-transform: translate(363px, 242px);
transform: translate(363px, 242px); }
.tile.tile-position-4-4 {
-webkit-transform: translate(363px, 363px);
-moz-transform: translate(363px, 363px);
transform: translate(363px, 363px); }
.tile {
position: absolute;
-webkit-transition: 100ms ease-in-out;
-moz-transition: 100ms ease-in-out;
transition: 100ms ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform; }
.tile .tile-inner {
border-radius: 3px;
background: #eee4da;
text-align: center;
font-weight: bold;
z-index: 10;
font-size: 16px; }
.tile .tile-counter {
background: #00ada0;
border-radius: 20px;
color: #fff;
font-size: 0.9em;
line-height: 13px;
padding: 4px 2px;
position: absolute;
right: 7px;
text-align: center;
top: 7px;
width: 16px; }
.tile.tile-1H .tile-inner {
background: #eee4da; }
.tile.tile-2H .tile-inner {
background: #ede2d0; }
.tile.tile-3H .tile-inner {
color: #f9f6f2;
background: #f0caa0; }
.tile.tile-2He .tile-inner {
background: #eee3d5; }
.tile.tile-3He .tile-inner {
color: #f9f6f2;
background: #f2b280; }
.tile.tile-4He .tile-inner {
color: #f9f6f2;
background: #f5976e; }
.tile.tile-5He .tile-inner {
color: #f9f6f2;
background: #f3a376; }
.tile.tile-6He .tile-inner {
color: #f9f6f2;
background: #f67f6c; }
.tile.tile-5Li .tile-inner {
color: #f9f6f2;
background: #f3a376; }
.tile.tile-6Li .tile-inner {
color: #f9f6f2;
background: #f5876d; }
.tile.tile-7Li .tile-inner {
color: #f9f6f2;
background: #f77c5d; }
.tile.tile-6Be .tile-inner {
color: #f9f6f2;
background: #f4a072; }
.tile.tile-7Be .tile-inner {
color: #f9f6f2;
background: #f67f6c; }
.tile.tile-8Be .tile-inner {
color: #f9f6f2;
background: #f6624c; }
.tile.tile-8B .tile-inner {
color: #f9f6f2;
background: #f66a5c; }
.tile.tile-12C .tile-inner {
color: #f9f6f2;
background: #edd8a0; }
.tile.tile-13C .tile-inner {
color: #f9f6f2;
background: #edd8a0; }
.tile.tile-13N .tile-inner {
color: #f9f6f2;
background: #edd8a0; }
.tile.tile-14N .tile-inner {
color: #f9f6f2;
background: #edd697; }
.tile.tile-15N .tile-inner {
color: #f9f6f2;
background: #edd697; }
.tile.tile-14O .tile-inner {
color: #f9f6f2;
background: #edd697; }
.tile.tile-15O .tile-inner {
color: #f9f6f2;
background: #edd697; }
.tile.tile-16O .tile-inner {
color: #f9f6f2;
background: #edd48d; }
.tile.tile-17O .tile-inner {
color: #f9f6f2;
background: #edd48d; }
.tile.tile-18O .tile-inner {
color: #f9f6f2;
background: #edd384; }
.tile.tile-17F .tile-inner {
color: #f9f6f2;
background: #edd48d; }
.tile.tile-18F .tile-inner {
color: #f9f6f2;
background: #edd384; }
.tile.tile-19F .tile-inner {
color: #f9f6f2;
background: #edd384; }
.tile.tile-18Ne .tile-inner {
color: #f9f6f2;
background: #edd384; }
.tile.tile-19Ne .tile-inner {
color: #f9f6f2;
background: #edd384; }
.tile.tile-20Ne .tile-inner {
color: #f9f6f2;
background: #edd17a; }
.tile.tile-22Ne .tile-inner {
color: #f9f6f2;
background: #edd17a; }
.tile.tile-23Na .tile-inner {
color: #f9f6f2;
background: #edcf70; }
.tile.tile-23Mg .tile-inner {
color: #f9f6f2;
background: #edcf70; }
.tile.tile-24Mg .tile-inner {
color: #f9f6f2;
background: #edcf70; }
.tile.tile-26Mg .tile-inner {
color: #f9f6f2;
background: #edcf70; }
.tile.tile-27Al .tile-inner {
color: #f9f6f2;
background: #edcf70; }
.tile.tile-28Si .tile-inner {
color: #f9f6f2;
background: #edc337; }
.tile.tile-30Si .tile-inner {
color: #f9f6f2;
background: #edc337; }
.tile.tile-32Si .tile-inner {
color: #f9f6f2;
background: #80e278; }
.tile.tile-30P .tile-inner {
color: #f9f6f2;
background: #edc337; }
.tile.tile-31P .tile-inner {
color: #f9f6f2;
background: #edc337; }
.tile.tile-32P .tile-inner {
color: #f9f6f2;
background: #80e278; }
.tile.tile-32S .tile-inner {
color: #f9f6f2;
background: #80e278; }
.tile.tile-36S .tile-inner {
color: #f9f6f2;
background: #64dc5a; }
.tile.tile-35Cl .tile-inner {
color: #f9f6f2;
background: #64dc5a; }
.tile.tile-36Ar .tile-inner {
color: #f9f6f2;
background: #64dc5a; }
.tile.tile-40Ar .tile-inner {
color: #f9f6f2;
background: #37bb2c; }
.tile.tile-40Ca .tile-inner {
color: #f9f6f2;
background: #37bb2c; }
.tile.tile-44Ca .tile-inner {
color: #f9f6f2;
background: #1d8814; }
.tile.tile-44Sc .tile-inner {
color: #f9f6f2;
background: #1d8814; }
.tile.tile-44Ti .tile-inner {
color: #f9f6f2;
background: #1d8814; }
.tile.tile-48Ti .tile-inner {
color: #f9f6f2;
background: #ee82ee; }
.tile.tile-48V .tile-inner {
color: #f9f6f2;
background: #ee82ee; }
.tile.tile-48Cr .tile-inner {
color: #f9f6f2;
background: #ee82ee; }
.tile.tile-52Cr .tile-inner {
color: #f9f6f2;
background: #d84068; }
.tile.tile-52Mn .tile-inner {
color: #f9f6f2;
background: #d84068; }
.tile.tile-52Fe .tile-inner {
color: #f9f6f2;
background: #d84068; }
.tile.tile-56Fe .tile-inner {
color: #f9f6f2;
background: #de1a9b; }
.tile.tile-56Co .tile-inner {
color: #f9f6f2;
background: #de1a9b; }
.tile.tile-56Ni .tile-inner {
color: #f9f6f2;
background: #de1a9b; }
@-webkit-keyframes appear {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes appear {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@keyframes appear {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
.tile-new .tile-inner {
-webkit-animation: appear 200ms ease 100ms;
-moz-animation: appear 200ms ease 100ms;
animation: appear 200ms ease 100ms;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards; }
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2); }
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
.tile-merged .tile-inner {
z-index: 20;
-webkit-animation: pop 200ms ease 100ms;
-moz-animation: pop 200ms ease 100ms;
animation: pop 200ms ease 100ms;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards; }
.above-game:after {
content: "";
display: block;
clear: both; }
.game-intro {
float: left;
line-height: 42px;
margin-bottom: 0; }
.restart-button {
display: inline-block;
background: #004742;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
display: block;
text-align: center;
float: right; }
.game-explanation {
margin-top: 50px; }
@media screen and (max-width: 520px) {
html, body {
font-size: 15px; }
body {
margin: 20px 0;
padding: 0 20px; }
h1.title {
font-size: 27px;
margin-top: 15px; }
.container {
width: 325px;
margin: 0 auto; }
.score-container, .best-container {
margin-top: 0;
padding: 15px 10px;
min-width: 40px; }
.heading {
margin-bottom: 10px; }
.game-intro {
width: 55%;
display: block;
box-sizing: border-box;
line-height: 1.65; }
.restart-button {
width: 42%;
padding: 0;
display: block;
box-sizing: border-box;
margin-top: 2px; }
.game-container {
margin-top: 17px;
position: relative;
padding: 10px;
cursor: default;
-webkit-touch-callout: none;
-ms-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-touch-action: none;
touch-action: none;
background: #00ada0;
border-radius: 6px;
width: 325px;
height: 325px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.game-container .game-message {
border-radius: 6px;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(238, 228, 218, 0.5);
z-index: 100;
text-align: center;
-webkit-animation: fade-in 800ms ease 1200ms;
-moz-animation: fade-in 800ms ease 1200ms;
animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both; }
.game-container .game-message p {
font-size: 40px;
font-weight: bold;
height: 60px;
line-height: 60px;
margin-top: 222px; }
.game-container .game-message .lower {
display: block;
margin-top: 59px; }
.game-container .game-message a {
display: inline-block;
background: #004742;
border-radius: 3px;
padding: 0 20px;
text-decoration: none;
color: #f9f6f2;
height: 40px;
line-height: 42px;
margin-left: 9px; }
.game-container .game-message a.keep-playing-button {
display: none; }
.game-container .game-message.game-won {
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.game-container .game-message.game-won a.keep-playing-button {
display: inline-block; }
.game-container .game-message.game-won, .game-container .game-message.game-over {
display: block; }
.grid-container {
position: absolute;
z-index: 1; }
.grid-row {
margin-bottom: 10px; }
.grid-row:last-child {
margin-bottom: 0; }
.grid-row:after {
content: "";
display: block;
clear: both; }
.grid-cell {
width: 68.75px;
height: 68.75px;
margin-right: 10px;
float: left;
border-radius: 3px;
background: rgba(238, 228, 218, 0.35); }
.grid-cell:last-child {
margin-right: 0; }
.tile-container {
position: absolute;
z-index: 2; }
.tile, .tile .tile-inner {
width: 69px;
height: 69px;
line-height: 78.75px; }
.tile.tile-position-1-1 {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
-webkit-transform: translate(0px, 78px);
-moz-transform: translate(0px, 78px);
transform: translate(0px, 78px); }
.tile.tile-position-1-3 {
-webkit-transform: translate(0px, 157px);
-moz-transform: translate(0px, 157px);
transform: translate(0px, 157px); }
.tile.tile-position-1-4 {
-webkit-transform: translate(0px, 236px);
-moz-transform: translate(0px, 236px);
transform: translate(0px, 236px); }
.tile.tile-position-2-1 {
-webkit-transform: translate(78px, 0px);
-moz-transform: translate(78px, 0px);
transform: translate(78px, 0px); }
.tile.tile-position-2-2 {
-webkit-transform: translate(78px, 78px);
-moz-transform: translate(78px, 78px);
transform: translate(78px, 78px); }
.tile.tile-position-2-3 {
-webkit-transform: translate(78px, 157px);
-moz-transform: translate(78px, 157px);
transform: translate(78px, 157px); }
.tile.tile-position-2-4 {
-webkit-transform: translate(78px, 236px);
-moz-transform: translate(78px, 236px);
transform: translate(78px, 236px); }
.tile.tile-position-3-1 {
-webkit-transform: translate(157px, 0px);
-moz-transform: translate(157px, 0px);
transform: translate(157px, 0px); }
.tile.tile-position-3-2 {
-webkit-transform: translate(157px, 78px);
-moz-transform: translate(157px, 78px);
transform: translate(157px, 78px); }
.tile.tile-position-3-3 {
-webkit-transform: translate(157px, 157px);
-moz-transform: translate(157px, 157px);
transform: translate(157px, 157px); }
.tile.tile-position-3-4 {
-webkit-transform: translate(157px, 236px);
-moz-transform: translate(157px, 236px);
transform: translate(157px, 236px); }
.tile.tile-position-4-1 {
-webkit-transform: translate(236px, 0px);
-moz-transform: translate(236px, 0px);
transform: translate(236px, 0px); }
.tile.tile-position-4-2 {
-webkit-transform: translate(236px, 78px);
-moz-transform: translate(236px, 78px);
transform: translate(236px, 78px); }
.tile.tile-position-4-3 {
-webkit-transform: translate(236px, 157px);
-moz-transform: translate(236px, 157px);
transform: translate(236px, 157px); }
.tile.tile-position-4-4 {
-webkit-transform: translate(236px, 236px);
-moz-transform: translate(236px, 236px);
transform: translate(236px, 236px); }
.tile .tile-counter {
font-size: 0.8em;
padding: 1px 3px;
width: auto; }
.tile .tile-inner {
font-size: 13px; }
.game-message p {
font-size: 30px !important;
height: 30px !important;
line-height: 30px !important;
margin-top: 90px !important; }
.game-message .lower {
margin-top: 30px !important; } }