Game 2048

//事件处理对象
//addHandler() 方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。
var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        } //处理浏览器之间的差异
    },

    //获取事件对象
    getEvent: function (event) {
        return event ? event : window.event; //兼容IE
    }

}

//创建Game对象
function Game2048(tileCon, scoreEle, bestScoreEle) {
    this.tileContainer = tileCon;
    this.scoreEle = scoreEle;
    this.bestScoreEle = bestScoreEle;
    this.tiles = new Array(4);//创建存方块数值与dom对象的一维数组
    
}

Game2048.prototype = {  //game的原型方法
    init: function () { //初始化游戏
        this.posArray = [];//创建存空白方块坐标的数组 position
        for (let i = 0, len = this.tiles.length; i < len; i++) {

            this.tiles[i] = []; //变成了二维数组
            for (let j = 0; j < len; j++) {
                this.tiles[i][j] = { num: 0 }; //初始化存方块数值与dom对象的数组
                this.posArray.push({ "x": i, "y": j });

                //初始化存方块坐标的数组
            }
        }
        this.deleteTile(true); //清空全部方块 自定义的方法 传入true 全部clear
        this.score = 0; //初始化分数
        this.bestScore = this.bestScore || 0;
        this.newTile(); //创建两个方块
        this.newTile();
    },
    //创建方块函数
    newTile: function () {
        var tile = document.createElement("div");
        var pos = this.randomPos(); //方块位置
        var num = Math.random() < 0.9 ? 2 : 4; //新方块数值2或者4 
        this.tiles[pos.x][pos.y] = { num: num, tile: tile };
        //将新房块的数字与dom对象 存入数组
        this.setTile(tile, num, pos.x, pos.y); //设置方块属性产生移动与淡入效果
        this.tileContainer.appendChild(tile);
    },
    //设置方块class和显示的数字
    setTile: function (element, num, x, y) {  //xy 是坐标位置 （x，y）让哪一个格子生成div  根据num的值渲染不同的颜色
        element.innerHTML = num;
        element.className = "tile tile-" + num + " tile-pos-" + x + "-" + y;
    },//设置类名

    randomPos: function () { //随机一个方块位置
        let  index = Math.floor(Math.random() * this.posArray.length);
        // console.log(index);
        let pos = this.posArray[index];  // posArray 存放的是16个格子的位置 随机产生一个数字即可 
        // console.log(pos);
        this.posArray.splice(index, 1); // 产生之后就不是一个空白方块了????
        return pos; //返回的是一个对象  里面存放的位置信息 { "x": i, "y": j }
    },

    //方块移动 core
    moveTile: function (keyCode) {
        let len = this.tiles.length;
        let merge; //存合并状态  自定义函数
        switch (keyCode) {
            //左移
            case 37:
                for (let i = 1; i < len; i++) {
                    for (let j = 0; j < len; j++) {
                        if (this.tiles[i][j].num != 0 && this.leftMove(i, j)) {  //遍历所有的格子不是空格子就左移
                            merge = this.merge(i, j); //合并
                        }
                    }
                }
                break;
            //右移动
            case 39:
                for (let i = len - 2; i >= 0; i--) {
                    for (let j = 0; j < len; j++) {
                        if (this.tiles[i][j].num != 0 && this.rightMove(i, j)) {//遍历所有的格子不是空格子就right移
                            merge = this.merge(i, j);
                        }
                    }
                }
                break;
            case 38:  //shang yi dong
                for (let i = 0; i < len; i++) {
                    for (let j = 1; j < len; j++) {
                        if (this.tiles[i][j].num != 0 && this.upMove(i, j)) {//遍历所有的格子不是空格子就 up
                            merge = this.merge(i, j);
                        }
                    }
                }
                break;
            case 40:
                for (let i = 0; i < len; i++) {
                    for (let j = len - 2; j >= 0; j--) {
                        if (this.tiles[i][j].num != 0 && this.downMove(i, j)) { //遍历所有的格子不是空格子就down
                            
                            merge = this.merge(i, j);
                        }
                    }
                }
                break;
        }
        if (merge) {   //产生了 合并事件就产生一个新的方块
            this.newTile();//合并后创建一个新的方块
        } else if (this.posArray.length == 0 && this.gameOverTest()) {
            this.gameOver(); //游戏结束测试
        }
    },


    leftMove: function (i, j) { //左移函数
        this.num = this.tiles[i][j].num; //找到该格子的数字
        this.moveI = undefined;
        this.moveJ = undefined;
        for (let n = i - 1; n >= 0; n--) {  //一直试探到碰壁为止
            if (this.tiles[n][j].num == 0) { //试探左边的的格子是否为空
                this.moveI = n;
            } else if (this.tiles[n][j].num == this.num) { //如果左边的数字相同 则合并
                this.num *= 2;
                this.moveI = n;
                if (this.num == 2048) {
                    this.gameWin(); //如果有2048出现 则闯关成功
                }
                this.getScore(this.num); //记录分数
                break;
            } else {
                break;
            }
        }
        this.moveJ = j;
        if (!(this.moveI + 1) || !(this.moveJ + 1)) { //undefined + 1 = NaN; 
            return; //没有产生移动 直接进入的else break循环
        }
        return true;
    },


    rightMove: function (i, j) {   //与左移同理
        let len = this.tiles.length;
        this.num = this.tiles[i][j].num;
        this.moveI = undefined;
        this.moveJ = undefined;
        for (let n = i + 1; n < len; n++) {
            if (this.tiles[n][j].num == 0) {
                this.moveI = n;
            } else if (this.tiles[n][j].num == this.num) {
                this.num *= 2;
                this.moveI = n;
                if (this.num == 2048) {
                    this.gameWin(); 
                }
                this.getScore(this.num);
                break;
            } else {
                break;
            }
        }
        this.moveJ = j;
        if (!(this.moveI + 1) || !(this.moveJ + 1)) {
            return;
        }
        return true;
    },


    upMove: function (i, j) { //与左移同理

        this.num = this.tiles[i][j].num;
        this.moveI = undefined;
        this.moveJ = undefined;
        for (let n = j - 1; n >= 0; n--) {
            if (this.tiles[i][n].num == 0) {
                this.moveJ = n;
            } else if (this.tiles[i][n].num == this.num) {
                this.moveJ = n;
                this.num *= 2;
                if (this.num == 2048) {
                    this.gameWin(); //同理
                }
                this.getScore(this.num);
                break;
            }
        }
        this.moveI = i;
        if (!(this.moveI + 1) || !(this.moveJ + 1)) {
            return;
        }
        return true;
    },

    downMove: function (i, j) {  //与左移同理
        let len = this.tiles.length;
        this.num = this.tiles[i][j].num;
        this.moveI = undefined;
        this.moveJ = undefined;
        for (let n = j + 1; n < len; n++) {
            if (this.tiles[i][n].num == 0) {
                this.moveJ = n;
            } else if (this.tiles[i][n].num == this.num) {
                this.moveJ = n;
                this.num *= 2;
                if (this.num == 2048) {
                    this.gameWin(); //同理
                }
                this.getScore(this.num);
                break;
            }
        }
        this.moveI = i;
        if (!(this.moveI + 1) || !(this.moveJ + 1)) {
            return;
        }
        return true;
    },

    //合并方块
    merge: function (i, j) {
        let me = this; //记录this指向 
        if (this.num > this.tiles[i][j].num) {
            //this.num的值变化，即遇到相同值的方块，可移动到其位置，只需删除被覆盖的方块
            this.deleteTile(false, this.tiles[this.moveI][this.moveJ].tile);
            this.posArray.push({ x: i, y: j });
        } else if (this.num == this.tiles[i][j].num) {
            this.posArray.forEach(function (item) { // binali 
                if (item.x == me.moveI && item.y == me.moveJ) {
                    item.x = i;
                    item.y = j;
                }
            });
        }
        //设置将移动的方块的属性，产生移动效果
        this.setTile(this.tiles[i][j].tile, this.num, this.moveI, this.moveJ);
        //在存方块数值与dom对象的数组中将移动的方块的值设为空白值(即num：0)，被覆盖的方块的值设为将移动的方块的值
        this.tiles[this.moveI][this.moveJ] = { num: this.num, tile: this.tiles[i][j].tile };
        this.tiles[i][j] = { num: 0 };
        return true;
    },


    //删除方块节点
    deleteTile: function (all, tile) {
        if (all) {
            this.tileContainer.innerHTML = ""; //clear;
        } else {
            this.tileContainer.removeChild(tile);//删除单个方块
        }
    },


    //计算得分
    getScore: function (score) {
        this.score += score;
        this.scoreEle.innerHTML = this.score;
        if (this.score > this.bestScore) {
            this.bestScore = this.score // 分数超过时 ， 就刷新 最高记录
            this.bestScoreEle.innerHTML = this.bestScore;
        }
    },

    //出现2048  gameOver 也可以继续挑战
    gameWin: function () {
        let me = this;
        let win = document.createElement("div");
        let continueBtn = document.createElement("button");
        continueBtn.className = "game-win-again";
        win.className = "game-win";
        win.appendChild(continueBtn);
        this.tileContainer.appendChild(win);
        EventUtil.addHandler(continueBtn, "click", function () {
            me.deleteTile(false, win);
        });
    },

    // 没有方向移动 gameOver 
    //test
    gameOverTest: function () {
        let len = this.tiles.length;
        for (let i = 0; i < len; i++) {
            for (let j = 0; j < len; j++) {
                if (this.leftMove(i, j) || this.rightMove(i, j) || this.upMove(i, j) || this.downMove(i, j)) {
                    return; //任意方向 可以移动就继续游戏
                }
            }
        }
        return true;
    },

    //游戏结束 消息
    gameOver: function () {
        let message = document.createElement("div");
        message.className = "game-over";
        this.tileContainer.appendChild(message);
    },


    //添加事件处理程序？？？？
    initEvent: function () {
        let me = this;
        console.log(this);  //指向了game2048 对象 ；
        //限制键盘一直重复触发
        EventUtil.addHandler(window, "keyup", function (event) {
            me.moveTile(EventUtil.getEvent(event).keyCode);
        })
    },

}


