Welcome to CODEBOX! (Branch 1611) (Copy 1624)

✨ นางสาวรจนา หอมประสิทธิ์

<html>
  <style>
   body {
     background:hsl(var(--h),70%,90%);
     margin:10px;
     font-family:sans-serif;
      --h:320;       //change color here
      --k:160;       //change size here
      padding: 10px;
    }
    .head{
        font-family: "Bebas Neue", cursive;
        font-size: 20px;
        padding: 0.5em;
        border: none;
        border-radius: 20px;
        box-shadow: 2px 5px #888888;
        animation: movemove 1.5s infinite alternate;

}
    .h1{
      padding: 15px;
      border: none;
      border-radius: 50px;
      background-color: #FED46E;
      box-shadow: -2px -5px #888888;
      font-size: 30px;
      font-variant: small-caps;
      text-align: center;
      font-weight: 1000;
    }
    button{
      padding: 20px;
      border: none;
      border-radius: 50%;
      background-color: #FED46E;
      box-shadow: -2px -5px #888888;
      font-family: Cursive;
    }

button:hover{
      background-color: #FED46E;
      box-shadow: -5px 5px #888888;
      padding: 18px;
      border-radius: 50%;
    }
    .head2{
      margin-top: -100px;
      margin-right: 0%;
      margin-left: 90%;
      padding: 18px;
    }

/*@keyframes movemove {
      from {background-color: hsl(var(--h),70%,90%);}
      to {background-color: hsl(var(--h),70%,75%); box-shadow: 5px 5px 15px hsl(var(--h),70%,90%) inset;}
    }*/
    .container {
      margin: 20px;
      position: relative;
      height: calc(var(--k)*4px);
      width:calc(var(--k)*4px);
      border: 4px solid black;
    }
    .square {
      height: calc(var(--k)*1px);
      width: calc(var(--k)*1px);
      color: white;
      border: 1px solid white;
      position: absolute;
      transition: left 0.5s, top 0.5s;
      box-sizing: border-box;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      cursor: pointer;

}
    .square-back1{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543839531368448/1.jpg");
      background-size:contain;
    }
    .square-back2{
       background: url("https://media.discordapp.net/attachments/755789590240952371/806543843096920064/2.jpg");
      background-size:contain;
    }
    .square-back3{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543850867916870/3.jpg");
      background-size:contain;

}
    .square-back4{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543853887946782/4.jpg");
      background-size:contain;
    }
    .square-back5{
       background: url("https://media.discordapp.net/attachments/755789590240952371/806543858598019102/5.jpg");
      background-size:contain;
    }
    .square-back6{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543863502078044/6.jpg");
    background-size:contain;
    }
    .square-back7{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543872263847966/7.jpg");
      background-size:contain;
    }
    .square-back8{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543876583718912/8.jpg");
      background-size:contain;
    }
    .square-back9{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543876588044289/9.jpg");
      background-size:contain;
    }
    .square-back10{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543892585119785/10.jpg");
      background-size:contain;
    }
    .square-back11{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543896829624370/11.jpg");
      background-size:contain;
    }
    .square-back12{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543892412628992/12.jpg");
      background-size:contain;
    }
    .square-back13{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543905997979668/13.jpg");
      background-size:contain;
    }
    .square-back14{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543914709286912/14.jpg");
      background-size:contain;
    }
    .square-back15{
       background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543914386849842/15.jpg");
      background-size:contain;
    }
    .empty {
      background:hsl(var(--h),70%,90%);
      z-index: 1;
    }
    [data-pos="0"] {
      left: 0;
      top: 0;
    }
    [data-pos="1"] {
      left: calc(1px*var(--k));
      top: 0;
    }
    [data-pos="2"] {
      left: calc(2px*var(--k));
      top: 0;
    }
    [data-pos="3"] {
      left: calc(3px*var(--k));
      top: 0;
    }
    [data-pos="4"] {
      left: 0;
      top: calc(1px*var(--k));
    }
    [data-pos="5"] {
      left: calc(1px*var(--k));
      top: calc(1px*var(--k));
    }
    [data-pos="6"] {
      left: calc(2px*var(--k));
      top: calc(1px*var(--k));
    }
    [data-pos="7"] {
      left: calc(3px*var(--k));
      top: calc(1px*var(--k));
    }
    [data-pos="8"] {
      left: 0;
      top: calc(2px*var(--k));
    }
    [data-pos="9"] {
      left: calc(1px*var(--k));
      top: calc(2px*var(--k));
    }
    [data-pos="10"] {
      left: calc(2px*var(--k));
      top: calc(2px*var(--k));
    }
    [data-pos="11"] {
      left: calc(3px*var(--k));
      top: calc(2px*var(--k));
    }
    [data-pos="12"] {
      left: 0;
      top: calc(3px*var(--k));
    }
    [data-pos="13"] {
      left: calc(1px*var(--k));
      top: calc(3px*var(--k));
    }
    [data-pos="14"] {
      left: calc(2px*var(--k));
      top: calc(3px*var(--k));
    }
    [data-pos="15"] {
      left: calc(3px*var(--k));
      top: calc(3px*var(--k));
    }
    .bubble,
    .bubbles,{
      width:400px;
      height:400px;
      background:hsl(var(--h),70%,60%);
      border-radius:100%;
      position:fixed;
      bottom:-100px;
      right:-200px;
      opacity:.3;
      z-index:-1;
    }
    .bubbles{
      background:blue;
      bottom:100px;
      right:200px;
    }
  </style>
