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>