2048 Jogo escrito no código JavaScript nativo. Recomenda -se executar com o Google Chrome.
2048.html
A cópia do código é a seguinte:
<! Doctype>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> 2048 </title>
<link rel = "Stylesheet" type = "text/css" href = "css/2048.css"/>
<!-<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js"> </sCript>->
<script type = "text/javascript" src = "js/2048.js"> </script>
</head>
<Body>
<div id = "div2048">
<a id = "start"> toque para começar :-) </a>
</div>
</body>
</html>
2048.css
A cópia do código é a seguinte:
@Charset "UTF-8";
#Div2048
{
Largura: 500px;
Altura: 500px;
Background-Color: #B8AF9E;
margem: 0 automático;
Posição: relativa;
}
#começar
{
Largura: 500px;
Altura: 500px;
altura de linha: 500px;
exibição: bloco;
Alinhamento de texto: centro;
tamanho da fonte: 30px;
Antecedentes: #f2b179;
Cor: #ffffff;
}
#Div2048 Div.Tile
{
Margem: 20px 0px 20px;
Largura: 100px;
Altura: 40px;
preenchimento: 30px 0;
Size da fonte: 40px;
altura da linha: 40px;
Alinhamento de texto: centro;
flutuar: esquerda;
}
#div2048 div.tile0 {
Antecedentes: #ccc0b2;
}
#div2048 div.til2
{
Cor: #7C736A;
Antecedentes: #eee4da;
}
#div2048 div.til4
{
Cor: #7C736A;
Antecedentes: #ECE0C8;
}
#Div2048 Div.Tile8
{
Cor: #ffff7Eb;
Antecedentes: #f2b179;
}
#Div2048 Div.Tile16
{
Cor:#ffff7Eb;
Antecedentes:#f59563;
}
#div2048 div.til32
{
Cor:#ffff7Eb;
Antecedentes:#f57c5f;
}
#div2048 div.til64
{
Cor:#ffff7Eb;
Antecedentes:#f65d3b;
}
#Div2048 Div.Tile128
{
Cor:#ffff7Eb;
Antecedentes:#edce71;
}
#div2048 div.til256
{
Cor:#ffff7Eb;
Antecedentes:#edcc61;
}
#div2048 div.til512
{
Cor:#ffff7Eb;
Antecedentes:#ECC850;
}
#Div2048 Div.Tile1024
{
Cor:#ffff7Eb;
Antecedentes:#edc53f;
}
#Div2048 Div.Tile2048
{
Cor:#ffff7Eb;
Antecedentes:#EEC22E;
}
2048.js
A cópia do código é a seguinte:
função game2048 (contêiner)
{
this.Container = contêiner;
this.tiles = nova matriz (16);
}
game2048.prototype = {
init: function () {
for (var i = 0, len = this.tililes.length; i <len; i ++) {
var tile = this.Newtile (0);
tile.setAtattribute ('Índice', i);
this.Container.AppendChild (Tile);
this.tiles [i] = tile;
}
this.randomtil ();
this.randomtil ();
},
newtile: function (val) {
var tile = document.createElement ('div');
this.setTileVal (azulejo, Val)
ladrilho de retorno;
},
SettileVal: function (ladrilho, val) {
tile.className = 'ladrilho' + val;
tile.setAtattribute ('val', val);
tile.innerhtml = val> 0? val: '';
},
Randomtil: function () {
var zerotils = [];
for (var i = 0, len = this.tililes.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
zerotil.push (this.tiles [i]);
}
}
var rtil = zeroTILES [MATH.FLOOR (MATH.RANDOM () * ZEROTILES.Length)];
this.setTileVal (rtil, math.random () <0,8? 2: 4);
},
Move: function (direção) {
var j;
Switch (direção) {
caso 'w':
for (var i = 4, len = this.tilis.length; i <len; i ++) {
j = i;
while (j> = 4) {
this.Merge (this.tiles [j - 4], this.tiles [j]);
j -= 4;
}
}
quebrar;
Case 'S':
for (var i = 11; i> = 0; i-) {
j = i;
while (j <= 11) {
this.Merge (this.tiles [j + 4], this.tiles [j]);
j += 4;
}
}
quebrar;
caso 'a':
for (var i = 1, len = this.tililes.length; i <len; i ++) {
j = i;
while (j % 4! = 0) {
this.Merge (this.tiles [j - 1], this.tiles [j]);
j -= 1;
}
}
quebrar;
caso 'd':
for (var i = 14; i> = 0; i-) {
j = i;
while (j % 4! = 3) {
this.Merge (this.tiles [j + 1], this.tiles [j]);
j += 1;
}
}
quebrar;
}
this.randomtil ();
},
mesclar: function (prevenile, currtile) {
var prevval = previsile.getAttribute ('val');
var currval = currTile.getAttribute ('val');
if (currval! = 0) {
if (prevval == 0) {
this.setTileVal (prevenil, currval);
this.setTileVal (currTile, 0);
}
else if (prevval == currval) {
this.setTileVal (prepeLe, prevval * 2);
this.setTileVal (currTile, 0);
}
}
},
Igual: função (tile1, tile2) {
return tile1.getAttribute ('val') == tile2.getAttribute ('val');
},
max: function () {
for (var i = 0, len = this.tililes.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 2048) {
retornar true;
}
}
},
sobre: function () {
for (var i = 0, len = this.tililes.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
retornar falso;
}
if (i % 4! = 3) {
if (this.Equal (this.tiles [i], this.tiles [i + 1])) {
retornar falso;
}
}
if (i <12) {
if (this.Equal (this.tiles [i], this.tiles [i + 4])) {
retornar falso;
}
}
}
retornar true;
},
limpo: function () {
for (var i = 0, len = this.tililes.length; i <len; i ++) {
this.container.removeChild (this.tiles [i]);
}
this.tiles = nova matriz (16);
}
}
Var Game, StartBtn;
window.onload = function () {
var container = document.getElementById ('div2048');
startBtn = document.getElementById ('start');
startBtn.OnClick = function () {
this.style.display = 'nenhum';
jogo = jogo || novo Game2048 (contêiner);
game.init ();
}
}
window.onkeydown = function (e) {
var keynum, keychar;
if (window.event) {// ie
keynum = e.KeyCode;
}
caso contrário, if (e.which) {// Netscape/Firefox/Opera
KeyNum = E. que;
}
keychar = string.FromCharCode (KeyNum);
if (['w', 's', 'a', 'd']. indexof (keychar)> -1) {
if (game.over ()) {
game.clean ();
startbtn.style.display = 'bloco';
startbtn.innerhtml = 'jogo acabou, reproduza?';
retornar;
}
game.move (keychar);
}
}