window.onload = function () {
    let btn = document.getElementById("newGame");
    let tileContainer = document.getElementById("tile-container");
    let scoreEle = document.getElementById("game-score");
    let bestScoreEle = document.getElementById("game-best-score");
    var startX, startY, endX, endY;
    var game = game || new Game2048(tileContainer, scoreEle, bestScoreEle);
    //创建Game对象 传入game需要的参数

    game.initEvent();//初始化事件处理？？？
    game.init(); //初始化游戏

    EventUtil.addHandler(btn, "click", function () {
        game.init();
        //点击newgame 初始化游戏  
    });
}

上面是js部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>2048</title>
</head>

<body>
    <div class="container" id="container">
        <div class="header">
            <h1 class="game-title">2048</h1>
            <div class="game-info">
                <span id="game-best-score">0</span>
                <span id="game-score">0</span>
                <button id="newGame" type="button">New Game</button>
            </div>
        </div>
        <div class="game-container" id="game-container">
            <div class="game-result">
                <p></p>
            </div>
            <div class="gird-container">
                <div class="gird-row">
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                </div>
                <div class="gird-row">
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                </div>
                <div class="gird-row">
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                </div>
                <div class="gird-row">
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                    <div class="gird-col"></div>
                </div>
            </div>
            <div class="tile-container" id="tile-container"></div>
        </div>
    </div>
    <!-- <script type="text/javascript" src="main.js"></script> -->
    <script type="text/javascript" src="Game2048.js"></script>
