Skip to main content
Aviso eliminado Se requiere una respuesta canónica por ComunidadBot
Recompensa finalizada sin una respuesta ganadora por ComunidadBot
se eliminaron 422 caracteres en el cuerpo
Origen Enlace
var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })
  //.set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileBg.png)' })
  //.set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileShade.png)', y: 2, scale: 1.1, opacity: 0.8 })

  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(images/fichasMio.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(images/fichas0.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
 html, body, #container {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  display:block; float:left;
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;

} 
div {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  position: absolute; 
} 

/* .cajon {
  display: grid;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
} */
 


/* html, body, div #container {
  width:100%;
  height:100%;
  display: grid;
  grid-auto-rows: 22rem ;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  color: rgb(82, 72, 72);
} */

/* Escritorio extra grande 
/* @media only screen and (min-width: 1200px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}
/ Escritorio grande 
@media only screen and (min-width: 992px) and (max-width: 1199px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

/Escritorio pequeño / tablet 
@media only screen and (min-width: 768px) and (max-width: 991px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

Tablets y phablets 
@media only screen and (min-width: 576px) and (max-width: 767px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

 Teléfonos 
@media only screen and (max-width: 575px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
 
} */

@media only screen and (max-width: 600px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {

  .tile {
    grid-template-columns: auto;
  }
}
<html>
<head>
  <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/encuentra.css">
  <title>Encuentra las Palbras</title>
</head>

<body>

  <form action="index.html">
    <button class="button secondary-button ">Menu</button>
  </form>
  <div id="container" style="opacity:0">

    <div class="app">

      <div class="timeTxt">30:00</div>
      <div class="timePlus">+3 sec</div>
      <div class="playBtn">
        <div class="playTxt">Play</div>
      </div>

      <div class="correctHead">Correct: <span class="correctN">0</span></div>
      <div class="correctList"></div>

      <div class="slot" id="s1"></div>
      <div class="slot" id="s2"></div>
      <div class="slot" id="s3"></div>
      <div class="slot" id="s4"></div>
      <div class="slot" id="s5"></div>
      <div class="slot" id="s6"></div>

      <div class="tile" id="t1">
        <div class="tileShade"></div>
        <div class="tileFront">M</div>
      </div>
      <div class="tile" id="t2">
        <div class="tileShade"></div>
        <div class="tileFront">I</div>
      </div>
      <div class="tile" id="t3">
        <div class="tileShade"></div>
        <div class="tileFront">X</div>
      </div>
      <div class="tile" id="t4">
        <div class="tileShade"></div>
        <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div>
      <div class="tile" id="t5">
        <div class="tileShade"></div>
        <div class="tileFront">U</div>
      </div>
      <div class="tile" id="t6">
        <div class="tileShade"></div>
        <div class="tileFront">P</div>
      </div>
      </div>
    </div>
</body>

</html>
var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })
  //.set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileBg.png)' })
  //.set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileShade.png)', y: 2, scale: 1.1, opacity: 0.8 })

  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(images/fichasMio.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(images/fichas0.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
 html, body, #container {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  display:block; float:left;
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;

} 
div {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  position: absolute; 
} 

/* .cajon {
  display: grid;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
} */
 


/* html, body, div #container {
  width:100%;
  height:100%;
  display: grid;
  grid-auto-rows: 22rem ;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  color: rgb(82, 72, 72);
} */

/* Escritorio extra grande 
/* @media only screen and (min-width: 1200px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}
/ Escritorio grande 
@media only screen and (min-width: 992px) and (max-width: 1199px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

/Escritorio pequeño / tablet 
@media only screen and (min-width: 768px) and (max-width: 991px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

Tablets y phablets 
@media only screen and (min-width: 576px) and (max-width: 767px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

 Teléfonos 
@media only screen and (max-width: 575px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
 
} */

@media only screen and (max-width: 600px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {

  .tile {
    grid-template-columns: auto;
  }
}
<html>
<head>
  <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/encuentra.css">
  <title>Encuentra las Palbras</title>
</head>

<body>

  <form action="index.html">
    <button class="button secondary-button ">Menu</button>
  </form>
  <div id="container" style="opacity:0">

    <div class="app">

      <div class="timeTxt">30:00</div>
      <div class="timePlus">+3 sec</div>
      <div class="playBtn">
        <div class="playTxt">Play</div>
      </div>

      <div class="correctHead">Correct: <span class="correctN">0</span></div>
      <div class="correctList"></div>

      <div class="slot" id="s1"></div>
      <div class="slot" id="s2"></div>
      <div class="slot" id="s3"></div>
      <div class="slot" id="s4"></div>
      <div class="slot" id="s5"></div>
      <div class="slot" id="s6"></div>

      <div class="tile" id="t1">
        <div class="tileShade"></div>
        <div class="tileFront">M</div>
      </div>
      <div class="tile" id="t2">
        <div class="tileShade"></div>
        <div class="tileFront">I</div>
      </div>
      <div class="tile" id="t3">
        <div class="tileShade"></div>
        <div class="tileFront">X</div>
      </div>
      <div class="tile" id="t4">
        <div class="tileShade"></div>
        <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div>
      <div class="tile" id="t5">
        <div class="tileShade"></div>
        <div class="tileFront">U</div>
      </div>
      <div class="tile" id="t6">
        <div class="tileShade"></div>
        <div class="tileFront">P</div>
      </div>
      </div>
    </div>
</body>

</html>
var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })

  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(images/fichasMio.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(images/fichas0.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
html, body, #container {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  display:block; float:left;
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;

} 
div {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  position: absolute; 
} 

/* .cajon {
  display: grid;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
} */
 


/* html, body, div #container {
  width:100%;
  height:100%;
  display: grid;
  grid-auto-rows: 22rem ;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  color: rgb(82, 72, 72);
} */

/* Escritorio extra grande 
/* @media only screen and (min-width: 1200px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}
/ Escritorio grande 
@media only screen and (min-width: 992px) and (max-width: 1199px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

/Escritorio pequeño / tablet 
@media only screen and (min-width: 768px) and (max-width: 991px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

Tablets y phablets 
@media only screen and (min-width: 576px) and (max-width: 767px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

 Teléfonos 
@media only screen and (max-width: 575px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
 
} */

@media only screen and (max-width: 600px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {

  .tile {
    grid-template-columns: auto;
  }
}
<html>
<head>
  <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/encuentra.css">
  <title>Encuentra las Palbras</title>
</head>

<body>

  <form action="index.html">
    <button class="button secondary-button ">Menu</button>
  </form>
  <div id="container" style="opacity:0">

    <div class="app">

      <div class="timeTxt">30:00</div>
      <div class="timePlus">+3 sec</div>
      <div class="playBtn">
        <div class="playTxt">Play</div>
      </div>

      <div class="correctHead">Correct: <span class="correctN">0</span></div>
      <div class="correctList"></div>

      <div class="slot" id="s1"></div>
      <div class="slot" id="s2"></div>
      <div class="slot" id="s3"></div>
      <div class="slot" id="s4"></div>
      <div class="slot" id="s5"></div>
      <div class="slot" id="s6"></div>

      <div class="tile" id="t1">
        <div class="tileShade"></div>
        <div class="tileFront">M</div>
      </div>
      <div class="tile" id="t2">
        <div class="tileShade"></div>
        <div class="tileFront">I</div>
      </div>
      <div class="tile" id="t3">
        <div class="tileShade"></div>
        <div class="tileFront">X</div>
      </div>
      <div class="tile" id="t4">
        <div class="tileShade"></div>
        <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div>
      <div class="tile" id="t5">
        <div class="tileShade"></div>
        <div class="tileFront">U</div>
      </div>
      <div class="tile" id="t6">
        <div class="tileShade"></div>
        <div class="tileFront">P</div>
      </div>
      </div>
    </div>
</body>

</html>
se eliminaron 14590 caracteres en el cuerpo
Origen Enlace
var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })
  //.set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileBg.png)' })
  //.set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileShade.png)', y: 2, scale: 1.1, opacity: 0.8 })

  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(images/fichasMio.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(images/fichas0.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
 html, body, #container {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  display:block; float:left;
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;

} 
div {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  position: absolute; 
} 

/* .cajon {
  display: grid;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
} */
 


/* html, body, div #container {
  width:100%;
  height:100%;
  display: grid;
  grid-auto-rows: 22rem ;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  color: rgb(82, 72, 72);
} */

/* Escritorio extra grande 
/* @media only screen and (min-width: 1200px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}
/ Escritorio grande 
@media only screen and (min-width: 992px) and (max-width: 1199px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

/Escritorio pequeño / tablet 
@media only screen and (min-width: 768px) and (max-width: 991px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

Tablets y phablets 
@media only screen and (min-width: 576px) and (max-width: 767px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

 Teléfonos 
@media only screen and (max-width: 575px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
 
} */

@media only screen and (max-width: 600px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {

  .tile {
    grid-template-columns: auto;
  }
}
<html>
<head>
  <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/encuentra.css">
  <title>Encuentra las Palbras</title>
</head>

<body>
 

  <div class="cajon" id="container" style="opacity:0">
   
      <form action="index.html">
        <button class="button secondary-button ">Menu</button>
      </form>
  <div id="container" style="opacity:0">

    <div class="app">

        <div class="timeTxt">30:00</div>
        <div class="timePlus">+3 sec</div>
        <div class="playBtn">
          <div class="playTxt">Play</div>
        </div>

        <div class="correctHead">Correct: <span class="correctN">0</span></div>
        <div class="correctList"></div>

        <div class="slot" id="s1"></div>
        <div class="slot" id="s2"></div>
        <div class="slot" id="s3"></div>
        <div class="slot" id="s4"></div>
        <div class="slot" id="s5"></div>
        <div class="slot" id="s6"></div>

        <div class="tile" id="t1">
          <div class="tileShade"></div>
          <div class="tileFront">M</div>
        </div>
        <div class="tile" id="t2">
          <div class="tileShade"></div>
          <div class="tileFront">I</div>
        </div>
        <div class="tile" id="t3">
          <div class="tileShade"></div>
          <div class="tileFront">X</div>
        </div>
        <div class="tile" id="t4">
          <div class="tileShade"></div>
           <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div> 
        </div>
        <div class="tile" id="t5">
          <div class="tileShade"></div>
          <div class="tileFront">U</div>
        </div>
        <div class="tile" id="t6">
          <div class="tileShade"></div>
          <div class="tileFront">P</div>
        </div>
      </div>
    </div>
  </div>>body>

</body>html>
var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })
  //.set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileBg.png)' })
  //.set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileShade.png)', y: 2, scale: 1.1, opacity: 0.8 })

  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(images/fichasMio.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(images/fichas0.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
 html, body, #container {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;

} 
div {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  position: absolute; 
} 

@media only screen and (max-width: 600px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {

  .tile {
    grid-template-columns: auto;
  }
}
 <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/encuentra.css">
  <title>Encuentra las Palbras</title>
</head>

<body>
 

  <div class="cajon" id="container" style="opacity:0">
   
      <form action="index.html">
        <button class="button secondary-button ">Menu</button>
      </form>
      <div class="app">

        <div class="timeTxt">30:00</div>
        <div class="timePlus">+3 sec</div>
        <div class="playBtn">
          <div class="playTxt">Play</div>
        </div>

        <div class="correctHead">Correct: <span class="correctN">0</span></div>
        <div class="correctList"></div>

        <div class="slot" id="s1"></div>
        <div class="slot" id="s2"></div>
        <div class="slot" id="s3"></div>
        <div class="slot" id="s4"></div>
        <div class="slot" id="s5"></div>
        <div class="slot" id="s6"></div>

        <div class="tile" id="t1">
          <div class="tileShade"></div>
          <div class="tileFront">M</div>
        </div>
        <div class="tile" id="t2">
          <div class="tileShade"></div>
          <div class="tileFront">I</div>
        </div>
        <div class="tile" id="t3">
          <div class="tileShade"></div>
          <div class="tileFront">X</div>
        </div>
        <div class="tile" id="t4">
          <div class="tileShade"></div>
           <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div> 
        </div>
        <div class="tile" id="t5">
          <div class="tileShade"></div>
          <div class="tileFront">U</div>
        </div>
        <div class="tile" id="t6">
          <div class="tileShade"></div>
          <div class="tileFront">P</div>
        </div>
      </div>
    
  </div>>

</body>
var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })
  //.set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileBg.png)' })
  //.set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileShade.png)', y: 2, scale: 1.1, opacity: 0.8 })

  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(images/fichasMio.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(images/fichas0.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
 html, body, #container {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  display:block; float:left;
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;

} 
div {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  position: absolute; 
} 

/* .cajon {
  display: grid;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
} */
 


/* html, body, div #container {
  width:100%;
  height:100%;
  display: grid;
  grid-auto-rows: 22rem ;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  color: rgb(82, 72, 72);
} */

/* Escritorio extra grande 
/* @media only screen and (min-width: 1200px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}
/ Escritorio grande 
@media only screen and (min-width: 992px) and (max-width: 1199px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

/Escritorio pequeño / tablet 
@media only screen and (min-width: 768px) and (max-width: 991px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

Tablets y phablets 
@media only screen and (min-width: 576px) and (max-width: 767px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
  div { position: absolute; } 
}

 Teléfonos 
@media only screen and (max-width: 575px){
  html, body, #container {
    width:100%;
    height:100%;
    background:#444;
    color:#fff;
    font-family: 'Signika Negative', sans-serif;
    overflow:hidden;
  } 
 
} */

@media only screen and (max-width: 600px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {

  .tile {
    grid-template-columns: auto;
  }
}
<html>
<head>
  <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/encuentra.css">
  <title>Encuentra las Palbras</title>
</head>

<body>

  <form action="index.html">
    <button class="button secondary-button ">Menu</button>
  </form>
  <div id="container" style="opacity:0">

    <div class="app">

      <div class="timeTxt">30:00</div>
      <div class="timePlus">+3 sec</div>
      <div class="playBtn">
        <div class="playTxt">Play</div>
      </div>

      <div class="correctHead">Correct: <span class="correctN">0</span></div>
      <div class="correctList"></div>

      <div class="slot" id="s1"></div>
      <div class="slot" id="s2"></div>
      <div class="slot" id="s3"></div>
      <div class="slot" id="s4"></div>
      <div class="slot" id="s5"></div>
      <div class="slot" id="s6"></div>

      <div class="tile" id="t1">
        <div class="tileShade"></div>
        <div class="tileFront">M</div>
      </div>
      <div class="tile" id="t2">
        <div class="tileShade"></div>
        <div class="tileFront">I</div>
      </div>
      <div class="tile" id="t3">
        <div class="tileShade"></div>
        <div class="tileFront">X</div>
      </div>
      <div class="tile" id="t4">
        <div class="tileShade"></div>
        <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div>
      <div class="tile" id="t5">
        <div class="tileShade"></div>
        <div class="tileFront">U</div>
      </div>
      <div class="tile" id="t6">
        <div class="tileShade"></div>
        <div class="tileFront">P</div>
      </div>
      </div>
    </div>
</body>

</html>
Aviso añadido Se requiere una respuesta canónica por juan José
Recompensa iniciada por un valor de 50 de reputación por juan José
He cambiado código
Origen Enlace

He buscado documentaciónEDITO LA PREGUNTA: Como bien me sugirió el usuario @PabloLozano , perohice pruebas con CSS @media query, incluso he seguido dos cursos de CSS. Pero por más que lo intento, no se me ocurreconsigo corregir el error y que la formapagina se adapte al dispositivo móvil, tampoco tengo mucha experiencialo más probable es que no este haciendo las cosas mal pero he probado con cssmedia query, con Grid y sigue sin funcionar.

 display: grid;
  grid-template-columns: auto auto auto;

Tambien he usado lo siguiente:

.cajon {
  display: grid;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

Sin embargo el bloque de letras sigue saliendo de la pantalla en dispositivos, como se ve en el código. ¿ Que estoy haciendo mal ?

var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })
  //.set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileBg.png)' })
  //.set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileShade.png)', y: 2, scale: 1.1, opacity: 0.8 })

  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(images/fichasMio.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(images/fichas0.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
 html, body, #container {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;
}
} 
div {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  position: absolute; 
} 

@media only screen and (max-width: 600px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {

  .tile {
    grid-template-columns: auto;
  }
}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTFname="format-8">detection" content="telephone=no">
  <meta http-equiv="Xname="msapplication-UAtap-Compatible"highlight" content="IE=edge">content="no">
  <meta name="viewport" content="width=devicecontent="initial-scale=1, width=device-width, initialviewport-scale=1.0">fit=cover">
  <meta name="color-scheme" content="light dark">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/indexencuentra.css">
  <title>Document<<title>Encuentra las Palbras</title>
</head> 

<body> 


  <div class="cajon" id="container" style="opacity:0">
   
      <form action="index.html">
        <button class="button secondary-button ">Menu</button>
      </form>
      <div class="app">

        <div class="timeTxt">30:00</div>
        <div class="timePlus">+3 sec</div>
        <div class="playBtn">
          <div class="playTxt">Play</div>
        </div>

        <div class="correctHead">Correct: <span class="correctN">0</span></div>
        <div class="correctList"></div>

        <div class="slot" id="s1"></div>
        <div class="slot" id="s2"></div>
        <div class="slot" id="s3"></div>
        <div class="slot" id="s4"></div>
        <div class="slot" id="s5"></div>
        <div class="slot" id="s6"></div>

        <div class="tile" id="t1">
          <div class="tileShade"></div>
          <div class="tileFront">M</div>
        </div>
        <div class="tile" id="t2">
          <div class="tileShade"></div>
          <div class="tileFront">I</div>
        </div>
        <div class="tile" id="t3">
          <div class="tileShade"></div>
          <div class="tileFront">X</div>
        </div>
        <div class="tile" id="t4">
          <div class="tileShade"></div>
           <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div> 
        </div>
        <div class="tile" id="t5">
          <div class="tileShade"></div>
          <div class="tileFront">U</div>
        </div>
        <div class="tile" id="t6">
          <div class="tileShade"></div>
          <div class="tileFront">P</div>
        </div>
      </div>
 
    <script type="text/javascript" src="js/index.js"></script>

  
 </body>div>>

</html>body>

He buscado documentación, pero no se me ocurre la forma, tampoco tengo mucha experiencia con css.

var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })
  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileBg.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileShade.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
