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 }