Implémentation Javascript de l'exemple de jeu 2048_Connaissances de base-js tutoriel-php.cn

Jeu 2048 écrit en code javascript natif. Il est recommandé de l'exécuter sous Google Chrome.

2048.html

Copier le code Le code est le suivant : 2048 appuyez pour démarrer :-)

2048.css

Copier le code Le code est le suivant : @charset " utf-8" ; #div2048 { largeur : 500px; hauteur : 500px; couleur d'arrière-plan : #b8af9e; marge : 0 auto; position : relative; } #start { largeur : 500px; hauteur : 500px; hauteur de ligne : 500px; affichage : bloc ; alignement du texte : centre ; taille de la police : 30px; arrière-plan : #f2b179; couleur : #FFFFFF; } #div2048 div.tile { marge : 20px 0px 0px 20px ; largeur : 100px; hauteur : 40px; padding : 30px 0; taille de la police : 40px; hauteur de la ligne : 40px; alignement du texte : centre ; float : gauche ; } #div2048 div.tile0{ arrière-plan : #ccc0b2; } #div2048 div.tile2 { couleur : # 7c736a; arrière-plan : #eee4da; } #div2048 div.tile4 { couleur : #7c736a; arrière-plan : #ece0c8; } # div2048 div.tile8 { couleur : #fff7eb; arrière-plan : #f2b179; } #div2048 div.tile16 { couleur :#fff7eb; arrière-plan :#f59563; } #div2048 div.tile32 { couleur :#fff7eb; arrière-plan :#f57c5f; } #div2048 div.tile64 { couleur :#fff7eb; arrière-plan :#f65d3b; } #div2048 div.tile128 { couleur :#fff7eb; arrière-plan :# edce71; } #div2048 div.tile256 { couleur :#fff7eb; fond :#edcc61; } #div2048 div.tile512 { couleur :#fff7eb; arrière-plan :#ecc850; } #div2048 div.tile1024 { couleur :#fff7eb; arrière-plan :#edc53f; } #div2048 div.tile2048 { couleur :#fff7eb; fond :#eec22e; }

2048.js

Copier le code Le code est le suivant : function game2048(container) { this.container = container; this.tiles = new Array(16); } game2048.prototype = { init : function(){ for(var i = 0, len = this.tiles.length; i var tuile = this .newTile(0); tile.setAttribute('index', i); this.container.appendChild(tile); this.tiles[i] = tuile; } this.randomTile(); this.randomTile(); }, newTile : function(val){ var Tile = document.createElement('div'); this .setTileVal(tile, val) return Tile; }, setTileVal: function(tile, val){ tile.className = 'tile Tile' val; tile.setAttribute( 'val', val); tile.innerHTML = val > 0 ? val : ''; }, randomTile : function(){ var zeroTiles = []; for(var i = 0, len = this.tiles.length; 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() }, move:function(direction){ var j; switch(direction){ case 'W': for(var i = 4, len = this.tiles. longueur ; je j = i; pendant que(j >= 4){ this.merge(this.tiles[j - 4], this.tiles[j ]); j -= 4; } } break; cas 'S' : for(var i = 11; i >= 0; i- -){ j = i; while(j this.merge(this.tiles[j 4], this.tiles[j]); j = 4; } } break; case 'A' : for(var i = 1, len = this.tiles.length; i j = i; while(j % 4 != 0){ this.merge(this.tiles[j - 1], this.tiles[j]); j -= 1 ; } } break; case 'D': for(var i = 14; je >= 0; i--){ j = i; while(j % 4 != 3){ this.merge(this.tiles[j 1], this.tiles[j]); j = 1; } } break; } this.randomTile(); }, merge : function(prevTile, currTile){ var prevVal = prevTile.getAttribute('val'); var currVal = currTile.getAttribute('val'); if(currVal != 0){ if(prevVal == 0){ this.setTileVal(prevTile, currVal); this.setTileVal(currTile, 0); } else if(prevVal == currVal){ this.setTileVal(prevTile, prevVal) * 2); this.setTileVal(currTile, 0); } } }, equal : function(tile1, Tile2){ return Tile1.getAttribute(' val') == tuile2.getAttribute('val'); }, max: function(){ for(var i = 0, len = this.tiles.length; i if(this.tiles[i].getAttribute('val') == 2048){ return true; } } }, over : function(){ for(var i = 0, len = this.tiles.length; i if(this.tiles[i].getAttribute('val') = = 0){ return false; } if(i % 4 != 3){ if(this.equal(this.tiles[i], this.tiles[i 1] )){ return false ; } } if(i if(this.equal(this.tiles[i], this.tiles[i 4])){ return false; } } } renvoie vrai ; }, clean : function(){ for(var i = 0, len = this.tiles.length; i this.container.removeChild(this.tiles[i ]); } this.tiles = new Array(16); } }

jeu var, startBtn;

window.onload = function(){ var conteneur = document.getElementById('div2048'); startBtn = document.getElementById('start'); startBtn.onclick = function() { this.style.display = 'none'; game = jeu || nouveau jeu2048(conteneur); game.init(); } }