html, body, #container {
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;
}

div { position: absolute; }
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/index.css">
  <title>Document</title>
</head>
<body>
  <div id="container" style="opacity:0">

    <div class="app">

      <div class="timeTxt">30:00</div>
      <div class="timePlus">+3 sec</div>
      <div class="playBtn">
        <div class="playTxt">Play</div>
      </div>

      <div class="correctHead">Correct: <span class="correctN">0</span></div>
      <div class="correctList"></div>

      <div class="slot" id="s1"></div>
      <div class="slot" id="s2"></div>
      <div class="slot" id="s3"></div>
      <div class="slot" id="s4"></div>
      <div class="slot" id="s5"></div>
      <div class="slot" id="s6"></div>

      <div class="tile" id="t1">
        <div class="tileShade"></div>
        <div class="tileFront">M</div>
      </div>
      <div class="tile" id="t2">
        <div class="tileShade"></div>
        <div class="tileFront">I</div>
      </div>
      <div class="tile" id="t3">
        <div class="tileShade"></div>
        <div class="tileFront">X</div>
      </div>
      <div class="tile" id="t4">
        <div class="tileShade"></div>
        <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div>
      </div>
      <div class="tile" id="t5">
        <div class="tileShade"></div>
        <div class="tileFront">U</div>
      </div>
      <div class="tile" id="t6">
        <div class="tileShade"></div>
        <div class="tileFront">P</div>
      </div>
    </div>
 
    <script type="text/javascript" src="js/index.js"></script>

  
 </body>
