API tools faq
paste
Advertisement
Guest User

проект

a guest
Dec 16th, 2017
111
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>✦ ПяТнАшКе ✦</title>
  6.        
  7.         <style>
  8.             html, body{
  9.                 height: 100%;
  10.                 margin: 0;
  11.             }
  12.            
  13.             body {
  14.                 display: flex;
  15.                 justify-content: center;
  16.                 align-items: center;
  17.                 font-family: fantasy;
  18.             }
  19.            
  20.             #field {
  21.                 background-color: pink;
  22.                 width: 400px;
  23.                 height: 400px;
  24.                 border-radius: 5px;
  25.                 position: relative;
  26.             }
  27.            
  28.             .field__cell {
  29.                 width: 81.25px;
  30.                 height: 81.25px;
  31.                 border-radius: 3px;
  32.                 position: absolute;
  33.             }
  34.            
  35.             .field__cell--null {
  36.                 background-color: hotpink;
  37.             }
  38.            
  39.             .field__cell--tile {
  40.                 background-color: black;
  41.                 color: deeppink;
  42.                 font-size: 50px;
  43.                 font-weight: bold;
  44.                 font-family: Century Gothic;
  45.                 display: flex;
  46.                 justify-content: center;
  47.                 align-items: center;
  48.                 transition: left 0.5s ease, top 0.5 ease;
  49.             }
  50.            
  51.             #modal {
  52.                 height: 100%;
  53.                 width: 100%;
  54.                 border-radius: inherit;
  55.                 visibility: hidden;
  56.                 opacity: 0;
  57.                 transition: opacity 1s ease;
  58.                 position: relative;
  59.                 z-index: 1;
  60.                 display: flex;
  61.                 align-items: center;
  62.                 justify-content: center;
  63.                 background-color: black;
  64.                 color: lightpink;
  65.                 font-size: 100px;
  66.             }
  67.            
  68.             #modal {
  69.                 visibility: visible;
  70.                 opacity: 1;
  71.             }
  72.         </style>
  73.        
  74.        
  75.     </head>
  76.    
  77.     <body>
  78.         <div id="field"></div>
  79.        
  80.         <script>
  81.             var tiles = [];
  82.             var freeCell = {y: 3, x: 3};
  83.             var shuffled = false;
  84.            
  85.             function createField() {
  86.                 var x, y, cell;
  87.                 for (y = 0; y < 4; ++y) {
  88.                    for (x = 0; x < 4; ++x) {
  89.                        cell = createCellNull();
  90.                        cell.y = y;
  91.                        cell.x = x;
  92.                        setCellOffset(cell);
  93.                        appendCell(cell);
  94.                    }
  95.                }
  96.                console.log("function createField is okey");
  97.            }
  98.            
  99.            function createCellNull() {
  100.                var cell = document.createElement("div");
  101.                cell.classList.add("field__cell", "field__cell--null");
  102.                console.log("function createCellNull is okey");
  103.                return cell;
  104.            }
  105.            
  106.            function setCellOffset(cell) {
  107.                cell.style.left = (15 + (15 + 81.25) * cell.x) + "px";
  108.                cell.style.top = (15 + (15 + 81.25) * cell.y) + "px";
  109.                console.log("function setCellOffset is okey");
  110.            }
  111.            
  112.            function appendCell(cell) {
  113.                var field = document.getElementById("field");
  114.                field.appendChild(cell);
  115.                console.log("function appendCell is okey");
  116.            }
  117.            
  118.            function createTiles() {
  119.                var x, y, cell, n;
  120.                for (y = 0; y < 4; ++y) {
  121.                    for (x = 0; x < 4; ++x) {
  122.                        n = y * 4 + x + 1;
  123.                        if(n < 16) {
  124.                            cell = createCellTile();
  125.                            cell.y = y;
  126.                            cell.x = x;
  127.                            cell.innerHTML = n;
  128.                            setCellOffset(cell);
  129.                            appendCell(cell);
  130.                            tiles.push(cell);
  131.                        }
  132.                    }
  133.                }
  134.                console.log("function createTiles is okey");
  135.            }
  136.            
  137.            function createCellTile() {
  138.                var cell = document.createElement("div");
  139.                cell.classList.add("field__cell", "field__cell--tile");
  140.                console.log("function createCellTile is okey");
  141.                return cell;
  142.            }
  143.            
  144.            createField();
  145.            createTiles();
  146.            animateTiles();
  147.            shuffleTiles();
  148.        </script>
  149.     </body>
  150. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!