2048 Jeu écrit dans le code JavaScript natif. Il est recommandé de s'exécuter sous Google Chrome.
2048.html
La copie de code est la suivante:
<! Doctype>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "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"> Appuyez pour commencer :-) </a>
</div>
</docy>
</html>
2048.css
La copie de code est la suivante:
@Charset "UTF-8";
# div2048
{
Largeur: 500px;
hauteur: 500px;
Color d'arrière-plan: # b8af9e;
marge: 0 auto;
Position: relative;
}
#commencer
{
Largeur: 500px;
hauteur: 500px;
hauteur de ligne: 500px;
Affichage: bloc;
Texte-aligne: Centre;
taille de police: 30px;
Contexte: # F2B179;
Couleur: #ffffff;
}
# div2048 div.tile
{
marge: 20px 0px 20px;
Largeur: 100px;
hauteur: 40px;
rembourrage: 30px 0;
taille de police: 40px;
hauteur de ligne: 40px;
Texte-aligne: Centre;
flottant: à gauche;
}
# div2048 div.tile0 {
Contexte: # CCC0B2;
}
# div2048 div.tile2
{
Couleur: # 7C736A;
Contexte: # EEE4DA;
}
# div2048 div.tile4
{
Couleur: # 7C736A;
Contexte: # ECE0C8;
}
# div2048 div.tile8
{
Couleur: # ffff7eb;
Contexte: # F2B179;
}
# div2048 div.tile16
{
Couleur: # ffff7eb;
Contexte: # F59563;
}
# div2048 div.tile32
{
Couleur: # ffff7eb;
Contexte: # F57C5F;
}
# div2048 div.tile64
{
Couleur: # ffff7eb;
Contexte: # F65D3B;
}
# div2048 div.tile128
{
Couleur: # ffff7eb;
Contexte: # EDCE71;
}
# div2048 div.tile256
{
Couleur: # ffff7eb;
Contexte: # EDCC61;
}
# div2048 div.tile512
{
Couleur: # ffff7eb;
Contexte: # ECC850;
}
# div2048 div.tile1024
{
Couleur: # ffff7eb;
Contexte: # EDC53F;
}
# div2048 div.tile2048
{
Couleur: # ffff7eb;
Contexte: # EEC22E;
}
2048.js
La copie de code est la suivante:
fonction game2048 (conteneur)
{
this.Container = conteneur;
this.tiles = nouveau tableau (16);
}
jeu2048.prototype = {
init: function () {
pour (var i = 0, len = this.tiles.length; i <len; i ++) {
var Tile = this.newtile (0);
tile.setAttribute ('index', i);
this.Container.ApendChild (tuile);
this.tiles [i] = tuile;
}
this.randomtile ();
this.randomtile ();
},
Newtile: fonction (val) {
var tile = document.CreateElement ('div');
this.settileval (tuile, val)
carreau de retour;
},
settileval: fonction (tuile, val) {
Tile.classname = 'Tile Tile' + Val;
Tile.setAttribute ('Val', Val);
tile.innerhtml = val> 0? Val: '';
},
RandomTile: function () {
var zerotiles = [];
pour (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);
},
déplacer: fonction (direction) {
var j;
commutateur (direction) {
cas «w»:
pour (var i = 4, len = this.tiles.length; i <len; i ++) {
j = i;
tandis que (j> = 4) {
this.merge (this.tiles [j - 4], this.tiles [j]);
J - = 4;
}
}
casser;
cas «s»:
pour (var i = 11; i> = 0; i -) {
j = i;
tandis que (j <= 11) {
this.merge (this.tiles [j + 4], this.tiles [j]);
J + = 4;
}
}
casser;
cas «a»:
pour (var i = 1, len = this.tiles.length; i <len; i ++) {
j = i;
tandis que (j% 4! = 0) {
this.merge (this.tiles [j - 1], this.tiles [j]);
J - = 1;
}
}
casser;
cas «D»:
pour (var i = 14; i> = 0; i -) {
j = i;
tandis que (j% 4! = 3) {
this.merge (this.tiles [j + 1], this.tiles [j]);
J + = 1;
}
}
casser;
}
this.randomtile ();
},
Merge: fonction (prevtile, curtile) {
var prevval = prevtile.getAttribute ('val');
var currval = currtile.getAttribute ('val');
if (currval! = 0) {
if (prevval == 0) {
this.settileval (prevtile, currval);
this.settileval (curtile, 0);
}
else if (prevval == currval) {
this.settileval (prevtile, prevval * 2);
this.settileval (curtile, 0);
}
}
},
égal: fonction (tile1, tile2) {
return tile1.getAttribute ('Val') == Tile2.GetAttribute ('Val');
},
max: function () {
pour (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('Val') == 2048) {
Retour Vrai;
}
}
},
over: function () {
pour (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('Val') == 0) {
retourne false;
}
if (i% 4! = 3) {
if (this.equal (this.tiles [i], this.tiles [i + 1])) {
retourne false;
}
}
if (i <12) {
if (this.equal (this.tiles [i], this.tiles [i + 4])) {
retourne false;
}
}
}
Retour Vrai;
},
Clean: function () {
pour (var i = 0, len = this.tiles.length; i <len; i ++) {
this.Container.removechild (this.tiles [i]);
}
this.tiles = nouveau tableau (16);
}
}
Var Game, startBtn;
window.onload = function () {
var conteneur = document.getElementById ('div2048');
startBtn = document.getElementById ('start');
startbtn.onclick = function () {
this.style.display = 'Aucun';
jeu = jeu || Nouveau Game2048 (conteneur);
game.init ();
}
}
window.onkeydown = fonction (e) {
var keynum, keychar;
if (window.event) {// c'est-à-dire
keyNum = e.KeyCode;
}
else if (e.which) {// netscape / firefox / opéra
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 = 'jeu sur, rejoue?';
retour;
}
Game.move (Keychar);
}
}