</html>

EDITO LA PREGUNTA: Como bien me sugirió el usuario @PabloLozano , hice pruebas con CSS @media query, incluso he seguido dos cursos de CSS. Pero por más que lo intento, no consigo corregir el error y que la pagina se adapte al dispositivo móvil, lo más probable es que no este haciendo las cosas mal pero he probado con media query, con Grid y sigue sin funcionar.

 display: grid;
  grid-template-columns: auto auto auto;

Tambien he usado lo siguiente:

.cajon {
  display: grid;
  grid-auto-rows: 22rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

Sin embargo el bloque de letras sigue saliendo de la pantalla en dispositivos, como se ve en el código. ¿ Que estoy haciendo mal ?

var wordArr, mixedArr, // arrays that hold the original and jumbled letters
  timeLimit = 30 * 1000, // in millisec
  timeLeft,
  timeInt,
  currentTile, // updated when you pickup a tile
  emptySlot; // holds the X position of the empty slot


gsap.timeline() // set initial states
  .set('.app', { width: 900, height: '100%', background: '#333', left: '50%', x: '-50%', userSelect: 'none' })
  .set('.slot', { width: 112, height: 112, borderRadius: 20, background: 'rgba(60,250,60,0.8)', top: 50, left: 100, x: (i) => i * 118 })
  .set('.tile', { width: 100, height: 100, top: 56, left: 106, x: (i) => i * 118, color: 'rgba(20,10,10,0.8)', fontSize: 87, lineHeight: '104px', textAlign: 'center' })
  //.set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileBg.png)' })
  //.set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(https://assets.codepen.io/721952/tileShade.png)', y: 2, scale: 1.1, opacity: 0.8 })

  .set('.tileFront', { pointerEvents: 'none', width: 100, height: 100, borderRadius: 17, overflow: 'hidden', backgroundSize: 'cover', backgroundImage: 'url(images/fichasMio.png)' })
  .set('.tileShade', { pointerEvents: 'none', width: 100, height: 100, backgroundSize: 'cover', backgroundImage: 'url(images/fichas0.png)', y: 2, scale: 1.1, opacity: 0.8 })
  .set('.timeTxt', { left: 715, top: 200, fontSize: 34, opacity: 0 })
  .set('.timePlus', { left: 715, top: 240, fontSize: 24, opacity: 0 })
  .set('.playBtn', { left: 650, top: 200, fontSize: 32, lineHeight: '50px', backgroundColor: 'rgba(255,255,255,1)', color: '#565656', borderRadius: 9, width: 150, height: 50, textAlign: 'center', cursor: 'pointer', overflow: 'hidden' })
  .set('.playTxt', { width: '100%', userSelect: 'none' })
  .set('.correctHead', { left: 100, top: 200, fontSize: 34, opacity: 0 })
  .set('.correctList', { left: 100, top: 240, fontSize: 24, opacity: 0.6 })
  .set('#container', { opacity: 1 })


Draggable.create('.tile', { onPress: (t) => { pickup(t) }, onDrag: drag, onRelease: drop }); // make tiles draggable


$('.playBtn').on('click', () => { // event handlers for 'play' button (which becomes 'replay') 
  gsap.timeline({ defaults: { duration: 0.2 }, onComplete: deal })
    .to('.playBtn', { autoAlpha: 0 }, 0)
    .to('.correctHead, .timeTxt', { opacity: 1 })
})

$('.playBtn').on('mouseenter', () => {
  if (gsap.isTweening('.playTxt')) return;
  gsap.timeline({ defaults: { duration: 0.25 } })
    .to('.playTxt', { opacity: 0, y: -30, ease: 'back.in(4)' })
    .to('.playTxt', { duration: 0.001, y: 35 })
    .to('.playTxt', { opacity: 1, y: 0, ease: 'back.out' })
})


function deal() {
  wordArr = words.splice(gsap.utils.random(0, words.length - 1, 1), 1).toString().toUpperCase().split('') // pull a random word, convert to upper case, then separate chars into an array
  mixedArr = gsap.utils.shuffle(gsap.utils.shuffle(gsap.utils.shuffle([...wordArr]))) // create a second array and triple shuffle its contents

  gsap.timeline()
    .set('.tileFront', { innerHTML: (i) => mixedArr[i], userSelect: 'none' })
    .fromTo('.tile', { x: (i) => i * 118, opacity: 0 }, { duration: 0.1, opacity: 1, stagger: 0.06, ease: 'power1.inOut' }, 0)
    .fromTo('.tile', { y: 50, rotation: 0.05 }, { duration: 0.3, y: 0, rotation: 0, stagger: 0.06, ease: 'power4.out' }, 0)
    .to('.slot', { duration: 0.1, background: 'rgba(0,0,0,0.5)' }, 0)
    .call(function () {
      for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).enable(); //enable tile dragging (disabled on correct answer + time-out)
      checkAnswer(); //check to see if any tiles are already in the correct slot
    }, null, 0.4);



  if (timeInt == undefined) { //start timer
    timeLeft = timeLimit;
    timeInt = setInterval(updateTime, 10);

    // clear correct answers (needed for replay)        
    $('.correctN').html(0);
    $('.correctList').html('');
  }
}


