1 //事件处理对象 2 //addHandler() 方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。 3 var EventUtil = { 4 addHandler: function (element, type, handler) { 5 if (element.addEventListener) { 6 element.addEventListener(type, handler, false); 7 } else if (element.attachEvent) { 8 element.attachEvent("on" + type, handler); 9 } else { 10 element["on" + type] = handler; 11 } //处理浏览器之间的差异 12 }, 13 14 //获取事件对象 15 getEvent: function (event) { 16 return event ? event : window.event; //兼容IE 17 } 18 19 } 20 21 //创建Game对象 22 function Game2048(tileCon, scoreEle, bestScoreEle) { 23 this.tileContainer = tileCon; 24 this.scoreEle = scoreEle; 25 this.bestScoreEle = bestScoreEle; 26 this.tiles = new Array(4);//创建存方块数值与dom对象的一维数组 27 28 } 29 30 Game2048.prototype = { //game的原型方法 31 init: function () { //初始化游戏 32 this.posArray = [];//创建存空白方块坐标的数组 position 33 for (let i = 0, len = this.tiles.length; i < len; i++) { 34 35 this.tiles[i] = []; //变成了二维数组 36 for (let j = 0; j < len; j++) { 37 this.tiles[i][j] = { num: 0 }; //初始化存方块数值与dom对象的数组 38 this.posArray.push({ "x": i, "y": j }); 39 40 //初始化存方块坐标的数组 41 } 42 } 43 this.deleteTile(true); //清空全部方块 自定义的方法 传入true 全部clear 44 this.score = 0; //初始化分数 45 this.bestScore = this.bestScore || 0; 46 this.newTile(); //创建两个方块 47 this.newTile(); 48 }, 49 //创建方块函数 50 newTile: function () { 51 var tile = document.createElement("div"); 52 var pos = this.randomPos(); //方块位置 53 var num = Math.random() < 0.9 ? 2 : 4; //新方块数值2或者4 54 this.tiles[pos.x][pos.y] = { num: num, tile: tile }; 55 //将新房块的数字与dom对象 存入数组 56 this.setTile(tile, num, pos.x, pos.y); //设置方块属性产生移动与淡入效果 57 this.tileContainer.appendChild(tile); 58 }, 59 //设置方块class和显示的数字 60 setTile: function (element, num, x, y) { //xy 是坐标位置 （x，y）让哪一个格子生成div 根据num的值渲染不同的颜色 61 element.innerHTML = num; 62 element.className = "tile tile-" + num + " tile-pos-" + x + "-" + y; 63 },//设置类名 64 65 randomPos: function () { //随机一个方块位置 66 let index = Math.floor(Math.random() * this.posArray.length); 67 // console.log(index); 68 let pos = this.posArray[index]; // posArray 存放的是16个格子的位置 随机产生一个数字即可 69 // console.log(pos); 70 this.posArray.splice(index, 1); // 产生之后就不是一个空白方块了???? 71 return pos; //返回的是一个对象 里面存放的位置信息 { "x": i, "y": j } 72 }, 73 74 //方块移动 core 75 moveTile: function (keyCode) { 76 let len = this.tiles.length; 77 let merge; //存合并状态 自定义函数 78 switch (keyCode) { 79 //左移 80 case 37: 81 for (let i = 1; i < len; i++) { 82 for (let j = 0; j < len; j++) { 83 if (this.tiles[i][j].num != 0 && this.leftMove(i, j)) { //遍历所有的格子不是空格子就左移 84 merge = this.merge(i, j); //合并 85 } 86 } 87 } 88 break; 89 //右移动 90 case 39: 91 for (let i = len - 2; i >= 0; i--) { 92 for (let j = 0; j < len; j++) { 93 if (this.tiles[i][j].num != 0 && this.rightMove(i, j)) {//遍历所有的格子不是空格子就right移 94 merge = this.merge(i, j); 95 } 96 } 97 } 98 break; 99 case 38: //shang yi dong 100 for (let i = 0; i < len; i++) { 101 for (let j = 1; j < len; j++) { 102 if (this.tiles[i][j].num != 0 && this.upMove(i, j)) {//遍历所有的格子不是空格子就 up 103 merge = this.merge(i, j); 104 } 105 } 106 } 107 break; 108 case 40: 109 for (let i = 0; i < len; i++) { 110 for (let j = len - 2; j >= 0; j--) { 111 if (this.tiles[i][j].num != 0 && this.downMove(i, j)) { //遍历所有的格子不是空格子就down 112 113 merge = this.merge(i, j); 114 } 115 } 116 } 117 break; 118 } 119 if (merge) { //产生了 合并事件就产生一个新的方块 120 this.newTile();//合并后创建一个新的方块 121 } else if (this.posArray.length == 0 && this.gameOverTest()) { 122 this.gameOver(); //游戏结束测试 123 } 124 }, 125 126 127 leftMove: function (i, j) { //左移函数 128 this.num = this.tiles[i][j].num; //找到该格子的数字 129 this.moveI = undefined; 130 this.moveJ = undefined; 131 for (let n = i - 1; n >= 0; n--) { //一直试探到碰壁为止 132 if (this.tiles[n][j].num == 0) { //试探左边的的格子是否为空 133 this.moveI = n; 134 } else if (this.tiles[n][j].num == this.num) { //如果左边的数字相同 则合并 135 this.num *= 2; 136 this.moveI = n; 137 if (this.num == 2048) { 138 this.gameWin(); //如果有2048出现 则闯关成功 139 } 140 this.getScore(this.num); //记录分数 141 break; 142 } else { 143 break; 144 } 145 } 146 this.moveJ = j; 147 if (!(this.moveI + 1) || !(this.moveJ + 1)) { //undefined + 1 = NaN; 148 return; //没有产生移动 直接进入的else break循环 149 } 150 return true; 151 }, 152 153 154 rightMove: function (i, j) { //与左移同理 155 let len = this.tiles.length; 156 this.num = this.tiles[i][j].num; 157 this.moveI = undefined; 158 this.moveJ = undefined; 159 for (let n = i + 1; n < len; n++) { 160 if (this.tiles[n][j].num == 0) { 161 this.moveI = n; 162 } else if (this.tiles[n][j].num == this.num) { 163 this.num *= 2; 164 this.moveI = n; 165 if (this.num == 2048) { 166 this.gameWin(); 167 } 168 this.getScore(this.num); 169 break; 170 } else { 171 break; 172 } 173 } 174 this.moveJ = j; 175 if (!(this.moveI + 1) || !(this.moveJ + 1)) { 176 return; 177 } 178 return true; 179 }, 180 181 182 upMove: function (i, j) { //与左移同理 183 184 this.num = this.tiles[i][j].num; 185 this.moveI = undefined; 186 this.moveJ = undefined; 187 for (let n = j - 1; n >= 0; n--) { 188 if (this.tiles[i][n].num == 0) { 189 this.moveJ = n; 190 } else if (this.tiles[i][n].num == this.num) { 191 this.moveJ = n; 192 this.num *= 2; 193 if (this.num == 2048) { 194 this.gameWin(); //同理 195 } 196 this.getScore(this.num); 197 break; 198 } 199 } 200 this.moveI = i; 201 if (!(this.moveI + 1) || !(this.moveJ + 1)) { 202 return; 203 } 204 return true; 205 }, 206 207 downMove: function (i, j) { //与左移同理 208 let len = this.tiles.length; 209 this.num = this.tiles[i][j].num; 210 this.moveI = undefined; 211 this.moveJ = undefined; 212 for (let n = j + 1; n < len; n++) { 213 if (this.tiles[i][n].num == 0) { 214 this.moveJ = n; 215 } else if (this.tiles[i][n].num == this.num) { 216 this.moveJ = n; 217 this.num *= 2; 218 if (this.num == 2048) { 219 this.gameWin(); //同理 220 } 221 this.getScore(this.num); 222 break; 223 } 224 } 225 this.moveI = i; 226 if (!(this.moveI + 1) || !(this.moveJ + 1)) { 227 return; 228 } 229 return true; 230 }, 231 232 //合并方块 233 merge: function (i, j) { 234 let me = this; //记录this指向 235 if (this.num > this.tiles[i][j].num) { 236 //this.num的值变化，即遇到相同值的方块，可移动到其位置，只需删除被覆盖的方块 237 this.deleteTile(false, this.tiles[this.moveI][this.moveJ].tile); 238 this.posArray.push({ x: i, y: j }); 239 } else if (this.num == this.tiles[i][j].num) { 240 this.posArray.forEach(function (item) { // binali 241 if (item.x == me.moveI && item.y == me.moveJ) { 242 item.x = i; 243 item.y = j; 244 } 245 }); 246 } 247 //设置将移动的方块的属性，产生移动效果 248 this.setTile(this.tiles[i][j].tile, this.num, this.moveI, this.moveJ); 249 //在存方块数值与dom对象的数组中将移动的方块的值设为空白值(即num：0)，被覆盖的方块的值设为将移动的方块的值 250 this.tiles[this.moveI][this.moveJ] = { num: this.num, tile: this.tiles[i][j].tile }; 251 this.tiles[i][j] = { num: 0 }; 252 return true; 253 }, 254 255 256 //删除方块节点 257 deleteTile: function (all, tile) { 258 if (all) { 259 this.tileContainer.innerHTML = ""; //clear; 260 } else { 261 this.tileContainer.removeChild(tile);//删除单个方块 262 } 263 }, 264 265 266 //计算得分 267 getScore: function (score) { 268 this.score += score; 269 this.scoreEle.innerHTML = this.score; 270 if (this.score > this.bestScore) { 271 this.bestScore = this.score // 分数超过时 ， 就刷新 最高记录 272 this.bestScoreEle.innerHTML = this.bestScore; 273 } 274 }, 275 276 //出现2048 gameOver 也可以继续挑战 277 gameWin: function () { 278 let me = this; 279 let win = document.createElement("div"); 280 let continueBtn = document.createElement("button"); 281 continueBtn.className = "game-win-again"; 282 win.className = "game-win"; 283 win.appendChild(continueBtn); 284 this.tileContainer.appendChild(win); 285 EventUtil.addHandler(continueBtn, "click", function () { 286 me.deleteTile(false, win); 287 }); 288 }, 289 290 // 没有方向移动 gameOver 291 //test 292 gameOverTest: function () { 293 let len = this.tiles.length; 294 for (let i = 0; i < len; i++) { 295 for (let j = 0; j < len; j++) { 296 if (this.leftMove(i, j) || this.rightMove(i, j) || this.upMove(i, j) || this.downMove(i, j)) { 297 return; //任意方向 可以移动就继续游戏 298 } 299 } 300 } 301 return true; 302 }, 303 304 //游戏结束 消息 305 gameOver: function () { 306 let message = document.createElement("div"); 307 message.className = "game-over"; 308 this.tileContainer.appendChild(message); 309 }, 310 311 312 //添加事件处理程序？？？？ 313 initEvent: function () { 314 let me = this; 315 console.log(this); //指向了game2048 对象 ； 316 //限制键盘一直重复触发 317 EventUtil.addHandler(window, "keyup", function (event) { 318 me.moveTile(EventUtil.getEvent(event).keyCode); 319 }) 320 }, 321 322 } 323 324 325 window.onload = function () { 326 let btn = document.getElementById("newGame"); 327 let tileContainer = document.getElementById("tile-container"); 328 let scoreEle = document.getElementById("game-score"); 329 let bestScoreEle = document.getElementById("game-best-score"); 330 var startX, startY, endX, endY; 331 var game = game || new Game2048(tileContainer, scoreEle, bestScoreEle); 332 //创建Game对象 传入game需要的参数 333 334 game.initEvent();//初始化事件处理？？？ 335 game.init(); //初始化游戏 336 337 EventUtil.addHandler(btn, "click", function () { 338 game.init(); 339 //点击newgame 初始化游戏 340 }); 341 }
上面是js部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8 <title>2048</title> 9 </head> 10 11 <body> 12 <div class="container" id="container"> 13 <div class="header"> 14 <h1 class="game-title">2048</h1> 15 <div class="game-info"> 16 <span id="game-best-score">0</span> 17 <span id="game-score">0</span> 18 <button id="newGame" type="button">New Game</button> 19 </div> 20 </div> 21 <div class="game-container" id="game-container"> 22 <div class="game-result"> 23 <p></p> 24 </div> 25 <div class="gird-container"> 26 <div class="gird-row"> 27 <div class="gird-col"></div> 28 <div class="gird-col"></div> 29 <div class="gird-col"></div> 30 <div class="gird-col"></div> 31 </div> 32 <div class="gird-row"> 33 <div class="gird-col"></div> 34 <div class="gird-col"></div> 35 <div class="gird-col"></div> 36 <div class="gird-col"></div> 37 </div> 38 <div class="gird-row"> 39 <div class="gird-col"></div> 40 <div class="gird-col"></div> 41 <div class="gird-col"></div> 42 <div class="gird-col"></div> 43 </div> 44 <div class="gird-row"> 45 <div class="gird-col"></div> 46 <div class="gird-col"></div> 47 <div class="gird-col"></div> 48 <div class="gird-col"></div> 49 </div> 50 </div> 51 <div class="tile-container" id="tile-container"></div> 52 </div> 53 </div> 54 <!-- <script type="text/javascript" src="main.js"></script> --> 55 <script type="text/javascript" src="Game2048.js"></script> 56 </body> 57 58 </html>
HTML部分
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 6 .container { 7 width: 500px; 8 height: 640px; 9 position: absolute; 10 top: 0; 11 left: 0; 12 right: 0; 13 bottom: 0; 14 margin: auto; 15 font-family: "微软雅黑"; 16 } 17 18 .header { 19 height: 120px; 20 margin-bottom: 20px; 21 } 22 23 .game-title { 24 font-size: 50px; 25 color: #776e65; 26 text-align: center; 27 margin-bottom: 10px; 28 } 29 30 .game-info { 31 height: 40px; 32 } 33 34 #game-score, #game-best-score { 35 height: 100%; 36 float: left; 37 min-width: 65px; 38 background-color: #bbada0; 39 color: #fff; 40 font-size: 18px; 41 border-radius: 5px; 42 text-align: center; 43 line-height: 58px; 44 position: relative; 45 } 46 47 #game-score:after { 48 content: "Score"; 49 position: absolute; 50 width: 100%; 51 left: 0; 52 top: -21px; 53 text-align: center; 54 color: #e9dfd4; 55 font-size: 13px; 56 } 57 58 #game-best-score { 59 margin-right: 15px; 60 } 61 62 #game-best-score:after { 63 content: "Best"; 64 position: absolute; 65 width: 100%; 66 left: 0; 67 top: -21px; 68 text-align: center; 69 color: #e9dfd4; 70 font-size: 13px; 71 } 72 73 #newGame { 74 height: 100%; 75 width: 100px; 76 float: right; 77 border-radius: 5px; 78 background-color: #8f7a66; 79 border: none; 80 box-shadow: none; 81 color: #fff; 82 font-size: 16px; 83 cursor: pointer; 84 } 85 86 #newGame:focus { 87 outline: none; 88 } 89 90 .game-container { 91 width: 500px; 92 height: 500px; 93 position: relative; 94 background-color: #bbada0; 95 padding: 15px; 96 border-radius: 5px; 97 box-sizing: border-box; 98 -moz-box-sizing: border-box; 99 /* Firefox */ 100 -webkit-box-sizing: border-box; 101 /* Safari */ 102 } 103 104 .gird-container { 105 width: 470px; 106 height: 470px; 107 } 108 109 .gird-row { 110 width: 470px; 111 height: 106.25px; 112 margin-bottom: 15px; 113 clear: both; 114 } 115 116 .gird-row:last-child { 117 margin-bottom: 0; 118 } 119 120 .gird-col { 121 width: 106.25px; 122 height: 106.25px; 123 margin-right: 15px; 124 background-color: #cdc1b4; 125 float: left; 126 } 127 128 .gird-col:last-child { 129 margin-right: 0; 130 } 131 132 .tile-container { 133 color: #f9f6f2; 134 width: 470px; 135 height: 470px; 136 position: absolute; 137 top: 15px; 138 } 139 140 .game-over { 141 position: absolute; 142 top: 0; 143 bottom: 0; 144 left: 0; 145 right: 0; 146 z-index: 10; 147 background-color: rgba(204, 204, 204, 0.5); 148 } 149 150 .game-over:after { 151 content: "Game Over"; 152 font-size: 60px; 153 color: #fff; 154 position: absolute; 155 top: 0; 156 bottom: 0; 157 left: 0; 158 right: 0; 159 height: 70px; 160 margin: auto; 161 text-align: center; 162 } 163 164 .game-win { 165 position: absolute; 166 top: 0; 167 bottom: 0; 168 left: 0; 169 right: 0; 170 z-index: 10; 171 background-color: rgba(204, 204, 204, 0.5); 172 } 173 174 .game-win:after { 175 content: "You Win"; 176 font-size: 60px; 177 color: #fff; 178 position: absolute; 179 top: 0; 180 bottom: 0; 181 left: 0; 182 right: 0; 183 height: 70px; 184 margin: auto; 185 text-align: center; 186 } 187 188 .game-win-again { 189 width: 160px; 190 height: 50px; 191 border-radius: 5px; 192 background-color: #8f7a66; 193 border: none; 194 box-shadow: none; 195 color: #fff; 196 cursor: pointer; 197 position: absolute; 198 bottom: 120px; 199 left: 0; 200 right: 0; 201 margin: auto; 202 font-size: 30px; 203 } 204 205 .game-win-again:after { 206 content: "Continue"; 207 } 208 209 .tile { 210 position: absolute; 211 width: 106.25px; 212 height: 106.25px; 213 text-align: center; 214 line-height: 106.25px; 215 font-size: 50px; 216 top: 0; 217 transition: transform 150ms ease-out; 218 -moz-transition: transform 150ms ease-out; 219 /* Firefox 4 */ 220 -webkit-transition: transform 150ms ease-out; 221 /* Safari 和 Chrome */ 222 -o-transition: transform 150ms ease-out; 223 /* Opera */ 224 animation: tiledisplay 300ms 1; 225 -webkit-animation: tiledisplay 300ms 1; 226 /* Safari 和 Chrome */ 227 } 228 229 @keyframes tiledisplay { 230 0% { 231 opacity: 0; 232 filter: alpha(opacity=0); 233 } 234 50% { 235 opacity: 0; 236 filter: alpha(opacity=0); 237 } 238 100% { 239 opacity: 1; 240 filter: alpha(opacity=100); 241 } 242 } 243 244 @-webkit-keyframes tiledisplay 245 /* Safari and Chrome */ 246 247 { 248 0% { 249 opacity: 0; 250 filter: alpha(opacity=0); 251 } 252 50% { 253 opacity: 0; 254 filter: alpha(opacity=0); 255 } 256 100% { 257 opacity: 1; 258 filter: alpha(opacity=100); 259 } 260 } 261 262 .tile-container .tile-2 { 263 color: #776e65; 264 background: #eee4da; 265 } 266 267 .tile-container .tile-4 { 268 color: #776e65; 269 background: #ede0c8; 270 } 271 272 .tile-container .tile-8 { 273 background: #f2b179; 274 } 275 276 .tile-container .tile-16 { 277 background: #f59563; 278 } 279 280 .tile-container .tile-32 { 281 background: #f67c5f; 282 } 283 284 .tile-container .tile-64 { 285 background: #f65e3b; 286 } 287 288 .tile-container .tile-128 { 289 background: #edcf72; 290 } 291 292 .tile-container .tile-256 { 293 background: #edcc61; 294 } 295 296 .tile-container .tile-512 { 297 background: #edc850; 298 } 299 300 .tile-container .tile-1024 { 301 background: #edc53f; 302 } 303 304 .tile-container .tile-2048 { 305 background: #edc22e; 306 } 307 308 .tile-container .tile-pos-0-0 { 309 -webkit-transform: translate(0, 0); 310 -ms-transform: translate(0, 0); 311 -o-transform: translate(0, 0); 312 transform: translate(0, 0); 313 } 314 315 .tile-container .tile-pos-0-1 { 316 -webkit-transform: translate(0, 121.25px); 317 -ms-transform: translate(0, 121.25px); 318 -o-transform: translate(0, 121.25px); 319 transform: translate(0, 121.25px); 320 } 321 322 .tile-container .tile-pos-0-2 { 323 -webkit-transform: translate(0, 242.5px); 324 -ms-transform: translate(0, 242.5px); 325 -o-transform: translate(0, 242.5px); 326 transform: translate(0, 242.5px); 327 } 328 329 .tile-container .tile-pos-0-3 { 330 -webkit-transform: translate(0, 363.75px); 331 -ms-transform: translate(0, 363.75px); 332 -o-transform: translate(0, 363.75px); 333 transform: translate(0, 363.75px); 334 } 335 336 .tile-container .tile-pos-1-0 { 337 -webkit-transform: translate(121.25px, 0); 338 -ms-transform: translate(121.25px, 0); 339 -o-transform: translate(121.25px, 0); 340 transform: translate(121.25px, 0); 341 } 342 343 .tile-container .tile-pos-1-1 { 344 -webkit-transform: translate(121.25px, 121.25px); 345 -ms-transform: translate(121.25px, 121.25px); 346 -o-transform: translate(121.25px, 121.25px); 347 transform: translate(121.25px, 121.25px); 348 } 349 350 .tile-container .tile-pos-1-2 { 351 -webkit-transform: translate(121.25px, 242.5px); 352 -ms-transform: translate(121.25px, 242.5px); 353 -o-transform: translate(121.25px, 242.5px); 354 transform: translate(121.25px, 242.5px); 355 } 356 357 .tile-container .tile-pos-1-3 { 358 -webkit-transform: translate(121.25px, 363.75px); 359 -ms-transform: translate(121.25px, 363.75px); 360 -o-transform: translate(121.25px, 363.75px); 361 transform: translate(121.25px, 363.75px); 362 } 363 364 .tile-container .tile-pos-2-0 { 365 -webkit-transform: translate(242.5px, 0); 366 -ms-transform: translate(242.5px, 0); 367 -o-transform: translate(242.5px, 0); 368 transform: translate(242.5px, 0); 369 } 370 371 .tile-container .tile-pos-2-1 { 372 -webkit-transform: translate(242.5px, 121.25px); 373 -ms-transform: translate(242.5px, 121.25px); 374 -o-transform: translate(242.5px, 121.25px); 375 transform: translate(242.5px, 121.25px); 376 } 377 378 .tile-container .tile-pos-2-2 { 379 -webkit-transform: translate(242.5px, 242.5px); 380 -ms-transform: translate(242.5px, 242.5px); 381 -o-transform: translate(242.5px, 242.5px); 382 transform: translate(242.5px, 242.5px); 383 } 384 385 .tile-container .tile-pos-2-3 { 386 -webkit-transform: translate(242.5px, 363.75px); 387 -ms-transform: translate(242.5px, 363.75px); 388 -o-transform: translate(242.5px, 363.75px); 389 transform: translate(242.5px, 363.75px); 390 } 391 392 .tile-container .tile-pos-3-0 { 393 -webkit-transform: translate(363.75px, 0); 394 -ms-transform: translate(363.75px, 0); 395 -o-transform: translate(363.75px, 0); 396 transform: translate(363.75px, 0); 397 } 398 399 .tile-container .tile-pos-3-1 { 400 -webkit-transform: translate(363.75px, 121.25px); 401 -ms-transform: translate(363.75px, 121.25px); 402 -o-transform: translate(363.75px, 121.25px); 403 transform: translate(363.75px, 121.25px); 404 } 405 406 .tile-container .tile-pos-3-2 { 407 -webkit-transform: translate(363.75px, 242.5px); 408 -ms-transform: translate(363.75px, 242.5px); 409 -o-transform: translate(363.75px, 242.5px); 410 transform: translate(363.75px, 242.5px); 411 } 412 413 .tile-container .tile-pos-3-3 { 414 -webkit-transform: translate(363.75px, 363.75px); 415 -ms-transform: translate(363.75px, 363.75px); 416 -o-transform: translate(363.75px, 363.75px); 417 transform: translate(363.75px, 363.75px); 418 } 419 420 @media screen and (max-width: 525px) { 421 .container { 422 width: 280px; 423 height: 405px; 424 } 425 .header { 426 height: 110px; 427 margin-bottom: 15px; 428 } 429 .game-info { 430 height: 40px; 431 } 432 .game-title { 433 font-size: 50px; 434 } 435 .game-container { 436 width: 280px; 437 height: 280px; 438 padding: 7px; 439 } 440 .gird-container { 441 width: 266px; 442 height: 266px; 443 } 444 .gird-row { 445 width: 266px; 446 height: 61.25px; 447 margin-bottom: 7px; 448 } 449 .gird-col { 450 width: 61.25px; 451 height: 61.25px; 452 margin-right: 7px; 453 } 454 .tile-container { 455 width: 266px; 456 height: 266px; 457 top: 7px; 458 } 459 .game-over:after { 460 font-size: 40px; 461 height: 70px; 462 } 463 .game-win:after { 464 font-size: 45px; 465 height: 60px; 466 } 467 .game-win-again { 468 width: 130px; 469 height: 40px; 470 bottom: 60px; 471 font-size: 25px; 472 } 473 .game-win-again:after { 474 content: "Continue"; 475 } 476 .tile { 477 width: 61.25px; 478 height: 61.25px; 479 line-height: 61.25px; 480 font-size: 35px; 481 } 482 .tile-container .tile-pos-0-1 { 483 -webkit-transform: translate(0, 68.25px); 484 -ms-transform: translate(0, 68.25px); 485 -o-transform: translate(0, 68.25px); 486 transform: translate(0, 68.25px); 487 } 488 .tile-container .tile-pos-0-2 { 489 -webkit-transform: translate(0, 136.5px); 490 -ms-transform: translate(0, 136.5px); 491 -o-transform: translate(0, 136.5px); 492 transform: translate(0, 136.5px); 493 } 494 .tile-container .tile-pos-0-3 { 495 -webkit-transform: translate(0, 204.75px); 496 -ms-transform: translate(0, 204.75px); 497 -o-transform: translate(0, 204.75px); 498 transform: translate(0, 204.75px); 499 } 500 .tile-container .tile-pos-1-0 { 501 -webkit-transform: translate(68.25px, 0); 502 -ms-transform: translate(68.25px, 0); 503 -o-transform: translate(68.25px, 0); 504 transform: translate(68.25px, 0); 505 } 506 .tile-container .tile-pos-1-1 { 507 -webkit-transform: translate(68.25px, 68.25px); 508 -ms-transform: translate(68.25px, 68.25px); 509 -o-transform: translate(68.25px, 68.25px); 510 transform: translate(68.25px, 68.25px); 511 } 512 .tile-container .tile-pos-1-2 { 513 -webkit-transform: translate(68.25px, 136.5px); 514 -ms-transform: translate(68.25px, 136.5px); 515 -o-transform: translate(68.25px, 136.5px); 516 transform: translate(68.25px, 136.5px); 517 } 518 .tile-container .tile-pos-1-3 { 519 -webkit-transform: translate(68.25px, 204.75px); 520 -ms-transform: translate(68.25px, 204.75px); 521 -o-transform: translate(68.25px, 204.75px); 522 transform: translate(68.25px, 204.75px); 523 } 524 .tile-container .tile-pos-2-0 { 525 -webkit-transform: translate(136.5px, 0); 526 -ms-transform: translate(136.5px, 0); 527 -o-transform: translate(136.5px, 0); 528 transform: translate(136.5px, 0); 529 } 530 .tile-container .tile-pos-2-1 { 531 -webkit-transform: translate(136.5px, 68.25px); 532 -ms-transform: translate(136.5px, 68.25px); 533 -o-transform: translate(136.5px, 68.25px); 534 transform: translate(136.5px, 68.25px); 535 } 536 .tile-container .tile-pos-2-2 { 537 -webkit-transform: translate(136.5px, 136.5px); 538 -ms-transform: translate(136.5px, 136.5px); 539 -o-transform: translate(136.5px, 136.5px); 540 transform: translate(136.5px, 136.5px); 541 } 542 .tile-container .tile-pos-2-3 { 543 -webkit-transform: translate(136.5px, 204.75px); 544 -ms-transform: translate(136.5px, 204.75px); 545 -o-transform: translate(136.5px, 204.75px); 546 transform: translate(136.5px, 204.75px); 547 } 548 .tile-container .tile-pos-3-0 { 549 -webkit-transform: translate(204.75px, 0); 550 -ms-transform: translate(204.75px, 0); 551 -o-transform: translate(204.75px, 0); 552 transform: translate(204.75px, 0); 553 } 554 .tile-container .tile-pos-3-1 { 555 -webkit-transform: translate(204.75px, 68.25px); 556 -ms-transform: translate(204.75px, 68.25px); 557 -o-transform: translate(204.75px, 68.25px); 558 transform: translate(204.75px, 68.25px); 559 } 560 .tile-container .tile-pos-3-2 { 561 -webkit-transform: translate(204.75px, 136.5px); 562 -ms-transform: translate(204.75px, 136.5px); 563 -o-transform: translate(204.75px, 136.5px); 564 transform: translate(204.75px, 136.5px); 565 } 566 .tile-container .tile-pos-3-3 { 567 -webkit-transform: translate(204.75px, 204.75px); 568 -ms-transform: translate(204.75px, 204.75px); 569 -o-transform: translate(204.75px, 204.75px); 570 transform: translate(204.75px, 204.75px); 571 } 572 }
