De la siguiente manera:
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:grid;
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&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>