function pickup(t) { // on press, set vars and animate tile lifting up
  currentTile = t.target;
  emptySlot = gsap.getProperty(currentTile, 'x');
  gsap.timeline({ defaults: { duration: 0.2, overwrite: true, ease: 'power3.out' } })
    .to($(currentTile).children('.tileFront')[0], { scale: 1.1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 30, opacity: 0.4, scale: 1 }, 0)
}


function drag() {
  for (var i = 1; i <= 6; i++) { // loop through all 6 tiles...
    if (currentTile.id.substr(-1) != String(i)) { // and only hit-test against the other tiles
      var t = '#t' + i;
      if (!gsap.isTweening(t)) { // also, only hit-test when tile is stationary
        if (Draggable.hitTest(currentTile, t, 30)) { // if at least 30px are overlapping...
          gsap.timeline()
            .to(t, { duration: 0.1, y: () => gsap.getProperty(currentTile, 'y') < 0 ? 66 : -66, ease: 'slow(0.7,0.7)', repeat: 1, yoyo: true, zIndex: 100 }, 0)
            .to(t, { duration: 0.2, x: emptySlot, ease: 'power2.inOut' }, 0); // move tile to empty slot,

          emptySlot = gsap.getProperty(t, 'x'); // then update emptySlot
        }
      }
    }
  }
}


