码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript之2048 JS css

时间：2019-09-16 10:21:43      阅读：104      评论：0      收藏：0      [点我收藏+]

标签：append   remove   tiles   int   sha   处理对象   app   处理程序   webkit   

/*game 2048*/
//事件处理对象
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
    }
}
function Game(tileContainer, scoreEle, bestScoreEle) {
    this.tileContainer = tileContainer;
    this.scoreEle = scoreEle;
    this.bestScoreEle = bestScoreEle;
    this.tiles = new Array(4);//创建存方块数值与dom对象的数组
}
Game.prototype = {
    //初始化游戏
    init: function () {
        this.posArray = [];//创建存空白方块坐标的数组
        for (var i = 0, len = this.tiles.length; i < len; i++) {
            this.tiles[i] = [];
            for (var j = 0; j < len; j++) {
                this.tiles[i][j] = { num: 0 }; //初始化存方块数值与dom对象的数组
                this.posArray.push({ "x": i, "y": j });//初始化存方块坐标的数组
            }
        }
        this.deleteTile(true);//清空全部方块
        this.score = 0;//初始化分数
        this.bestScore = this.bestScore || 0;//初始化最佳分数，第一次为0
        this.newTile();//随机创建一个方块
        this.newTile();
    },
    //创建一个方块
    newTile: function () {
        var tile = document.createElement("div"),
            pos = this.randomPos(),//随机新方块位置
            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) {
        element.innerHTML = num;
        element.className = "tile tile-" + num + " tile-pos-" + x + "-" + y;
    },
    //随机一方块的位置
    randomPos: function () {
        var index = Math.floor(Math.random() * this.posArray.length);
        var pos = this.posArray[index];
        this.posArray.splice(index, 1);//将新方块的位置从存空白坐标的数组中删除
        return pos;
    },
    //方块移动处理
    moveTile: function (keyCode) {
        var len = this.tiles.length,
            merge;//存合并状态
        switch (keyCode) {
            //左移
            case 37:
                for (var i = 1; i < len; i++) {
                    for (var j = 0; j < len; j++) {
                        if (this.tiles[i][j].num != 0 && this.leftMove(i, j)) {//值不为0且可移动
                            merge = this.merge(i, j);//合并
                        }
                    }
                }
                break;
            //右移
            case 39:
                for (var i = len - 2; i >= 0; i--) {
                    for (var j = 0; j < len; j++) {
                        if (this.tiles[i][j].num != 0 && this.rightMove(i, j)) {
                            merge = this.merge(i, j);
                        }
                    }
                }
                break;
            //上移
            case 38:
                for (var i = 0; i < len; i++) {
                    for (var j = 1; j < len; j++) {
                        if (this.tiles[i][j].num != 0 && this.upMove(i, j)) {
                            merge = this.merge(i, j);
                        }
                    }
                }
                break;
            //下移
            case 40:
                for (var i = 0; i < len; i++) {
                    for (var j = len - 2; j >= 0; j--) {
                        if (this.tiles[i][j].num != 0 && this.downMove(i, j)) {
                            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 (var 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();
                }
                this.getScore(this.num);
                break;
            } else {
                break;
            }
        }
        this.moveJ = j;
        if (!(this.moveI + 1) || !(this.moveJ + 1)) {
            return;
        }
        return true;
    },
    //方块右移动
    rightMove: function (i, j) {
        var len = this.tiles.length;
        this.num = this.tiles[i][j].num;
        this.moveI = undefined;
        this.moveJ = undefined;
        for (var 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 (var 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;
            } else {
                break;
            }
        }
        this.moveI = i;
        if (!(this.moveI + 1) || !(this.moveJ + 1)) {
            return;
        }
        return true;
    },
    //方块下移动
    downMove: function (i, j) {
        var len = this.tiles.length;
        this.num = this.tiles[i][j].num;
        this.moveI = undefined;
        this.moveJ = undefined;
        for (var 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;
            } else {
                break;
            }
        }
        this.moveI = i;
        if (!(this.moveI + 1) || !(this.moveJ + 1)) {
            return;
        }
        return true;
    },
    //合并方块
    merge: function (i, j) {
        var me = 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) {
                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;
    },
    //删除dom节点
    deleteTile: function (all, tile) {
        if (all) {
            this.tileContainer.innerHTML = "";//清空所有
        } 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即win，可继续挑战
    gameWin: function () {
        var me = this;
        win = document.createElement("div"),
            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);
        });
    },
    //游戏结束测试
    gameOverTest: function () {
        var len = this.tiles.length;
        for (var i = 0; i < len; i++) {
            for (var 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 () {
        var message = document.createElement("div");
        message.className = "game-over";
        this.tileContainer.appendChild(message);
    },
    //添加事件处理程序
    initEvent: function () {
        var me = this;
        //添加键盘弹起事件，限制一直按下重复触发
        EventUtil.addHandler(window, "keyup", function (event) {
            me.moveTile(EventUtil.getEvent(event).keyCode);
        });
    },
    //用于移动端，判断toustart的开始坐标是否在游戏区域gameContainer内
    touchPosTest: function (startX, startY) {
        var container = document.getElementById("container"),
            gameContainer = document.getElementById("game-container");
        //container与gameContainer宽度一致，即gameContainer的offsetLeft是其已定位父元素container的offsetLeft
        var gameContainerStartX = container.offsetLeft,
            gameContainerStartY = container.offsetTop + gameContainer.offsetTop,
            gameContainerEndX = gameContainerStartX + gameContainer.offsetWidth,
            gameContainerEndY = gameContainerStartY + gameContainer.offsetHeight;
        return (startX >= gameContainerStartX && startX <= gameContainerEndX) && (startY >= gameContainerStartY && startY <= gameContainerEndY) ? true : false;
    },
    //移动端滑动
    slidMove: function (startX, startY, endX, endY) {
        var dx = endX - startX,
            dy = endY - startY;
        var deg = Math.atan2(dy, dx) * 180 / Math.PI;//反正切值求滑动角度
        if (deg >= -45 && deg <= 45) {//右
            this.moveTile(39);
        } else if (deg < 135 && deg > 45) {//下
            this.moveTile(40);
        } else if ((deg >= 135 && deg <= 180) || (deg <= -135 && deg >= -180)) {//左
            this.moveTile(37);
        } else if (deg > -135 && deg < -45) {//上
            this.moveTile(38);
        }
    },
};
window.onload = function () {
    var btn = document.getElementById("newGame"),
        tileContainer = document.getElementById("tile-container"),
        scoreEle = document.getElementById("game-score"),
        bestScoreEle = document.getElementById("game-best-score"),
        startX, startY, endX, endY;
    var game = game || new Game(tileContainer, scoreEle, bestScoreEle);
    game.initEvent();//初始化事件处理
    game.init();//初始化游戏
    EventUtil.addHandler(btn, "click", function () {
        game.init();//newgame按钮被点击，初始化游戏，最佳分数保留直至刷新页面
    });
    //移动端触摸开始事件
    EventUtil.addHandler(document, "touchstart", function (event) {
        event.preventDefault();
        startX = event.touches[0].clientX;
        startY = event.touches[0].clientY;
    });
    //移动端触摸滑动事件
    EventUtil.addHandler(document, "touchend", function (event) {
        event.preventDefault();
        endX = event.changedTouches[0].clientX;
        endY = event.changedTouches[0].clientY;
        //只有toustart的开始坐标在游戏区域gameContainer内才出发方块四个方向滑动
        if (game.touchPosTest(startX, startY)) {
            game.slidMove(startX, startY, endX, endY);
        }
    });
}
CSS:
* {
    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-width: 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);
    }
}

JavaScript之2048 JS css

标签：append   remove   tiles   int   sha   处理对象   app   处理程序   webkit   

原文地址：https://www.cnblogs.com/fatingGoodboy/p/11525312.html
踩
(0)
赞
(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)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！