2048小游戏主要算法实现

时间：2015-07-03 13:44:08 阅读：296 评论：0 收藏：0 [点我收藏+]

标签：

写一个2048游戏不难，通过分析你发现主要问题是如何根据当前状态和滑动方向，确定出下一个方格状态即滑动后的结果(不考虑新加入的随机方格)。每个状态绘制出来便成了一个简单的2048游戏。

技术分享

输入

输入数据有多组，每组数据的第一行为一个整数d（0表示向左滑，1表示向右滑，2表示向上滑，3表示向下滑）。

接下来有4行4列的方格，每个方格的值只能为0，2，4，8，16，32，64，128，256，512，1024，2048，其中0表示该格子为空白。

输出

每组输出滑动后的状态，即4行4列的格子值。

样例输入

样例输出

基本的算法是，如果2^k是最大的数字，那么我们努力将2^(k-1)放在它的旁边，然后再把2^(k-2)放在2^(k-1)的旁边，以此类推。

为了达成这一点，我们努力将最大的数字放在角落，然后将第二大的数字放在它旁边，以此类推。将最大的数字放在角落，这样就可以留出足够的空间来组合出更大的数字。

最终我们期望形成这样的图形：

  x   x   x   x
  4   2   x   x
  8   16  32  64
1024 512 256 128

html

<!DOCTYPE html>
<html>
<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>

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;
}

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);
    }
}

2048小游戏主要算法实现

标签：

原文地址：http://www.cnblogs.com/aure/p/4618297.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行