function drop() { // on release, put current tile in the empty slot
  gsap.timeline({ defaults: { duration: 0.1, overwrite: true, ease: 'power1.in' }, onComplete: () => { if (timeInt != undefined) checkAnswer() } })
    .to(currentTile, { x: emptySlot, y: 0 }, 0)
    .to($(currentTile).children('.tileFront')[0], { scale: 1 }, 0)
    .to($(currentTile).children('.tileShade')[0], { y: 2, opacity: 0.8, scale: 1.1 }, 0)
}


function checkAnswer() {
  var arr = new Array(600); // make an array with enough space to place each char at an index based on each tile's X position
  for (var i = 1; i <= 6; i++) arr.splice(gsap.getProperty('#t' + i, 'x'), 1, $('#t' + i).children('.tileFront').html()); // then populate that array

  for (var j = 0; j < 6; j++) { // turn correct slots green
    if (wordArr.join('').charAt(j) == arr.join('').charAt(j)) gsap.to('#s' + (j + 1), { duration: 0.33, ease: 'bounce.out', background: 'rgba(60,250,60,0.8)' });
    else gsap.to('#s' + (j + 1), { duration: 0.3, background: 'rgba(0,0,0,0.5)' });
  }

  if (wordArr.join('') == arr.join('')) { // compare original word and current answer by converting arrays to strings
    currentTile = emptySlot = undefined
    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    var n = Number($('.correctN').html());
    $('.correctN').html(n += 1); // add to correct number tally
    $('.correctList').append(arr.join('') + '<br>'); // add to list of correct words

    timeLeft += 3000; // 3-sec bonus

    gsap.timeline({ onComplete: deal }) // success animation, then deal() new letter tiles
      .to('.timePlus', { duration: 0.1, opacity: 1, yoyo: true, repeat: 1, repeatDelay: 0.4 }, 0)
      .fromTo('.timePlus', { scale: 0, rotation: 0.1 }, { duration: 0.3, scale: 1, rotation: 0, ease: 'back.out(3)' }, 0)
      .to('.slot', { duration: 0.2, background: 'rgba(0,0,0,0.5)', overwrite: true }, 0)
      .to('.tile', { duration: 0.35, scale: 1.16, ease: 'back.inOut(7)' }, 0.1)
      .to('.tile', { duration: 0.2, opacity: 0, scale: 1, ease: 'power1.inOut' }, 0.8)
  }
}


