2048 Spiel im nativen JavaScript -Code geschrieben. Es wird empfohlen, unter Google Chrome auszuführen.
2048.html
Die Codekopie lautet wie folgt:
<! DocType>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "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"> tippen bis start :-) </a>
</div>
</body>
</html>
2048.css
Die Codekopie lautet wie folgt:
@CharSet "UTF-8";
#Div2048
{
Breite: 500px;
Höhe: 500px;
Hintergrundfarbe: #B8AF9E;
Rand: 0 Auto;
Position: Relativ;
}
#Start
{
Breite: 500px;
Höhe: 500px;
Linienhöhe: 500px;
Anzeige: Block;
Text-Align: Mitte;
Schriftgröße: 30px;
Hintergrund: #F2B179;
Farbe: #ffffff;
}
#Div2048 Div.tile
{
Rand: 20px 0px 20px;
Breite: 100px;
Höhe: 40px;
Polsterung: 30px 0;
Schriftgröße: 40px;
Zeilenhöhe: 40px;
Text-Align: Mitte;
float: links;
}
#Div2048 div.tile0 {
Hintergrund: #CCC0B2;
}
#Div2048 Div.tile2
{
Farbe: #7c736a;
Hintergrund: #eee4da;
}
#Div2048 Div.tile4
{
Farbe: #7c736a;
Hintergrund: #ECE0C8;
}
#Div2048 Div.tile8
{
Farbe: #ffff7eb;
Hintergrund: #F2B179;
}
#Div2048 Div.tile16
{
Farbe:#ffff7eb;
Hintergrund:#F59563;
}
#Div2048 Div.Tile32
{
Farbe:#ffff7eb;
Hintergrund:#F57C5f;
}
#Div2048 Div.Tile64
{
Farbe:#ffff7eb;
Hintergrund:#F65D3B;
}
#Div2048 Div.Tile128
{
Farbe:#ffff7eb;
Hintergrund:#edce71;
}
#Div2048 Div.Tile256
{
Farbe:#ffff7eb;
Hintergrund:#EDCC61;
}
#Div2048 Div.Tile512
{
Farbe:#ffff7eb;
Hintergrund:#ECC850;
}
#Div2048 Div.tile1024
{
Farbe:#ffff7eb;
Hintergrund:#EDC53F;
}
#Div2048 Div.Tile2048
{
Farbe:#ffff7eb;
Hintergrund:#eec22e;
}
2048.js
Die Codekopie lautet wie folgt:
Funktion Game2048 (Container)
{
this.container = Container;
this.tiles = New Array (16);
}
Game2048.Prototype = {
init: function () {
für (var i = 0, len = this.tiles.length; i <len; i ++) {
var tile = this.newtile (0);
Tile.SetatTribute ('Index', i);
this.container.appendchild (Fliesen);
this.tiles [i] = fliesen;
}
this.randomtile ();
this.randomtile ();
},
newtile: function (val) {
var tile = document.createelement ('div');
this.settileval (Fliesen, Val)
Kachel zurückkehren;
},
Settileval: Funktion (Fliesen, Val) {
Tile.className = 'Tile Tile' + Val;
Tile.SetAttribute ('Val', Val);
Tile.innerhtml = val> 0? Val: '';
},
randomTile: function () {
var Zerotiles = [];
für (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
nulotiles.push (this.tiles [i]);
}
}
var rtile = nulotiles [math.floor (math.random () * Zerotiles.length)];
this.settileval (rtile, math.random () <0,8? 2: 4);
},
Bewegung: Funktion (Richtung) {
var j;
Schalter (Richtung) {
Fall 'W':
für (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;
}
}
brechen;
Fall 's':
für (var i = 11; i> = 0; i-) {
J = i;
while (j <= 11) {
this.merge (this.tiles [j + 4], this.tiles [j]);
J += 4;
}
}
brechen;
Fall 'a':
für (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;
}
}
brechen;
Fall 'D':
für (var i = 14; i> = 0; i-) {
J = i;
while (j % 4! = 3) {
this.merge (this.tiles [j + 1], this.tiles [j]);
J += 1;
}
}
brechen;
}
this.randomtile ();
},
Merge: Funktion (vorherrschend, currtile) {
var prevval = prevtile.getAttribute ('val');
var currval = currtile.getAttribute ('val');
if (currval! = 0) {
if (prevval == 0) {
this.settileval (vorherrschend, currval);
this.settileval (Currtile, 0);
}
sonst if (prevval == currval) {
this.settileval (vorherrschig, prevval * 2);
this.settileval (Currtile, 0);
}
}
},
Gleich: Funktion (Tile1, Tile2) {
return tile1.getAttribute ('val') == Tile2.getAttribute ('val');
},
max: function () {
für (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 2048) {
zurückkehren;
}
}
},
Over: function () {
für (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
false zurückgeben;
}
if (i % 4! = 3) {
if (this.equal (this.tiles [i], this.tiles [i + 1])) {
false zurückgeben;
}
}
if (i <12) {
if (this.equal (this.tiles [i], this.tiles [i + 4])) {
false zurückgeben;
}
}
}
zurückkehren;
},
sauber: function () {
für (var i = 0, len = this.tiles.length; i <len; i ++) {
this.container.removechild (this.tiles [i]);
}
this.tiles = New Array (16);
}
}
var game, startBtn;
window.onload = function () {
var container = document.getElementById ('div2048');
startBtn = document.getElementById ('start');
startBtn.onclick = function () {
this.style.display = 'none';
game = game || New Game2048 (Container);
game.init ();
}
}
window.onkeydown = function (e) {
var keynum, keychar;
if (window.event) {// dh
Keynum = E.Keycode;
}
sonst if (e.which) {// netscape/Firefox/Opera
Keynum = e.Which;
}
KeyChar = string.fromCharCode (Keynum);
if (['w', 's', 'a', 'd']. Indexof (KeyChar)> -1) {
if (game.over ()) {
game.clean ();
startBtn.style.display = 'block';
startBtn.innerhtml = 'Spiel vorbei, replay?';
zurückkehren;
}
Game.Move (Keychar);
}
}