</body>

</html>

HTML部分

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 500px;
    height: 640px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-family: "微软雅黑";
}

.header {
    height: 120px;
    margin-bottom: 20px;
}

.game-title {
    font-size: 50px;
    color: #776e65;
    text-align: center;
    margin-bottom: 10px;
}

.game-info {
    height: 40px;
}

#game-score, #game-best-score {
    height: 100%;
    float: left;
    min-width: 65px;
    background-color: #bbada0;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    text-align: center;
    line-height: 58px;
    position: relative;
}

#game-score:after {
    content: "Score";
    position: absolute;
    width: 100%;
    left: 0;
    top: -21px;
    text-align: center;
    color: #e9dfd4;
    font-size: 13px;
}

#game-best-score {
    margin-right: 15px;
}

#game-best-score:after {
    content: "Best";
    position: absolute;
    width: 100%;
    left: 0;
    top: -21px;
    text-align: center;
    color: #e9dfd4;
    font-size: 13px;
}

#newGame {
    height: 100%;
    width: 100px;
    float: right;
    border-radius: 5px;
    background-color: #8f7a66;
    border: none;
    box-shadow: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

#newGame:focus {
    outline: none;
}

.game-container {
    width: 500px;
    height: 500px;
    position: relative;
    background-color: #bbada0;
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
}