function updateTime() {
  if (timeLeft > 0) {
    timeLeft -= 10;
    var mil = Math.floor(timeLeft % 1000 / 10);
    var sec = Math.floor(timeLeft / 1000);
    if (mil < 10) mil = "0" + mil;
    if (sec < 10) sec = "0" + sec;
    var t = sec + ":" + mil;
    gsap.set('.timeTxt', { innerHTML: t });
  }

  else { // Game over
    clearInterval(timeInt);
    timeInt = currentTile = emptySlot = undefined;

    for (var i = 1; i <= 6; i++) Draggable.get('#t' + i).disable(); // disable all tiles

    gsap.timeline({ defaults: { duration: 0.001, overwrite: true } })
      // auto-solve the last word
      .to('.slot', { duration: 0.2, ease: 'power1.inOut', background: 'rgba(60,250,60,0.8)' }, 0)
      .to('.tile', { scale: 1, y: 0, x: (i) => i * 118 }, 0.1)
      .to('.tileFront', { scale: 1, innerHTML: (i) => wordArr[i], userSelect: 'none' }, 0.1)
      .to('.tileShade', { y: 2, opacity: 0.8, scale: 1.1 }, 0.1)
      // hide timer + display replay button
      .to('.timeTxt', { duration: 0.3, opacity: 0 }, 0)
      .to('.playTxt', { duration: 0.3, innerHTML: 'Replay', userSelect: 'none' }, 0)
      .to('.playBtn', { duration: 0.3, autoAlpha: 1, ease: 'power1.inOut' }, 0.3)
  }
}
 html, body, #container {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  width:100%;
  height:100%;
  background:#444;
  color:#fff;
  font-family: 'Signika Negative', sans-serif;
  overflow:hidden;

} 
div {
  /* display: grid;
  grid-template-columns: auto auto auto; */
  position: absolute; 
} 