</head>
<body id="content">
    <div class="bubble"></div>

<div class="head">
      <div class="h1">Arin Puzzle
      </div>
      <button class="head2"><a href="https://codepen.io/ngirard/pen/MJELze">Ref:</a>
    </button>
    </div>
    <center>
     <div class="container">
      <div class="square square-back1" data-pos="0"></div>
      <div class="square square-back14" data-pos="1"></div>
      <div class="square square-back9" data-pos="2"></div>
      <div class="square square-back3" data-pos="3"></div>
      <div class="square square-back12" data-pos="4"></div>
      <div class="square empty" data-pos="5"></div>
      <div class="square square-back2" data-pos="6"></div>
      <div class="square square-back6" data-pos="7"></div>
      <div class="square square-back7" data-pos="8"></div>
      <div class="square square-back10" data-pos="9"></div>
      <div class="square square-back11" data-pos="10"></div>
      <div class="square square-back4" data-pos="11"></div>
      <div class="square square-back15" data-pos="12"></div>
      <div class="square square-back5" data-pos="13"></div>
      <div class="square square-back13" data-pos="14"></div>
      <div class="square square-back8" data-pos="15"></div>
      </div></center>
    <b>Change Color</b>
    0:<input type="range" min="0" max="360" value="100" onchange="changeColor(this.value)">:360
     <br><b>Change Size</b>
    100:<input type="range" min="100" max="300" value="160" onchange="changeSize(this.value)">:300
</body>
<script>
      var squares = document.querySelectorAll('.square');
    squares.forEach(square => {
      square.addEventListener('click', e => {
        e.preventDefault();    
        var firstPos = parseInt(e.target.dataset.pos);
        var empty = document.querySelectorAll('.empty')[0];
        var secondPos = parseInt(empty.dataset.pos);

var top = secondPos-4;
        var bottom = secondPos+4;
        var left = secondPos-1;
        var right = secondPos+1;

if (secondPos%4-left%4 < 1) {
          left = -1;
        }
        if (right%4-secondPos%4 < 1) {
          right = -1;
        }
        var posibilities = [left, right, top, bottom];

if (posibilities.includes(firstPos)) {
          empty.dataset.pos = firstPos;
          e.target.dataset.pos = secondPos;
        }
      })
    });
    function changeColor(h){
      content.style.setProperty('--h', h)
    }
    function changeSize(k){
      content.style.setProperty('--k', k)
    }
</script>
</html>