.gird-container {
    width: 470px;
    height: 470px;
}

.gird-row {
    width: 470px;
    height: 106.25px;
    margin-bottom: 15px;
    clear: both;
}

.gird-row:last-child {
    margin-bottom: 0;
}

.gird-col {
    width: 106.25px;
    height: 106.25px;
    margin-right: 15px;
    background-color: #cdc1b4;
    float: left;
}

.gird-col:last-child {
    margin-right: 0;
}

.tile-container {
    color: #f9f6f2;
    width: 470px;
    height: 470px;
    position: absolute;
    top: 15px;
}

.game-over {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(204, 204, 204, 0.5);
}

.game-over:after {
    content: "Game Over";
    font-size: 60px;
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    margin: auto;
    text-align: center;
}

.game-win {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(204, 204, 204, 0.5);
}

.game-win:after {
    content: "You Win";
    font-size: 60px;
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    margin: auto;
    text-align: center;
}

.game-win-again {
    width: 160px;
    height: 50px;
    border-radius: 5px;
    background-color: #8f7a66;
    border: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    position: absolute;
    bottom: 120px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 30px;
}

.game-win-again:after {
    content: "Continue";
}

.tile {
    position: absolute;
    width: 106.25px;
    height: 106.25px;
    text-align: center;
    line-height: 106.25px;
    font-size: 50px;
    top: 0;
    transition: transform 150ms ease-out;
    -moz-transition: transform 150ms ease-out;
    /* Firefox 4 */
    -webkit-transition: transform 150ms ease-out;
    /* Safari 和 Chrome */
    -o-transition: transform 150ms ease-out;
    /* Opera */
    animation: tiledisplay 300ms 1;
    -webkit-animation: tiledisplay 300ms 1;
    /* Safari 和 Chrome */
}

