2048 Juego escrito en el código JavaScript nativo. Se recomienda que se ejecute en Google Chrome.
2048.html
La copia del código es la siguiente:
<! Doctype>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<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>
</ablo>
<Body>
<div id = "div2048">
<a id = "inicio"> toque para iniciar :-) </a>
</div>
</body>
</html>
2048.css
La copia del código es la siguiente:
@CharSet "UTF-8";
#Div2048
{
Ancho: 500px;
Altura: 500px;
Color de fondo: #B8AF9E;
margen: 0 auto;
Posición: relativo;
}
#comenzar
{
Ancho: 500px;
Altura: 500px;
Línea de altura: 500px;
Pantalla: bloque;
Text-Align: Center;
tamaño de fuente: 30px;
Antecedentes: #F2B179;
Color: #ffffff;
}
#div2048 div.tile
{
margen: 20px 0px 20px;
Ancho: 100px;
Altura: 40px;
relleno: 30px 0;
tamaño de fuente: 40px;
Línea de altura: 40px;
Text-Align: Center;
flotante: izquierda;
}
#div2048 div.tile0 {
Antecedentes: #CCC0B2;
}
#div2048 div.tile2
{
Color: #7C736A;
Antecedentes: #EEE4DA;
}
#div2048 div.tile4
{
Color: #7C736A;
Antecedentes: #ECE0C8;
}
#div2048 div.tile8
{
Color: #ffff7eb;
Antecedentes: #F2B179;
}
#div2048 div.tile16
{
Color:#ffff7eb;
Antecedentes:#F59563;
}
#div2048 div.tile32
{
Color:#ffff7eb;
Antecedentes:#F57C5F;
}
#div2048 div.tile64
{
Color:#ffff7eb;
Antecedentes:#F65D3B;
}
#div2048 div.tile128
{
Color:#ffff7eb;
Antecedentes:#edce71;
}
#div2048 div.tile256
{
Color:#ffff7eb;
Antecedentes:#EDCC61;
}
#div2048 div.tile512
{
Color:#ffff7eb;
Antecedentes:#ECC850;
}
#div2048 div.tile1024
{
Color:#ffff7eb;
Antecedentes:#EDC53F;
}
#div2048 div.tile2048
{
Color:#ffff7eb;
Antecedentes:#EEC22E;
}
2048.js
La copia del código es la siguiente:
función juego2048 (contenedor)
{
this.container = contenedor;
this.tiles = nueva matriz (16);
}
Game2048.prototype = {
init: function () {
para (var i = 0, len = this.tiles.length; i <len; i ++) {
Var Tile = this.newtile (0);
Tile.SetAttribute ('índice', i);
this.container.appendChild (mosaico);
this.tiles [i] = Tile;
}
this.randomtile ();
this.randomtile ();
},
Newtilile: function (val) {
var tille = document.createElement ('div');
this.settileval (mosaico, val)
azulejos de retorno;
},
SetLeval: function (Tile, Val) {
Tile.className = 'Tile Tile' + Val;
Tile.SetAttribute ('val', val);
Tile.innerhtml = val> 0? Val: '';
},
randomtile: function () {
var zeroTiles = [];
para (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
zeroTiles.push (this.tiles [i]);
}
}
var rtile = zeroTiles [Math.Floor (Math.random () * ZeroTiles.Length)];
this.settileval (rtile, math.random () <0.8? 2: 4);
},
mover: función (dirección) {
var j;
interruptor (dirección) {
Caso 'W':
para (var i = 4, len = this.tiles.length; i <len; i ++) {
j = i;
while (j> = 4) {
this.merge (this.tiles [j - 4], this.tiles [j]);
j -= 4;
}
}
romper;
Case 's':
para (var i = 11; i> = 0; i-) {
j = i;
while (j <= 11) {
this.merge (this.tiles [j + 4], this.tiles [j]);
j += 4;
}
}
romper;
Caso 'A':
para (var i = 1, len = this.tiles.length; i <len; i ++) {
j = i;
while (j % 4! = 0) {
this.merge (this.tiles [j - 1], this.tiles [j]);
j -= 1;
}
}
romper;
Caso 'D':
para (var i = 14; i> = 0; i-) {
j = i;
mientras (j % 4! = 3) {
this.merge (this.tiles [j + 1], this.tiles [j]);
j += 1;
}
}
romper;
}
this.randomtile ();
},
fusionar: function (Prevtile, Currtile) {
var Prevval = Prevtile.getAttribute ('val');
var currval = currtile.getAttribute ('val');
if (Currval! = 0) {
if (prevval == 0) {
this.settileval (Prevstile, Currval);
this.settileval (Currtile, 0);
}
else if (prevval == Currval) {
this.settileval (Prevstile, Preval * 2);
this.settileval (Currtile, 0);
}
}
},
igual: function (tile1, tile2) {
return tile1.getAttribute ('val') == Tile2.getAttribute ('val');
},
max: functer () {
para (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 2048) {
devolver verdadero;
}
}
},
Over: functer () {
para (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
devolver falso;
}
if (i % 4! = 3) {
if (this.equal (this.tiles [i], this.tiles [i + 1])) {
devolver falso;
}
}
if (i <12) {
if (this.equal (this.tiles [i], this.tiles [i + 4])) {
devolver falso;
}
}
}
devolver verdadero;
},
Clean: function () {
para (var i = 0, len = this.tiles.length; i <len; i ++) {
this.container.removechild (this.tiles [i]);
}
this.tiles = nueva matriz (16);
}
}
VAR Juego, StartBtn;
window.onload = function () {
var contenedor = document.getElementById ('div2048');
startBtn = document.getElementById ('inicio');
startBtn.Onclick = functer () {
this.style.display = 'Ninguno';
juego = juego || nuevo juego2048 (contenedor);
Game.init ();
}
}
Window.OnKeydown = function (e) {
var llaynum, keychar;
if (window.event) {// es decir
KeyNum = E.KeyCode;
}
else if (E. which) {// netscape/firefox/ópera
KeyNum = E. Which;
}
keyChar = String.FromCharCode (KeyNum);
if (['w', 's', 'a', 'd']. indexOf (keyChar)> -1) {
if (game.over ()) {
game.clean ();
startBtn.style.display = 'bloque';
startbtn.innerhtml = 'juego terminado, reproducir?';
devolver;
}
Game.Move (KeyChar);
}
}