javascript制作2048游戏这几天玩儿着2048这个游戏，突然心血来潮想练习下写程序的思路，于是乎就模仿做了一个，到目前位置还没有实现动态移动，不是很好看，不过玩儿着自己模仿的小游戏还是蛮爽的，哈哈2048.html<!DOCTYPE<html xmlns=““<head<meta http-equiv=“Content-Type”content=“text/html; charset=utf-8” /<title2048</title<link rel=“stylesheet” type=“text/css”href=“css/2048.css” /<!-- <script type=“text/javascript”src=“ --<script type=“text/javascript”src=“js/2048.js”</script</head<body<div id=“div2048”<a id=“start”tap to start :-)</a</div</body</html2048.css@charset “utf-8”;#div2048{width: 500px;height: 500px;background-color: #b8af9e; margin: 0 auto;position: relative;}#start{width: 500px;height: 500px;line-height: 500px; display: block;text-align: center;font-size: 30px; background: #f2b179;color: #FFFFFF;}#div2048 div.tile{margin: 20px 0px 0px 20px; width: 100px;height: 40px;padding: 30px 0;font-size: 40px;line-height: 40px;text-align: center;float: left;}#div2048 div.tile0{ background: #ccc0b2;}#div2048 div.tile2{color: #7c736a; background: #eee4da;}#div2048 div.tile4{color: #7c736a; background: #ece0c8; }#div2048 div.tile8 {color: #fff7eb; background: #f2b179; }#div2048 div.tile16 {color:#fff7eb; background:#f59563; }#div2048 div.tile32 {color:#fff7eb; background:#f57c5f; }#div2048 div.tile64 {color:#fff7eb;background:#f65d3b; }#div2048 div.tile128 {color:#fff7eb; background:#edce71; }#div2048 div.tile256 {color:#fff7eb; background:#edcc61; }#div2048 div.tile512 {color:#fff7eb; background:#ecc850; }#div2048 div.tile1024 {color:#fff7eb; background:#edc53f; }#div2048 div.tile2048{color:#fff7eb;background:#eec22e;}2048.jsfunction game2048(container){this.container = container;this.tiles = new Array(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(tile);this.tiles[i] = tile;}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 < 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);},move:function(direction){var j;switch(direction){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;}}break;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;}}break;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;}}break;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;}}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’) == tile2.getAttribute(‘val’);},max: function(){for(var i = 0, len = this.tiles.length; i <len; i++){if(this.tiles[i].getAttribute(‘val’) == 2048){return true;}}},over: function(){for(var i = 0, len = this.tiles.length; i < len; 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 < 12){if(this.equal(this.tiles[i], this.tiles[i + 4])){return false;}}}return true;},clean: function(){for(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){ // IEkeynum = e.keyCode;}else if(e.which){ // Netscape/Firefox/Operakeynum = 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 = ‘game over, replay?’;return;}game.move(keychar);}}以上所诉就是本文的全部内容了，希望大家能够喜欢。