《2048》游戏开发

2048

演示地址：

http://github.51doo.com/2019/10/17/phaser_2048/

思路

1. 设计一个400x400的画布，以及每一个方块大小为100x100。
2. 定义一个长度为16的数组对应画布中的每一个方格。
3. 方格移动，合并修改方格上数字。

工具

• phaser.js(3.20.1)

html

1. 布局

var game;
var tileSize = 100;
window.onload = function(){
    
    var config = {
        type: Phaser.AUTO,      //Phaser.CANVAS  Phaser.WEBGL
        backgroundColor: 0x222222,
        width: tileSize * 4,
        height: tileSize * 4,
        scene: playGame
    };
    game = new Phaser.Game(config);
    window.focus();     
}

var fieldArray = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);                
var colors = {
    2: '#FFFFFF',   4: '#FFEEEE',   8: '#FFDDDD',   16: '#FFCCCC',  32: '#FFBBBB',
    64: '#FFAAAA',  128: '#FF9999', 256: '#FF8888', 512: '#FF7777', 1024: '#FF6666',
    2048: '#FF5555',    4096: '#FF4444',    8192: '#FF3333',    16384: '#FF2222',
    32768: '#FF1111',   65536: '#FF0000'
}

2. 绘制2的方块

  addTwo(){     
        do{
            var randomValue = Math.floor(Math.random()*16);
        } while (fieldArray[randomValue]!=0)
        
        fieldArray[randomValue] = 2;
        var x = this.toCol(randomValue)*tileSize;
        var y = this.toRow(randomValue)*tileSize;
        
        var tile = this.add.sprite(0, 0, "tile");
        tile.alpha = 0.5;
        tile.setOrigin(0, 0);
        tile.pos = randomValue;
        
        var text = this.add.text( tileSize/2, tileSize/2,"2",{font:"bold 16px Arial",align:"center"});
        text.setOrigin(0.5, 0.5);
        text.setColor(colors[fieldArray[randomValue]])      
        var container = this.add.container(x, y, [tile, text]);
        container.pos = randomValue;        
        this.tileSprites.add(container);        
  }
     
    toRow(n){
        return Math.floor(n/4);
    }
        
    toCol(n){
        return n%4; 
    }

3. 移动

        //左移
    moveLeft(){
        var me = this;
        var sprites = this.tileSprites.getChildren();
                //排序，根据x的坐标升序   
        var newSprites = me.sortByXY(sprites, 'x', 'asc');
        
        newSprites.forEach(function(sprite){
            var pos = sprite.pos;
            var row = me.toRow(pos);
            var col = me.toCol(pos);
            var _val = fieldArray[pos];
                                    
            while(col > 0){
                col--
                var num = me.toNum(row, col);
                //检测当前精灵与num位置是否有精灵，是否可以合并
                                //0：没有精灵，1：有精灵，2：合并
                var checked = me.checkSprite(sprite, num);
                if(checked > 0){
                    if(checked == 1) {
                        col++;
                    }
                    break;  
                }
            }
            
            fieldArray[pos] = 0;
            sprite.pos = me.toNum(row, col);
            if(!sprite.del) {                               
                fieldArray[sprite.pos] = _val;
            }
            
            me.moving = true;
            var move = me.tweens.add({
                targets: [ sprite ],            
                x: { value: col * tileSize, duration: 500, ease: 'Power1' },
                onComplete: function(){
                    if(sprite.del) {                        
                        sprite.destroy()
                    }
                    
                    me.moving = false;  
                                        //更新方块上的文字              
                    me.updateNumbers();
                }
            });
        });
        
                //新增两个2的方块
        this.addNewTwo();       
    }