最少javascript代码完成一个2048游戏

最新推荐文章于 2024-04-28 20:44:44 发布

闪电侠风行

最新推荐文章于 2024-04-28 20:44:44 发布

阅读量3k

点赞数

分类专栏： javascript 文章标签：游戏 game 2048

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 2048.html

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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">tap to start :-)</a>
    </div>
</body>
</html>

2. 2048.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;
}

3 . 2048.js

function 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){		// IE
		keynum = e.keyCode;
	}
	else 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 = 'game over, replay?';
			return;
		}
		game.move(keychar);
	}
}

转载地址：http://www.oschina.net/code/snippet_139971_35449