zoukankan      html  css  js  c++  java
  • 2048小游戏主要算法实现

    写一个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
    0 0 0 0
    0 0 0 0
    0 2 2 0
    2 0 0 0
    0
    2 2 2 0
    0 0 2 0
    0 0 0 0
    0 0 0 0
    

    样例输出

    2 2 2 0
    0 0 0 0
    0 0 0 0
    0 0 0 0
    4 2 0 0
    2 0 0 0
    0 0 0 0
    0 0 0 0
    

    基本的算法是,如果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);
        }
    }

  • 相关阅读:
    03_ if 练习 _ little2big
    uva 11275 3D Triangles
    uva 12296 Pieces and Discs
    uvalive 3218 Find the Border
    uvalive 2797 Monster Trap
    uvalive 4992 Jungle Outpost
    uva 2218 Triathlon
    uvalive 3890 Most Distant Point from the Sea
    uvalive 4728 Squares
    uva 10256 The Great Divide
  • 原文地址:https://www.cnblogs.com/aure/p/4618297.html
Copyright © 2011-2022 走看看