Pirate Treasure Island Game<\/title>\r\n\r\n<style>\r\n:root{\r\n --sand:#f6dfaa;\r\n --blue:#56c7ff;\r\n --green:#58c878;\r\n --red:#ff5f6d;\r\n --gold:#ffcf3f;\r\n --ink:#17324d;\r\n}\r\n\r\n*{box-sizing:border-box}\r\n\r\nhtml,body{\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n overflow:hidden;\r\n font-family:Arial, sans-serif;\r\n background:#69cfff;\r\n}\r\n\r\n.game{\r\n width:100vw;\r\n height:100vh;\r\n overflow:hidden;\r\n display:grid;\r\n grid-template-rows:80px 1fr 120px;\r\n padding:12px;\r\n gap:10px;\r\n background:\r\n radial-gradient(circle at 20% 30%, #6edb8f 0 10%, transparent 11%),\r\n radial-gradient(circle at 75% 65%, #67d486 0 12%, transparent 13%),\r\n linear-gradient(#7edcff,#5fc8ff);\r\n}\r\n\r\n\/* TOP BAR *\/\r\n.top{\r\n display:grid;\r\n grid-template-columns:1fr 1fr 1fr;\r\n gap:10px;\r\n}\r\n\r\n.box{\r\n background:rgba(255,255,255,.9);\r\n border:4px solid #fff1bf;\r\n border-radius:24px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-weight:900;\r\n font-size:24px;\r\n color:var(--ink);\r\n box-shadow:0 8px 18px rgba(0,0,0,.15);\r\n}\r\n\r\n#coins{\r\n color:#9a6a00;\r\n}\r\n\r\n\/* MAP *\/\r\n.map{\r\n position:relative;\r\n overflow:hidden;\r\n border-radius:34px;\r\n border:6px solid #fff1bf;\r\n background:\r\n radial-gradient(circle at 20% 25%, #7edc9a 0 12%, transparent 13%),\r\n radial-gradient(circle at 75% 30%, #6fd48f 0 10%, transparent 11%),\r\n radial-gradient(circle at 60% 75%, #8be4a4 0 11%, transparent 12%),\r\n linear-gradient(145deg,#f7e8bc,#efd28f);\r\n box-shadow:0 10px 25px rgba(0,0,0,.18);\r\n}\r\n\r\n\/* dotted pirate path *\/\r\n.map:before{\r\n content:\"\";\r\n position:absolute;\r\n inset:15%;\r\n border:8px dashed rgba(130,82,35,.35);\r\n border-radius:50%;\r\n transform:rotate(-12deg);\r\n}\r\n\r\n.xmark{\r\n position:absolute;\r\n right:8%;\r\n top:10%;\r\n font-size:54px;\r\n font-weight:900;\r\n color:#b4382c;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n transform:rotate(-18deg);\r\n}\r\n\r\n\/* ITEMS *\/\r\n.grid{\r\n position:absolute;\r\n inset:20px 20px 110px 20px;\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n grid-template-rows:repeat(2,1fr);\r\n gap:14px;\r\n z-index:2;\r\n}\r\n\r\n.item{\r\n border:none;\r\n border-radius:28px;\r\n background:rgba(255,255,255,.85);\r\n border:4px solid white;\r\n box-shadow:0 8px 0 rgba(0,0,0,.08), 0 12px 22px rgba(0,0,0,.12);\r\n cursor:pointer;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n gap:8px;\r\n transition:.15s;\r\n user-select:none;\r\n}\r\n\r\n.item:active{\r\n transform:scale(.94);\r\n}\r\n\r\n.emoji{\r\n font-size:clamp(46px,6vw,74px);\r\n}\r\n\r\n.label{\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-size:clamp(22px,2.3vw,34px);\r\n font-weight:900;\r\n color:var(--ink);\r\n}\r\n\r\n.item.correct{\r\n background:#ffe98a;\r\n animation:correct .6s ease;\r\n}\r\n\r\n.item.wrong{\r\n background:#ffd4d8;\r\n animation:wrong .4s ease;\r\n}\r\n\r\n@keyframes correct{\r\n 0%{transform:scale(1)}\r\n 40%{transform:scale(1.1)}\r\n 100%{transform:scale(1)}\r\n}\r\n\r\n@keyframes wrong{\r\n 0%,100%{transform:translateX(0)}\r\n 25%{transform:translateX(-8px)}\r\n 50%{transform:translateX(8px)}\r\n 75%{transform:translateX(-5px)}\r\n}\r\n\r\n\/* BOTTOM *\/\r\n.bottom{\r\n display:grid;\r\n grid-template-columns:190px 1fr 130px;\r\n gap:10px;\r\n align-items:end;\r\n position:relative;\r\n}\r\n\r\n.mascot-wrap{\r\n position:relative;\r\n height:120px;\r\n}\r\n\r\n.mascot{\r\n width:170px;\r\n max-height:120px;\r\n object-fit:contain;\r\n filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));\r\n transform-origin:center bottom;\r\n}\r\n\r\n\/* MASCOT ANIMATIONS *\/\r\n.mascot.happy{\r\n animation:mascotHappy .75s ease;\r\n}\r\n\r\n.mascot.sad{\r\n animation:mascotSad .55s ease;\r\n}\r\n\r\n@keyframes mascotHappy{\r\n 0%{transform:scale(1) rotate(0)}\r\n 25%{transform:scale(1.12) rotate(-6deg)}\r\n 50%{transform:scale(1.08) rotate(6deg)}\r\n 75%{transform:scale(1.12) rotate(-4deg)}\r\n 100%{transform:scale(1) rotate(0)}\r\n}\r\n\r\n@keyframes mascotSad{\r\n 0%{transform:translateX(0)}\r\n 20%{transform:translateX(-8px) rotate(-3deg)}\r\n 40%{transform:translateX(8px) rotate(3deg)}\r\n 60%{transform:translateX(-5px) rotate(-2deg)}\r\n 80%{transform:translateX(5px) rotate(2deg)}\r\n 100%{transform:translateX(0)}\r\n}\r\n\r\n.speech{\r\n position:absolute;\r\n left:130px;\r\n bottom:55px;\r\n min-width:220px;\r\n background:white;\r\n border:4px solid #fff1bf;\r\n border-radius:26px;\r\n padding:12px 16px;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-size:clamp(20px,2vw,30px);\r\n font-weight:900;\r\n color:var(--ink);\r\n box-shadow:0 8px 20px rgba(0,0,0,.15);\r\n}\r\n\r\n.speech:after{\r\n content:\"\";\r\n position:absolute;\r\n left:-14px;\r\n bottom:18px;\r\n border-width:12px 14px 12px 0;\r\n border-style:solid;\r\n border-color:transparent white transparent transparent;\r\n}\r\n\r\n\/* TREASURE CHEST *\/\r\n.chest{\r\n width:108px;\r\n height:90px;\r\n position:relative;\r\n}\r\n\r\n.chest-base{\r\n position:absolute;\r\n bottom:0;\r\n width:100%;\r\n height:56px;\r\n background:linear-gradient(#c07439,#90511f);\r\n border:4px solid #6f3e19;\r\n border-radius:10px 10px 16px 16px;\r\n}\r\n\r\n.chest-lid{\r\n position:absolute;\r\n top:4px;\r\n width:100%;\r\n height:38px;\r\n background:linear-gradient(#d48547,#9c5a24);\r\n border:4px solid #6f3e19;\r\n border-radius:18px 18px 8px 8px;\r\n transform-origin:left bottom;\r\n transition:.4s ease;\r\n}\r\n\r\n.chest.open .chest-lid{\r\n transform:rotate(-42deg) translateY(-4px);\r\n}\r\n\r\n.lock{\r\n position:absolute;\r\n width:22px;\r\n height:22px;\r\n background:var(--gold);\r\n border:3px solid #b98b1f;\r\n border-radius:6px;\r\n left:43px;\r\n bottom:15px;\r\n}\r\n\r\n.burst{\r\n position:absolute;\r\n inset:-25px;\r\n pointer-events:none;\r\n}\r\n\r\n.burst span{\r\n position:absolute;\r\n opacity:0;\r\n font-size:24px;\r\n}\r\n\r\n.chest.open .burst span{\r\n animation:burst .7s ease forwards;\r\n}\r\n\r\n@keyframes burst{\r\n 0%{opacity:0; transform:translateY(20px) scale(.4)}\r\n 20%{opacity:1}\r\n 100%{opacity:0; transform:translateY(-40px) scale(1.3)}\r\n}\r\n\r\n\/* START \/ END OVERLAY *\/\r\n.overlay{\r\n position:fixed;\r\n inset:0;\r\n background:rgba(20,50,80,.45);\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n z-index:50;\r\n}\r\n\r\n.overlay.show{\r\n display:flex;\r\n}\r\n\r\n.card{\r\n width:min(700px,90vw);\r\n background:white;\r\n border:6px solid #fff1bf;\r\n border-radius:34px;\r\n padding:28px;\r\n text-align:center;\r\n box-shadow:0 20px 40px rgba(0,0,0,.25);\r\n}\r\n\r\n.card h1{\r\n margin:0 0 10px;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-size:44px;\r\n color:var(--ink);\r\n}\r\n\r\n.card p{\r\n font-size:24px;\r\n font-weight:bold;\r\n color:#33597b;\r\n}\r\n\r\n.btn{\r\n border:none;\r\n border-radius:999px;\r\n padding:16px 34px;\r\n background:#4d7dff;\r\n color:white;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-size:28px;\r\n font-weight:900;\r\n cursor:pointer;\r\n box-shadow:0 8px 0 rgba(0,0,0,.12);\r\n}\r\n\r\n.btn:active{\r\n transform:translateY(3px);\r\n}\r\n\r\n.flying-coin{\r\n position:fixed;\r\n z-index:100;\r\n width:34px;\r\n height:34px;\r\n border-radius:50%;\r\n background:gold;\r\n display:grid;\r\n place-items:center;\r\n pointer-events:none;\r\n font-size:18px;\r\n}\r\n\r\n\/* SMALL SCREENS *\/\r\n@media(max-width:700px){\r\n .game{\r\n grid-template-rows:120px 1fr 120px;\r\n }\r\n\r\n .top{\r\n grid-template-columns:1fr 1fr;\r\n }\r\n\r\n .box:nth-child(3){\r\n grid-column:1\/-1;\r\n }\r\n\r\n .grid{\r\n grid-template-columns:repeat(2,1fr);\r\n grid-template-rows:repeat(3,1fr);\r\n inset:12px 12px 115px 12px;\r\n }\r\n\r\n .bottom{\r\n grid-template-columns:120px 1fr 90px;\r\n }\r\n\r\n .mascot{\r\n width:120px;\r\n }\r\n\r\n .speech{\r\n left:80px;\r\n bottom:60px;\r\n min-width:180px;\r\n font-size:18px;\r\n }\r\n\r\n .chest{\r\n transform:scale(.8);\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"game\">\r\n\r\n <div class=\"top\">\r\n <div class=\"box\" id=\"coins\">\u2b50 0 Coins<\/div>\r\n <div class=\"box\" id=\"progress\">Round 1 \/ 6<\/div>\r\n <div class=\"box\" id=\"message\">Click Play<\/div>\r\n <\/div>\r\n\r\n <div class=\"map\">\r\n <div class=\"xmark\">X<\/div>\r\n <div class=\"grid\" id=\"grid\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"bottom\">\r\n <div class=\"mascot-wrap\">\r\n <img decoding=\"async\"\r\n id=\"mascot\"\r\n class=\"mascot\"\r\n src=\"https:\/\/newgrasp.com\/wp-content\/uploads\/2026\/04\/Pirate.png\"\r\n alt=\"Pirate mascot\"\r\n \/>\r\n <div class=\"speech\" id=\"speech\">Ahoy! Let\u2019s play!<\/div>\r\n <\/div>\r\n\r\n <div><\/div>\r\n\r\n <div class=\"chest\" id=\"chest\">\r\n <div class=\"chest-lid\"><\/div>\r\n <div class=\"chest-base\"><\/div>\r\n <div class=\"lock\"><\/div>\r\n <div class=\"burst\">\r\n <span style=\"left:10%;top:25%;animation-delay:.05s\">\u2728<\/span>\r\n <span style=\"left:35%;top:5%;animation-delay:.12s\">\u2b50<\/span>\r\n <span style=\"left:58%;top:10%;animation-delay:.18s\">\ud83e\ude99<\/span>\r\n <span style=\"left:80%;top:25%;animation-delay:.25s\">\u2728<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"overlay show\" id=\"startOverlay\">\r\n <div class=\"card\">\r\n <h1>Pirate Treasure Island<\/h1>\r\n <p>What Do You Ride?<\/p>\r\n <button class=\"btn\" onclick=\"startGame()\">Play<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"overlay\" id=\"endOverlay\">\r\n <div class=\"card\">\r\n <h1>Treasure Found!<\/h1>\r\n <p id=\"finalScore\">You collected 0 coins!<\/p>\r\n <button class=\"btn\" onclick=\"startGame()\">Play Again<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst WORDS = [\r\n {id:\"car\", label:\"car\", emoji:\"\ud83d\ude97\"},\r\n {id:\"bus\", label:\"bus\", emoji:\"\ud83d\ude8c\"},\r\n {id:\"bike\", label:\"bike\", emoji:\"\ud83d\udeb2\"},\r\n {id:\"train\", label:\"train\", emoji:\"\ud83d\ude86\"},\r\n {id:\"plane\", label:\"plane\", emoji:\"\u2708\ufe0f\"},\r\n {id:\"balloon\", label:\"balloon\", emoji:\"\ud83c\udf88\"}\r\n];\r\n\r\nconst ROUNDS = [\r\n {target:\"car\", prompt:\"Find the car!\"},\r\n {target:\"bus\", prompt:\"Find the bus!\"},\r\n {target:\"bike\", prompt:\"Find the bike!\"},\r\n {target:\"train\", prompt:\"Find the train!\"},\r\n {target:\"plane\", prompt:\"Find the plane!\"},\r\n {target:\"balloon\", prompt:\"Find the balloon!\"}\r\n];\r\n\r\nlet roundIndex = 0;\r\nlet coins = 0;\r\nlet locked = false;\r\n\r\n\/* SOUND *\/\r\nlet audioCtx;\r\n\r\nfunction ctx(){\r\n if(!audioCtx){\r\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n }\r\n return audioCtx;\r\n}\r\n\r\nfunction tone(freq,duration,type=\"sine\",gainValue=.04,delay=0){\r\n const c = ctx();\r\n const osc = c.createOscillator();\r\n const gain = c.createGain();\r\n\r\n osc.type = type;\r\n osc.frequency.value = freq;\r\n\r\n gain.gain.setValueAtTime(.0001, c.currentTime + delay);\r\n gain.gain.exponentialRampToValueAtTime(gainValue, c.currentTime + delay + .01);\r\n gain.gain.exponentialRampToValueAtTime(.0001, c.currentTime + delay + duration);\r\n\r\n osc.connect(gain);\r\n gain.connect(c.destination);\r\n\r\n osc.start(c.currentTime + delay);\r\n osc.stop(c.currentTime + delay + duration + .03);\r\n}\r\n\r\nfunction popSound(){\r\n tone(520,.06,\"triangle\",.04);\r\n tone(720,.05,\"triangle\",.03,.04);\r\n}\r\n\r\nfunction correctSound(){\r\n tone(660,.1,\"sine\",.05);\r\n tone(880,.12,\"sine\",.05,.08);\r\n tone(1200,.14,\"triangle\",.04,.16);\r\n}\r\n\r\nfunction wrongSound(){\r\n tone(240,.12,\"sawtooth\",.025);\r\n tone(190,.14,\"sawtooth\",.02,.08);\r\n}\r\n\r\nfunction tadaSound(){\r\n tone(620,.1,\"triangle\",.05);\r\n tone(840,.12,\"triangle\",.05,.08);\r\n tone(1200,.18,\"triangle\",.05,.18);\r\n}\r\n\r\n\/* GAME *\/\r\nfunction startGame(){\r\n document.getElementById(\"startOverlay\").classList.remove(\"show\");\r\n document.getElementById(\"endOverlay\").classList.remove(\"show\");\r\n\r\n roundIndex = 0;\r\n coins = 0;\r\n locked = false;\r\n\r\n updateCoins();\r\n renderRound();\r\n}\r\n\r\nfunction renderRound(){\r\n locked = false;\r\n\r\n if(roundIndex >= ROUNDS.length){\r\n endGame();\r\n return;\r\n }\r\n\r\n const round = ROUNDS[roundIndex];\r\n\r\n setMessage(round.prompt);\r\n setSpeech(round.prompt);\r\n updateProgress();\r\n\r\n const grid = document.getElementById(\"grid\");\r\n grid.innerHTML = \"\";\r\n\r\n shuffle([...WORDS]).forEach(word=>{\r\n const btn = document.createElement(\"button\");\r\n btn.className = \"item\";\r\n btn.innerHTML = `\r\n <div class=\"emoji\">${word.emoji}<\/div>\r\n <div class=\"label\">${word.label}<\/div>\r\n `;\r\n btn.onclick = () => checkAnswer(word.id, btn);\r\n grid.appendChild(btn);\r\n });\r\n\r\n speak(round.prompt);\r\n}\r\n\r\nfunction checkAnswer(id, btn){\r\n if(locked) return;\r\n\r\n popSound();\r\n\r\n const correctId = ROUNDS[roundIndex].target;\r\n\r\n if(id === correctId){\r\n locked = true;\r\n\r\n btn.classList.add(\"correct\");\r\n animateMascot(\"happy\");\r\n openChest();\r\n\r\n coins += 10;\r\n updateCoins();\r\n\r\n setMessage(\"You found it!\");\r\n setSpeech(\"You found it!\");\r\n speak(\"You found it!\");\r\n correctSound();\r\n flyCoin(btn);\r\n\r\n setTimeout(()=>{\r\n roundIndex++;\r\n renderRound();\r\n },1000);\r\n\r\n }else{\r\n btn.classList.add(\"wrong\");\r\n animateMascot(\"sad\");\r\n\r\n setMessage(\"Let\u2019s try again\");\r\n setSpeech(\"Let\u2019s try again\");\r\n speak(\"Let\u2019s try again\");\r\n wrongSound();\r\n\r\n setTimeout(()=>{\r\n btn.classList.remove(\"wrong\");\r\n },450);\r\n }\r\n}\r\n\r\n\/* MASCOT *\/\r\nfunction animateMascot(type){\r\n const mascot = document.getElementById(\"mascot\");\r\n\r\n mascot.classList.remove(\"happy\",\"sad\");\r\n void mascot.offsetWidth;\r\n\r\n if(type === \"happy\"){\r\n mascot.classList.add(\"happy\");\r\n setTimeout(()=>mascot.classList.remove(\"happy\"),800);\r\n }else{\r\n mascot.classList.add(\"sad\");\r\n setTimeout(()=>mascot.classList.remove(\"sad\"),600);\r\n }\r\n}\r\n\r\n\/* CHEST *\/\r\nfunction openChest(){\r\n const chest = document.getElementById(\"chest\");\r\n chest.classList.add(\"open\");\r\n\r\n setTimeout(()=>{\r\n chest.classList.remove(\"open\");\r\n },750);\r\n}\r\n\r\n\/* COINS *\/\r\nfunction updateCoins(){\r\n document.getElementById(\"coins\").textContent = \"\u2b50 \" + coins + \" Coins\";\r\n}\r\n\r\nfunction flyCoin(from){\r\n const rect = from.getBoundingClientRect();\r\n const target = document.getElementById(\"coins\").getBoundingClientRect();\r\n\r\n const coin = document.createElement(\"div\");\r\n coin.className = \"flying-coin\";\r\n coin.textContent = \"\ud83e\ude99\";\r\n coin.style.left = rect.left + rect.width\/2 + \"px\";\r\n coin.style.top = rect.top + rect.height\/2 + \"px\";\r\n document.body.appendChild(coin);\r\n\r\n coin.animate([\r\n {transform:\"translate(0,0) scale(1)\", opacity:1},\r\n {transform:`translate(${target.left - rect.left}px, ${target.top - rect.top}px) scale(.4)`, opacity:1}\r\n ],{\r\n duration:650,\r\n easing:\"ease-in-out\"\r\n });\r\n\r\n setTimeout(()=>coin.remove(),700);\r\n}\r\n\r\n\/* END *\/\r\nfunction endGame(){\r\n tadaSound();\r\n openChest();\r\n\r\n document.getElementById(\"finalScore\").textContent =\r\n \"You collected \" + coins + \" coins!\";\r\n\r\n setTimeout(()=>{\r\n document.getElementById(\"endOverlay\").classList.add(\"show\");\r\n },700);\r\n}\r\n\r\n\/* HELPERS *\/\r\nfunction updateProgress(){\r\n document.getElementById(\"progress\").textContent =\r\n \"Round \" + (roundIndex + 1) + \" \/ \" + ROUNDS.length;\r\n}\r\n\r\nfunction setMessage(text){\r\n document.getElementById(\"message\").textContent = text;\r\n}\r\n\r\nfunction setSpeech(text){\r\n document.getElementById(\"speech\").textContent = text;\r\n}\r\n\r\nfunction shuffle(arr){\r\n return arr.sort(()=>Math.random() - .5);\r\n}\r\n\r\n\/* VOICE *\/\r\nfunction speak(text){\r\n if(!(\"speechSynthesis\" in window)) return;\r\n\r\n speechSynthesis.cancel();\r\n\r\n const utter = new SpeechSynthesisUtterance(text);\r\n utter.rate = .9;\r\n utter.pitch = 1.15;\r\n utter.volume = 1;\r\n utter.lang = \"en-US\";\r\n\r\n speechSynthesis.speak(utter);\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pirate Treasure Island Game \u2b50 0 Coins Round 1 \/ 6 Click Play X Ahoy! Let\u2019s play! \u2728 \u2b50 \ud83e\ude99 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-28224","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/comments?post=28224"}],"version-history":[{"count":10,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28224\/revisions"}],"predecessor-version":[{"id":28349,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28224\/revisions\/28349"}],"wp:attachment":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/media?parent=28224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nPirate Treasure Island Game<\/title>\r\n\r\n<style>\r\n:root{\r\n --sand:#f6dfaa;\r\n --blue:#56c7ff;\r\n --green:#58c878;\r\n --red:#ff5f6d;\r\n --gold:#ffcf3f;\r\n --ink:#17324d;\r\n}\r\n\r\n*{box-sizing:border-box}\r\n\r\nhtml,body{\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n overflow:hidden;\r\n font-family:Arial, sans-serif;\r\n background:#69cfff;\r\n}\r\n\r\n.game{\r\n width:100vw;\r\n height:100vh;\r\n overflow:hidden;\r\n display:grid;\r\n grid-template-rows:80px 1fr 120px;\r\n padding:12px;\r\n gap:10px;\r\n background:\r\n radial-gradient(circle at 20% 30%, #6edb8f 0 10%, transparent 11%),\r\n radial-gradient(circle at 75% 65%, #67d486 0 12%, transparent 13%),\r\n linear-gradient(#7edcff,#5fc8ff);\r\n}\r\n\r\n\/* TOP BAR *\/\r\n.top{\r\n display:grid;\r\n grid-template-columns:1fr 1fr 1fr;\r\n gap:10px;\r\n}\r\n\r\n.box{\r\n background:rgba(255,255,255,.9);\r\n border:4px solid #fff1bf;\r\n border-radius:24px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-weight:900;\r\n font-size:24px;\r\n color:var(--ink);\r\n box-shadow:0 8px 18px rgba(0,0,0,.15);\r\n}\r\n\r\n#coins{\r\n color:#9a6a00;\r\n}\r\n\r\n\/* MAP *\/\r\n.map{\r\n position:relative;\r\n overflow:hidden;\r\n border-radius:34px;\r\n border:6px solid #fff1bf;\r\n background:\r\n radial-gradient(circle at 20% 25%, #7edc9a 0 12%, transparent 13%),\r\n radial-gradient(circle at 75% 30%, #6fd48f 0 10%, transparent 11%),\r\n radial-gradient(circle at 60% 75%, #8be4a4 0 11%, transparent 12%),\r\n linear-gradient(145deg,#f7e8bc,#efd28f);\r\n box-shadow:0 10px 25px rgba(0,0,0,.18);\r\n}\r\n\r\n\/* dotted pirate path *\/\r\n.map:before{\r\n content:\"\";\r\n position:absolute;\r\n inset:15%;\r\n border:8px dashed rgba(130,82,35,.35);\r\n border-radius:50%;\r\n transform:rotate(-12deg);\r\n}\r\n\r\n.xmark{\r\n position:absolute;\r\n right:8%;\r\n top:10%;\r\n font-size:54px;\r\n font-weight:900;\r\n color:#b4382c;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n transform:rotate(-18deg);\r\n}\r\n\r\n\/* ITEMS *\/\r\n.grid{\r\n position:absolute;\r\n inset:20px 20px 110px 20px;\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n grid-template-rows:repeat(2,1fr);\r\n gap:14px;\r\n z-index:2;\r\n}\r\n\r\n.item{\r\n border:none;\r\n border-radius:28px;\r\n background:rgba(255,255,255,.85);\r\n border:4px solid white;\r\n box-shadow:0 8px 0 rgba(0,0,0,.08), 0 12px 22px rgba(0,0,0,.12);\r\n cursor:pointer;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n gap:8px;\r\n transition:.15s;\r\n user-select:none;\r\n}\r\n\r\n.item:active{\r\n transform:scale(.94);\r\n}\r\n\r\n.emoji{\r\n font-size:clamp(46px,6vw,74px);\r\n}\r\n\r\n.label{\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-size:clamp(22px,2.3vw,34px);\r\n font-weight:900;\r\n color:var(--ink);\r\n}\r\n\r\n.item.correct{\r\n background:#ffe98a;\r\n animation:correct .6s ease;\r\n}\r\n\r\n.item.wrong{\r\n background:#ffd4d8;\r\n animation:wrong .4s ease;\r\n}\r\n\r\n@keyframes correct{\r\n 0%{transform:scale(1)}\r\n 40%{transform:scale(1.1)}\r\n 100%{transform:scale(1)}\r\n}\r\n\r\n@keyframes wrong{\r\n 0%,100%{transform:translateX(0)}\r\n 25%{transform:translateX(-8px)}\r\n 50%{transform:translateX(8px)}\r\n 75%{transform:translateX(-5px)}\r\n}\r\n\r\n\/* BOTTOM *\/\r\n.bottom{\r\n display:grid;\r\n grid-template-columns:190px 1fr 130px;\r\n gap:10px;\r\n align-items:end;\r\n position:relative;\r\n}\r\n\r\n.mascot-wrap{\r\n position:relative;\r\n height:120px;\r\n}\r\n\r\n.mascot{\r\n width:170px;\r\n max-height:120px;\r\n object-fit:contain;\r\n filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));\r\n transform-origin:center bottom;\r\n}\r\n\r\n\/* MASCOT ANIMATIONS *\/\r\n.mascot.happy{\r\n animation:mascotHappy .75s ease;\r\n}\r\n\r\n.mascot.sad{\r\n animation:mascotSad .55s ease;\r\n}\r\n\r\n@keyframes mascotHappy{\r\n 0%{transform:scale(1) rotate(0)}\r\n 25%{transform:scale(1.12) rotate(-6deg)}\r\n 50%{transform:scale(1.08) rotate(6deg)}\r\n 75%{transform:scale(1.12) rotate(-4deg)}\r\n 100%{transform:scale(1) rotate(0)}\r\n}\r\n\r\n@keyframes mascotSad{\r\n 0%{transform:translateX(0)}\r\n 20%{transform:translateX(-8px) rotate(-3deg)}\r\n 40%{transform:translateX(8px) rotate(3deg)}\r\n 60%{transform:translateX(-5px) rotate(-2deg)}\r\n 80%{transform:translateX(5px) rotate(2deg)}\r\n 100%{transform:translateX(0)}\r\n}\r\n\r\n.speech{\r\n position:absolute;\r\n left:130px;\r\n bottom:55px;\r\n min-width:220px;\r\n background:white;\r\n border:4px solid #fff1bf;\r\n border-radius:26px;\r\n padding:12px 16px;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-size:clamp(20px,2vw,30px);\r\n font-weight:900;\r\n color:var(--ink);\r\n box-shadow:0 8px 20px rgba(0,0,0,.15);\r\n}\r\n\r\n.speech:after{\r\n content:\"\";\r\n position:absolute;\r\n left:-14px;\r\n bottom:18px;\r\n border-width:12px 14px 12px 0;\r\n border-style:solid;\r\n border-color:transparent white transparent transparent;\r\n}\r\n\r\n\/* TREASURE CHEST *\/\r\n.chest{\r\n width:108px;\r\n height:90px;\r\n position:relative;\r\n}\r\n\r\n.chest-base{\r\n position:absolute;\r\n bottom:0;\r\n width:100%;\r\n height:56px;\r\n background:linear-gradient(#c07439,#90511f);\r\n border:4px solid #6f3e19;\r\n border-radius:10px 10px 16px 16px;\r\n}\r\n\r\n.chest-lid{\r\n position:absolute;\r\n top:4px;\r\n width:100%;\r\n height:38px;\r\n background:linear-gradient(#d48547,#9c5a24);\r\n border:4px solid #6f3e19;\r\n border-radius:18px 18px 8px 8px;\r\n transform-origin:left bottom;\r\n transition:.4s ease;\r\n}\r\n\r\n.chest.open .chest-lid{\r\n transform:rotate(-42deg) translateY(-4px);\r\n}\r\n\r\n.lock{\r\n position:absolute;\r\n width:22px;\r\n height:22px;\r\n background:var(--gold);\r\n border:3px solid #b98b1f;\r\n border-radius:6px;\r\n left:43px;\r\n bottom:15px;\r\n}\r\n\r\n.burst{\r\n position:absolute;\r\n inset:-25px;\r\n pointer-events:none;\r\n}\r\n\r\n.burst span{\r\n position:absolute;\r\n opacity:0;\r\n font-size:24px;\r\n}\r\n\r\n.chest.open .burst span{\r\n animation:burst .7s ease forwards;\r\n}\r\n\r\n@keyframes burst{\r\n 0%{opacity:0; transform:translateY(20px) scale(.4)}\r\n 20%{opacity:1}\r\n 100%{opacity:0; transform:translateY(-40px) scale(1.3)}\r\n}\r\n\r\n\/* START \/ END OVERLAY *\/\r\n.overlay{\r\n position:fixed;\r\n inset:0;\r\n background:rgba(20,50,80,.45);\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n z-index:50;\r\n}\r\n\r\n.overlay.show{\r\n display:flex;\r\n}\r\n\r\n.card{\r\n width:min(700px,90vw);\r\n background:white;\r\n border:6px solid #fff1bf;\r\n border-radius:34px;\r\n padding:28px;\r\n text-align:center;\r\n box-shadow:0 20px 40px rgba(0,0,0,.25);\r\n}\r\n\r\n.card h1{\r\n margin:0 0 10px;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-size:44px;\r\n color:var(--ink);\r\n}\r\n\r\n.card p{\r\n font-size:24px;\r\n font-weight:bold;\r\n color:#33597b;\r\n}\r\n\r\n.btn{\r\n border:none;\r\n border-radius:999px;\r\n padding:16px 34px;\r\n background:#4d7dff;\r\n color:white;\r\n font-family:\"Trebuchet MS\", Arial, sans-serif;\r\n font-size:28px;\r\n font-weight:900;\r\n cursor:pointer;\r\n box-shadow:0 8px 0 rgba(0,0,0,.12);\r\n}\r\n\r\n.btn:active{\r\n transform:translateY(3px);\r\n}\r\n\r\n.flying-coin{\r\n position:fixed;\r\n z-index:100;\r\n width:34px;\r\n height:34px;\r\n border-radius:50%;\r\n background:gold;\r\n display:grid;\r\n place-items:center;\r\n pointer-events:none;\r\n font-size:18px;\r\n}\r\n\r\n\/* SMALL SCREENS *\/\r\n@media(max-width:700px){\r\n .game{\r\n grid-template-rows:120px 1fr 120px;\r\n }\r\n\r\n .top{\r\n grid-template-columns:1fr 1fr;\r\n }\r\n\r\n .box:nth-child(3){\r\n grid-column:1\/-1;\r\n }\r\n\r\n .grid{\r\n grid-template-columns:repeat(2,1fr);\r\n grid-template-rows:repeat(3,1fr);\r\n inset:12px 12px 115px 12px;\r\n }\r\n\r\n .bottom{\r\n grid-template-columns:120px 1fr 90px;\r\n }\r\n\r\n .mascot{\r\n width:120px;\r\n }\r\n\r\n .speech{\r\n left:80px;\r\n bottom:60px;\r\n min-width:180px;\r\n font-size:18px;\r\n }\r\n\r\n .chest{\r\n transform:scale(.8);\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"game\">\r\n\r\n <div class=\"top\">\r\n <div class=\"box\" id=\"coins\">\u2b50 0 Coins<\/div>\r\n <div class=\"box\" id=\"progress\">Round 1 \/ 6<\/div>\r\n <div class=\"box\" id=\"message\">Click Play<\/div>\r\n <\/div>\r\n\r\n <div class=\"map\">\r\n <div class=\"xmark\">X<\/div>\r\n <div class=\"grid\" id=\"grid\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"bottom\">\r\n <div class=\"mascot-wrap\">\r\n <img decoding=\"async\"\r\n id=\"mascot\"\r\n class=\"mascot\"\r\n src=\"https:\/\/newgrasp.com\/wp-content\/uploads\/2026\/04\/Pirate.png\"\r\n alt=\"Pirate mascot\"\r\n \/>\r\n <div class=\"speech\" id=\"speech\">Ahoy! Let\u2019s play!<\/div>\r\n <\/div>\r\n\r\n <div><\/div>\r\n\r\n <div class=\"chest\" id=\"chest\">\r\n <div class=\"chest-lid\"><\/div>\r\n <div class=\"chest-base\"><\/div>\r\n <div class=\"lock\"><\/div>\r\n <div class=\"burst\">\r\n <span style=\"left:10%;top:25%;animation-delay:.05s\">\u2728<\/span>\r\n <span style=\"left:35%;top:5%;animation-delay:.12s\">\u2b50<\/span>\r\n <span style=\"left:58%;top:10%;animation-delay:.18s\">\ud83e\ude99<\/span>\r\n <span style=\"left:80%;top:25%;animation-delay:.25s\">\u2728<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"overlay show\" id=\"startOverlay\">\r\n <div class=\"card\">\r\n <h1>Pirate Treasure Island<\/h1>\r\n <p>What Do You Ride?<\/p>\r\n <button class=\"btn\" onclick=\"startGame()\">Play<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"overlay\" id=\"endOverlay\">\r\n <div class=\"card\">\r\n <h1>Treasure Found!<\/h1>\r\n <p id=\"finalScore\">You collected 0 coins!<\/p>\r\n <button class=\"btn\" onclick=\"startGame()\">Play Again<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst WORDS = [\r\n {id:\"car\", label:\"car\", emoji:\"\ud83d\ude97\"},\r\n {id:\"bus\", label:\"bus\", emoji:\"\ud83d\ude8c\"},\r\n {id:\"bike\", label:\"bike\", emoji:\"\ud83d\udeb2\"},\r\n {id:\"train\", label:\"train\", emoji:\"\ud83d\ude86\"},\r\n {id:\"plane\", label:\"plane\", emoji:\"\u2708\ufe0f\"},\r\n {id:\"balloon\", label:\"balloon\", emoji:\"\ud83c\udf88\"}\r\n];\r\n\r\nconst ROUNDS = [\r\n {target:\"car\", prompt:\"Find the car!\"},\r\n {target:\"bus\", prompt:\"Find the bus!\"},\r\n {target:\"bike\", prompt:\"Find the bike!\"},\r\n {target:\"train\", prompt:\"Find the train!\"},\r\n {target:\"plane\", prompt:\"Find the plane!\"},\r\n {target:\"balloon\", prompt:\"Find the balloon!\"}\r\n];\r\n\r\nlet roundIndex = 0;\r\nlet coins = 0;\r\nlet locked = false;\r\n\r\n\/* SOUND *\/\r\nlet audioCtx;\r\n\r\nfunction ctx(){\r\n if(!audioCtx){\r\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n }\r\n return audioCtx;\r\n}\r\n\r\nfunction tone(freq,duration,type=\"sine\",gainValue=.04,delay=0){\r\n const c = ctx();\r\n const osc = c.createOscillator();\r\n const gain = c.createGain();\r\n\r\n osc.type = type;\r\n osc.frequency.value = freq;\r\n\r\n gain.gain.setValueAtTime(.0001, c.currentTime + delay);\r\n gain.gain.exponentialRampToValueAtTime(gainValue, c.currentTime + delay + .01);\r\n gain.gain.exponentialRampToValueAtTime(.0001, c.currentTime + delay + duration);\r\n\r\n osc.connect(gain);\r\n gain.connect(c.destination);\r\n\r\n osc.start(c.currentTime + delay);\r\n osc.stop(c.currentTime + delay + duration + .03);\r\n}\r\n\r\nfunction popSound(){\r\n tone(520,.06,\"triangle\",.04);\r\n tone(720,.05,\"triangle\",.03,.04);\r\n}\r\n\r\nfunction correctSound(){\r\n tone(660,.1,\"sine\",.05);\r\n tone(880,.12,\"sine\",.05,.08);\r\n tone(1200,.14,\"triangle\",.04,.16);\r\n}\r\n\r\nfunction wrongSound(){\r\n tone(240,.12,\"sawtooth\",.025);\r\n tone(190,.14,\"sawtooth\",.02,.08);\r\n}\r\n\r\nfunction tadaSound(){\r\n tone(620,.1,\"triangle\",.05);\r\n tone(840,.12,\"triangle\",.05,.08);\r\n tone(1200,.18,\"triangle\",.05,.18);\r\n}\r\n\r\n\/* GAME *\/\r\nfunction startGame(){\r\n document.getElementById(\"startOverlay\").classList.remove(\"show\");\r\n document.getElementById(\"endOverlay\").classList.remove(\"show\");\r\n\r\n roundIndex = 0;\r\n coins = 0;\r\n locked = false;\r\n\r\n updateCoins();\r\n renderRound();\r\n}\r\n\r\nfunction renderRound(){\r\n locked = false;\r\n\r\n if(roundIndex >= ROUNDS.length){\r\n endGame();\r\n return;\r\n }\r\n\r\n const round = ROUNDS[roundIndex];\r\n\r\n setMessage(round.prompt);\r\n setSpeech(round.prompt);\r\n updateProgress();\r\n\r\n const grid = document.getElementById(\"grid\");\r\n grid.innerHTML = \"\";\r\n\r\n shuffle([...WORDS]).forEach(word=>{\r\n const btn = document.createElement(\"button\");\r\n btn.className = \"item\";\r\n btn.innerHTML = `\r\n <div class=\"emoji\">${word.emoji}<\/div>\r\n <div class=\"label\">${word.label}<\/div>\r\n `;\r\n btn.onclick = () => checkAnswer(word.id, btn);\r\n grid.appendChild(btn);\r\n });\r\n\r\n speak(round.prompt);\r\n}\r\n\r\nfunction checkAnswer(id, btn){\r\n if(locked) return;\r\n\r\n popSound();\r\n\r\n const correctId = ROUNDS[roundIndex].target;\r\n\r\n if(id === correctId){\r\n locked = true;\r\n\r\n btn.classList.add(\"correct\");\r\n animateMascot(\"happy\");\r\n openChest();\r\n\r\n coins += 10;\r\n updateCoins();\r\n\r\n setMessage(\"You found it!\");\r\n setSpeech(\"You found it!\");\r\n speak(\"You found it!\");\r\n correctSound();\r\n flyCoin(btn);\r\n\r\n setTimeout(()=>{\r\n roundIndex++;\r\n renderRound();\r\n },1000);\r\n\r\n }else{\r\n btn.classList.add(\"wrong\");\r\n animateMascot(\"sad\");\r\n\r\n setMessage(\"Let\u2019s try again\");\r\n setSpeech(\"Let\u2019s try again\");\r\n speak(\"Let\u2019s try again\");\r\n wrongSound();\r\n\r\n setTimeout(()=>{\r\n btn.classList.remove(\"wrong\");\r\n },450);\r\n }\r\n}\r\n\r\n\/* MASCOT *\/\r\nfunction animateMascot(type){\r\n const mascot = document.getElementById(\"mascot\");\r\n\r\n mascot.classList.remove(\"happy\",\"sad\");\r\n void mascot.offsetWidth;\r\n\r\n if(type === \"happy\"){\r\n mascot.classList.add(\"happy\");\r\n setTimeout(()=>mascot.classList.remove(\"happy\"),800);\r\n }else{\r\n mascot.classList.add(\"sad\");\r\n setTimeout(()=>mascot.classList.remove(\"sad\"),600);\r\n }\r\n}\r\n\r\n\/* CHEST *\/\r\nfunction openChest(){\r\n const chest = document.getElementById(\"chest\");\r\n chest.classList.add(\"open\");\r\n\r\n setTimeout(()=>{\r\n chest.classList.remove(\"open\");\r\n },750);\r\n}\r\n\r\n\/* COINS *\/\r\nfunction updateCoins(){\r\n document.getElementById(\"coins\").textContent = \"\u2b50 \" + coins + \" Coins\";\r\n}\r\n\r\nfunction flyCoin(from){\r\n const rect = from.getBoundingClientRect();\r\n const target = document.getElementById(\"coins\").getBoundingClientRect();\r\n\r\n const coin = document.createElement(\"div\");\r\n coin.className = \"flying-coin\";\r\n coin.textContent = \"\ud83e\ude99\";\r\n coin.style.left = rect.left + rect.width\/2 + \"px\";\r\n coin.style.top = rect.top + rect.height\/2 + \"px\";\r\n document.body.appendChild(coin);\r\n\r\n coin.animate([\r\n {transform:\"translate(0,0) scale(1)\", opacity:1},\r\n {transform:`translate(${target.left - rect.left}px, ${target.top - rect.top}px) scale(.4)`, opacity:1}\r\n ],{\r\n duration:650,\r\n easing:\"ease-in-out\"\r\n });\r\n\r\n setTimeout(()=>coin.remove(),700);\r\n}\r\n\r\n\/* END *\/\r\nfunction endGame(){\r\n tadaSound();\r\n openChest();\r\n\r\n document.getElementById(\"finalScore\").textContent =\r\n \"You collected \" + coins + \" coins!\";\r\n\r\n setTimeout(()=>{\r\n document.getElementById(\"endOverlay\").classList.add(\"show\");\r\n },700);\r\n}\r\n\r\n\/* HELPERS *\/\r\nfunction updateProgress(){\r\n document.getElementById(\"progress\").textContent =\r\n \"Round \" + (roundIndex + 1) + \" \/ \" + ROUNDS.length;\r\n}\r\n\r\nfunction setMessage(text){\r\n document.getElementById(\"message\").textContent = text;\r\n}\r\n\r\nfunction setSpeech(text){\r\n document.getElementById(\"speech\").textContent = text;\r\n}\r\n\r\nfunction shuffle(arr){\r\n return arr.sort(()=>Math.random() - .5);\r\n}\r\n\r\n\/* VOICE *\/\r\nfunction speak(text){\r\n if(!(\"speechSynthesis\" in window)) return;\r\n\r\n speechSynthesis.cancel();\r\n\r\n const utter = new SpeechSynthesisUtterance(text);\r\n utter.rate = .9;\r\n utter.pitch = 1.15;\r\n utter.volume = 1;\r\n utter.lang = \"en-US\";\r\n\r\n speechSynthesis.speak(utter);\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pirate Treasure Island Game \u2b50 0 Coins Round 1 \/ 6 Click Play X Ahoy! Let\u2019s play! \u2728 \u2b50 \ud83e\ude99 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-28224","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/comments?post=28224"}],"version-history":[{"count":10,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28224\/revisions"}],"predecessor-version":[{"id":28349,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28224\/revisions\/28349"}],"wp:attachment":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/media?parent=28224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}