2048 игра, написанная в коде родного JavaScript. Рекомендуется работать под Google Chrome.
2048.html
Кода -копия выглядит следующим образом:
<! Доктип>
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<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>
<тело>
<div id = "div2048">
<a id = "start"> нажмите, чтобы запустить :-) </a>
</div>
</body>
</html>
2048.css
Кода -копия выглядит следующим образом:
@Charset "UTF-8";
#div2048
{
Ширина: 500px;
Высота: 500px;
фоновый цвет: #b8af9e;
Поле: 0 Авто;
позиция: относительно;
}
#начинать
{
Ширина: 500px;
Высота: 500px;
высота линии: 500px;
дисплей: блок;
Текст-альбом: Центр;
размер шрифта: 30px;
Фон: #F2B179;
Цвет: #ffffff;
}
#div2048 div.tile
{
Маржа: 20px 0px 20px;
Ширина: 100px;
Высота: 40px;
Заполнение: 30px 0;
размер шрифта: 40px;
высота линии: 40px;
Текст-альбом: Центр;
Плавание: осталось;
}
#div2048 div.tile0 {
Фон: #CCC0B2;
}
#div2048 div.tile2
{
Цвет: #7C736A;
Предпосылки: #eee4da;
}
#div2048 div.tile4
{
Цвет: #7C736A;
Фон: #ECE0C8;
}
#div2048 div.tile8
{
Цвет: #ffff7eb;
Фон: #F2B179;
}
#div2048 div.tile16
{
Цвет:#ffff7eb;
Фон:#F59563;
}
#div2048 div.tile32
{
Цвет:#ffff7eb;
Фон:#F57C5F;
}
#div2048 div.tile64
{
Цвет:#ffff7eb;
Фон:#F65D3B;
}
#div2048 div.tile128
{
Цвет:#ffff7eb;
Фон:#EDCE71;
}
#div2048 Div.tile256
{
Цвет:#ffff7eb;
Фон:#EDCC61;
}
#div2048 div.tile512
{
Цвет:#ffff7eb;
Фон:#ECC850;
}
#div2048 div.tile1024
{
Цвет:#ffff7eb;
Фон:#EDC53F;
}
#div2048 div.tile2048
{
Цвет:#ffff7eb;
Фон:#eec22e;
}
2048.js
Кода -копия выглядит следующим образом:
Function Game2048 (контейнер)
{
this.container = контейнер;
this.tiles = новый массив (16);
}
Game2048.Prototype = {
init: function () {
for (var i = 0, len = this.tiles.length; i <len; i ++) {
var tile = this.newtile (0);
tile.setattribute ('index', i);
this.container.appendchild (плитка);
this.tiles [i] = плитка;
}
this.randomtile ();
this.randomtile ();
},
newtile: function (val) {
var tile = document.createElement ('div');
this.settileval (плитка, Вэл)
вернуть плитку;
},
Sentileval: function (плитка, val) {
tile.classname = 'tile tile' + val;
tile.setattribute ('val', val);
tile.innerhtml = val> 0? Вэл: '';
},
randomtile: function () {
var Zerotiles = [];
for (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);
},
Переместить: функция (направление) {
var J;
переключение (направление) {
case 'w':
for (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;
}
}
перерыв;
случаи':
for (var i = 11; i> = 0; i-) {
J = I;
while (j <= 11) {
this.merge (this.tiles [j + 4], this.tiles [j]);
J += 4;
}
}
перерыв;
дело 'a':
for (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;
}
}
перерыв;
Case '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;
}
}
перерыв;
}
this.randomtile ();
},
Merge: Function (prevtile, curtile) {
var prevval = prevtile.getAttribute ('val');
var curval = curtile.getattribute ('val');
if (curval! = 0) {
if (prevval == 0) {
this.settileval (prevtile, curval);
this.settileval (curtile, 0);
}
иначе if (prevval == curval) {
this.settileval (prevtile, prevval * 2);
this.settileval (curtile, 0);
}
}
},
Равное: Функция (Tile1, Tile2) {
return tile1.getattribute ('val') == tile2.getattribute ('val');
},
max: function () {
for (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getattribute ('val') == 2048) {
вернуть истину;
}
}
},
Over: function () {
for (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getattribute ('val') == 0) {
вернуть ложь;
}
if (i % 4! = 3) {
if (this.equal (this.tiles [i], this.tiles [i + 1])) {
вернуть ложь;
}
}
if (i <12) {
if (this.equal (this.tiles [i], this.tiles [i + 4])) {
вернуть ложь;
}
}
}
вернуть истину;
},
чистый: function () {
for (var i = 0, len = this.tiles.length; i <len; i ++) {
this.container.removechild (this.tiles [i]);
}
this.tiles = новый массив (16);
}
}
var игра, startbtn;
window.onload = function () {
var container = document.getElementById ('div2048');
startBtn = document.getElementById ('start');
startBtn.onclick = function () {
this.style.display = 'none';
Game = Game || New Game2048 (контейнер);
game.init ();
}
}
window.onkeydown = function (e) {
var KeyNum, KeyChar;
if (window.event) {// т.е.
KeyNum = e.KeyCode;
}
иначе 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 = 'over, воспроизведение?';
возвращаться;
}
Game.move (KeyChar);
}
}