@media only screen and (max-width: 600px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {
  .app .slot {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 300px) {

  .tile {
    grid-template-columns: auto;
  }
}
 <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <meta name="color-scheme" content="light dark">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/Draggable.min.js"></script>
  <script src="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&amp;display=swap"></script>
  <link rel="stylesheet" href="css/encuentra.css">
  <title>Encuentra las Palbras</title>
</head> 

<body> 


  <div class="cajon" id="container" style="opacity:0">
   
      <form action="index.html">
        <button class="button secondary-button ">Menu</button>
      </form>
      <div class="app">

        <div class="timeTxt">30:00</div>
        <div class="timePlus">+3 sec</div>
        <div class="playBtn">
          <div class="playTxt">Play</div>
        </div>

        <div class="correctHead">Correct: <span class="correctN">0</span></div>
        <div class="correctList"></div>

        <div class="slot" id="s1"></div>
        <div class="slot" id="s2"></div>
        <div class="slot" id="s3"></div>
        <div class="slot" id="s4"></div>
        <div class="slot" id="s5"></div>
        <div class="slot" id="s6"></div>

        <div class="tile" id="t1">
          <div class="tileShade"></div>
          <div class="tileFront">M</div>
        </div>
        <div class="tile" id="t2">
          <div class="tileShade"></div>
          <div class="tileFront">I</div>
        </div>
        <div class="tile" id="t3">
          <div class="tileShade"></div>
          <div class="tileFront">X</div>
        </div>
        <div class="tile" id="t4">
          <div class="tileShade"></div>
           <div class="tileFront"><img width="100" height="100"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJFBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmfSdFAAAADHRSTlPMAMCvnBx0M2BLC4rujjL5AAAErklEQVR4Ae3ahY/jRhQG8Cfb8l0U0VPioMDFJcFiSVCmVOQtVxSXW1Fd5ub4xHtMIpeZuX9c0er6azzezOzMlOYJD3/rz/DGnkdsoRziEIc45B+KOMQhDnGIQxziEIc45L3cAtJesYH4iQWEFmwglNpAAhsIbdhA6JgNJLSB0MgG4icWEFqwgVBqAwlmQQZ33/3O3e888GEuRXz4zttU1MYMSPviotbWfshmesafvnFt9eKLYyrKO7Yz0qLt8n/Y2bgQE2GFcgjR5Uk9MXiQpusLSYSCWiX6kirKT+SQeiX6nCprThahMBci+0lQ+2QRccd7mkTVlEbox2rjIxLXSBrxsiqjG9cg/j5JRNAmxlRT84kEIr7y3xYLeOz1SO2VHy3XIRusgNCc6MoSX1wSiOD4+1RXqSQiOJRJnbHAiggeSq/O8BNVBA9lqw65nndEeo/+UT99vYyHkgjvQ/+Obx999ADeVGIEq4u94hr+szax5/ye5JCKOiaF8KD0lIUVwnVUqqtwIXElyyGMfe+LytM+z4AEuSzCUfln3stFPQU9DZGUpRH8obPi+JahPQGywAoI30nbtchcOsXFGQDEz1QQOMnNqZskyBEZsRoy/Gs2UVy+FgAJWQnB5nTZdvjFfQeId0wZ6UBe8GxMEdlgZYS3F1d+Do+UkAEJeBdIG46kJWjKbUp3g/By+ZyMS8cFSINVEWy1+6AlXoan7pgqgr3WZ+a3RGvRASsjcBXvgasg0PVRDbtlimlpQrAT+tiujmlGeDKdVpN1I+0irR52Y71IFE+llelCIK85eO6HrAuBvPZBWisGkCgOsLlnBhCeLDLzMqalHRkeg85yvRGEIS0vMYYswxLMCAJpmUIgLVPIANIyhAyhuRtCtvB9TT+CaTXYEAJpGUIgrdwUEsWQlhmkDWl19xlBJpBWa49uBNIq1hO+dgTSKlZfX+hGIK1iPdHQj3QJ08JnpCakBWn18I7UhYwxLXwSa0L6kNYfqy8v14zgS0kPu6MuBF9KNrFz6UHgpaS0Vs20IpuYVvW6vp+znrdfgrVqoHOyoFOdFtEXGicLJpBWJPwisaCK4Glv4qVGqbbJgi34qgaXQYhIkCsi8IHwGP7G1PeuK1WRMaaF3/L8BBDvmBryNuErHOZFe3VMFsAH86xiW2NDw2TBuGpnC7YwfwTEz+SRZwjSqtqY8J4sI9SQRu6q3naIYvj9b3Y1WfAKlash3D65LZGdLIju/qNeeOkrgton3gi65IkX7n4bP1HVI62LPS+OPeGGpmBLS3WyACudeU8rVEaaErtzP6oiqcQ+o5+oIaHUjumcGjJ1MgfX1Sn7VJA5YVPWMFmAG1cSgY3kkVS85NMzWSBueN1lMbI3kUSaws4ca5ssCDIW1bsiZcRyiLhvixXZyQJvH9fV+8ui20QC8esN5u6X1XeVBLKU8U41uBDvarJg/Yd8plG1h1cB+WKWyYKjv9a5c+deeA6IuopeOnv0hPxkgXwN4Wo0PKK4weaRILeApGweabB5xE8sINezeSRk84h3zAKyweaRJltAUgtIg80jncwC0s3NI1gOcYhDHOIQhzjEIQ5xiEMc4hDj9Qv4E/e/tIWihwAAAABJRU5ErkJggg==">
        </div> 
        </div>
        <div class="tile" id="t5">
          <div class="tileShade"></div>
          <div class="tileFront">U</div>
        </div>
        <div class="tile" id="t6">
          <div class="tileShade"></div>
          <div class="tileFront">P</div>
        </div>
      </div>
    
  </div>>

</body>
Origen Enlace
Loading