@keyframes tiledisplay {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-webkit-keyframes tiledisplay
/* Safari and Chrome */

    {
    0% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

.tile-container .tile-2 {
    color: #776e65;
    background: #eee4da;
}

.tile-container .tile-4 {
    color: #776e65;
    background: #ede0c8;
}

.tile-container .tile-8 {
    background: #f2b179;
}

.tile-container .tile-16 {
    background: #f59563;
}

.tile-container .tile-32 {
    background: #f67c5f;
}

.tile-container .tile-64 {
    background: #f65e3b;
}

.tile-container .tile-128 {
    background: #edcf72;
}

.tile-container .tile-256 {
    background: #edcc61;
}

.tile-container .tile-512 {
    background: #edc850;
}

.tile-container .tile-1024 {
    background: #edc53f;
}

.tile-container .tile-2048 {
    background: #edc22e;
}

.tile-container .tile-pos-0-0 {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.tile-container .tile-pos-0-1 {
    -webkit-transform: translate(0, 121.25px);
    -ms-transform: translate(0, 121.25px);
    -o-transform: translate(0, 121.25px);
    transform: translate(0, 121.25px);
}

.tile-container .tile-pos-0-2 {
    -webkit-transform: translate(0, 242.5px);
    -ms-transform: translate(0, 242.5px);
    -o-transform: translate(0, 242.5px);
    transform: translate(0, 242.5px);
}

.tile-container .tile-pos-0-3 {
    -webkit-transform: translate(0, 363.75px);
    -ms-transform: translate(0, 363.75px);
    -o-transform: translate(0, 363.75px);
    transform: translate(0, 363.75px);
}

.tile-container .tile-pos-1-0 {
    -webkit-transform: translate(121.25px, 0);
    -ms-transform: translate(121.25px, 0);
    -o-transform: translate(121.25px, 0);
    transform: translate(121.25px, 0);
}

.tile-container .tile-pos-1-1 {
    -webkit-transform: translate(121.25px, 121.25px);
    -ms-transform: translate(121.25px, 121.25px);
    -o-transform: translate(121.25px, 121.25px);
    transform: translate(121.25px, 121.25px);
}

.tile-container .tile-pos-1-2 {
    -webkit-transform: translate(121.25px, 242.5px);
    -ms-transform: translate(121.25px, 242.5px);
    -o-transform: translate(121.25px, 242.5px);
    transform: translate(121.25px, 242.5px);
}

.tile-container .tile-pos-1-3 {
    -webkit-transform: translate(121.25px, 363.75px);
    -ms-transform: translate(121.25px, 363.75px);
    -o-transform: translate(121.25px, 363.75px);
    transform: translate(121.25px, 363.75px);
}

.tile-container .tile-pos-2-0 {
    -webkit-transform: translate(242.5px, 0);
    -ms-transform: translate(242.5px, 0);
    -o-transform: translate(242.5px, 0);
    transform: translate(242.5px, 0);
}

.tile-container .tile-pos-2-1 {
    -webkit-transform: translate(242.5px, 121.25px);
    -ms-transform: translate(242.5px, 121.25px);
    -o-transform: translate(242.5px, 121.25px);
    transform: translate(242.5px, 121.25px);
}

.tile-container .tile-pos-2-2 {
    -webkit-transform: translate(242.5px, 242.5px);
    -ms-transform: translate(242.5px, 242.5px);
    -o-transform: translate(242.5px, 242.5px);
    transform: translate(242.5px, 242.5px);
}

.tile-container .tile-pos-2-3 {
    -webkit-transform: translate(242.5px, 363.75px);
    -ms-transform: translate(242.5px, 363.75px);
    -o-transform: translate(242.5px, 363.75px);
    transform: translate(242.5px, 363.75px);
}

.tile-container .tile-pos-3-0 {
    -webkit-transform: translate(363.75px, 0);
    -ms-transform: translate(363.75px, 0);
    -o-transform: translate(363.75px, 0);
    transform: translate(363.75px, 0);
}

.tile-container .tile-pos-3-1 {
    -webkit-transform: translate(363.75px, 121.25px);
    -ms-transform: translate(363.75px, 121.25px);
    -o-transform: translate(363.75px, 121.25px);
    transform: translate(363.75px, 121.25px);
}

.tile-container .tile-pos-3-2 {
    -webkit-transform: translate(363.75px, 242.5px);
    -ms-transform: translate(363.75px, 242.5px);
    -o-transform: translate(363.75px, 242.5px);
    transform: translate(363.75px, 242.5px);
}

.tile-container .tile-pos-3-3 {
    -webkit-transform: translate(363.75px, 363.75px);
    -ms-transform: translate(363.75px, 363.75px);
    -o-transform: translate(363.75px, 363.75px);
    transform: translate(363.75px, 363.75px);
}

@media screen and (max- 525px) {
    .container {
        width: 280px;
        height: 405px;
    }
    .header {
        height: 110px;
        margin-bottom: 15px;
    }
    .game-info {
        height: 40px;
    }
    .game-title {
        font-size: 50px;
    }
    .game-container {
        width: 280px;
        height: 280px;
        padding: 7px;
    }
    .gird-container {
        width: 266px;
        height: 266px;
    }
    .gird-row {
        width: 266px;
        height: 61.25px;
        margin-bottom: 7px;
    }
    .gird-col {
        width: 61.25px;
        height: 61.25px;
        margin-right: 7px;
    }
    .tile-container {
        width: 266px;
        height: 266px;
        top: 7px;
    }
    .game-over:after {
        font-size: 40px;
        height: 70px;
    }
    .game-win:after {
        font-size: 45px;
        height: 60px;
    }
    .game-win-again {
        width: 130px;
        height: 40px;
        bottom: 60px;
        font-size: 25px;
    }
    .game-win-again:after {
        content: "Continue";
    }
    .tile {
        width: 61.25px;
        height: 61.25px;
        line-height: 61.25px;
        font-size: 35px;
    }
    .tile-container .tile-pos-0-1 {
        -webkit-transform: translate(0, 68.25px);
        -ms-transform: translate(0, 68.25px);
        -o-transform: translate(0, 68.25px);
        transform: translate(0, 68.25px);
    }
    .tile-container .tile-pos-0-2 {
        -webkit-transform: translate(0, 136.5px);
        -ms-transform: translate(0, 136.5px);
        -o-transform: translate(0, 136.5px);
        transform: translate(0, 136.5px);
    }
    .tile-container .tile-pos-0-3 {
        -webkit-transform: translate(0, 204.75px);
        -ms-transform: translate(0, 204.75px);
        -o-transform: translate(0, 204.75px);
        transform: translate(0, 204.75px);
    }
    .tile-container .tile-pos-1-0 {
        -webkit-transform: translate(68.25px, 0);
        -ms-transform: translate(68.25px, 0);
        -o-transform: translate(68.25px, 0);
        transform: translate(68.25px, 0);
    }
    .tile-container .tile-pos-1-1 {
        -webkit-transform: translate(68.25px, 68.25px);
        -ms-transform: translate(68.25px, 68.25px);
        -o-transform: translate(68.25px, 68.25px);
        transform: translate(68.25px, 68.25px);
    }
    .tile-container .tile-pos-1-2 {
        -webkit-transform: translate(68.25px, 136.5px);
        -ms-transform: translate(68.25px, 136.5px);
        -o-transform: translate(68.25px, 136.5px);
        transform: translate(68.25px, 136.5px);
    }
    .tile-container .tile-pos-1-3 {
        -webkit-transform: translate(68.25px, 204.75px);
        -ms-transform: translate(68.25px, 204.75px);
        -o-transform: translate(68.25px, 204.75px);
        transform: translate(68.25px, 204.75px);
    }
    .tile-container .tile-pos-2-0 {
        -webkit-transform: translate(136.5px, 0);
        -ms-transform: translate(136.5px, 0);
        -o-transform: translate(136.5px, 0);
        transform: translate(136.5px, 0);
    }
    .tile-container .tile-pos-2-1 {
        -webkit-transform: translate(136.5px, 68.25px);
        -ms-transform: translate(136.5px, 68.25px);
        -o-transform: translate(136.5px, 68.25px);
        transform: translate(136.5px, 68.25px);
    }
    .tile-container .tile-pos-2-2 {
        -webkit-transform: translate(136.5px, 136.5px);
        -ms-transform: translate(136.5px, 136.5px);
        -o-transform: translate(136.5px, 136.5px);
        transform: translate(136.5px, 136.5px);
    }
    .tile-container .tile-pos-2-3 {
        -webkit-transform: translate(136.5px, 204.75px);
        -ms-transform: translate(136.5px, 204.75px);
        -o-transform: translate(136.5px, 204.75px);
        transform: translate(136.5px, 204.75px);
    }
    .tile-container .tile-pos-3-0 {
        -webkit-transform: translate(204.75px, 0);
        -ms-transform: translate(204.75px, 0);
        -o-transform: translate(204.75px, 0);
        transform: translate(204.75px, 0);
    }
    .tile-container .tile-pos-3-1 {
        -webkit-transform: translate(204.75px, 68.25px);
        -ms-transform: translate(204.75px, 68.25px);
        -o-transform: translate(204.75px, 68.25px);
        transform: translate(204.75px, 68.25px);
    }
    .tile-container .tile-pos-3-2 {
        -webkit-transform: translate(204.75px, 136.5px);
        -ms-transform: translate(204.75px, 136.5px);
        -o-transform: translate(204.75px, 136.5px);
        transform: translate(204.75px, 136.5px);
    }
    .tile-container .tile-pos-3-3 {
        -webkit-transform: translate(204.75px, 204.75px);
        -ms-transform: translate(204.75px, 204.75px);
        -o-transform: translate(204.75px, 204.75px);
        transform: translate(204.75px, 204.75px);
    }
}