2048 기본 JavaScript 코드로 작성된 게임. Chrome에서 실행하는 것이 좋습니다.
2048.html
코드 사본은 다음과 같습니다.
<! doctype>
<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>
<body>
<div id = "div2048">
<a id = "start"> 시작하려면 탭 :-) </a>
</div>
</body>
</html>
2048.CSS
코드 사본은 다음과 같습니다.
@Charset "UTF-8";
#div2048
{
너비 : 500px;
높이 : 500px;
배경색 : #b8af9e;
여백 : 0 Auto;
위치 : 상대;
}
#시작
{
너비 : 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
코드 사본은 다음과 같습니다.
기능 게임 2048 (컨테이너)
{
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 (Tile, Val)
반환 타일;
},
settileval : function (tile, val) {
tile.classname = '타일 타일' + 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;
}
}
부서지다;
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;
}
}
부서지다;
CASE '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 ();
},
병합 : 함수 (prevtile, currtile) {
var prevval = prevtile.getAttribute ( 'val');
var currval = currtile.getAttribute ( 'val');
if (currval! = 0) {
if (prevval == 0) {
this.settileval (prevtile, curval);
this.settileval (Currtile, 0);
}
else if (prevval == currval) {
this.settileval (prevtile, prevval * 2);
this.settileval (Currtile, 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 컨테이너 = document.getElementById ( 'div2048');
startBtn = document.getElementById ( 'start');
startBtn.onClick = function () {
this.style.display = 'none';
게임 = 게임 || 새로운 Game2048 (컨테이너);
game.init ();
}
}
window.onkeydown = function (e) {
var keynum, Keychar;
if (window.event) {// IE
keynum = e.keycode;
}
else if (e.which) {// netscape/firefox/opera
기조 = E. which;
}
keychar = string.fromcharcode (keynum);
if ([ 'w', 's', 'a', 'd']. indexof (keychar)> -1) {
if (game.over ()) {
game.clean ();
startBtn.style.display = '블록';
startBtn.innerHtml = '게임 오버, 리플레이?';
반품;
}
game.move (Keychar);
}
}