Last active
November 10, 2022 18:08
-
-
Save angusgrant/5adb0232aab262f783dc4389d59c25a5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Monsters! Game</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style type="text/css"> | |
| body { | |
| margin: 0 auto; | |
| max-width: 40em; | |
| width: 88%; | |
| } | |
| /** | |
| * A simple grid layout | |
| */ | |
| .row { | |
| display: grid; | |
| grid-template-columns: auto auto auto; | |
| text-align: center; | |
| } | |
| .grid { | |
| min-height: 6em; | |
| padding: 1em; | |
| } | |
| /** | |
| * Make sure images scale | |
| */ | |
| img { | |
| height: auto; | |
| max-width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Monsters! Game</h1> | |
| <div id="app"></div> | |
| <footer> | |
| <hr> | |
| <p class="text-small text-muted">Icons by <a href="https://thenounproject.com/term/door/311732/">Jamie Dickinson</a>, <a href="https://thenounproject.com/term/monster/184225/">Nicky Knicky</a>, <a href="https://thenounproject.com/term/monster/1510400/">Alvaro Cabrera</a>, <a href="https://thenounproject.com/term/monster/28460/">Eliricon</a>, <a href="https://thenounproject.com/term/monster/82823/">April Yang</a>, <a href="https://thenounproject.com/term/monster/1062009/">tk66</a>, <a href="https://thenounproject.com/term/monster/24990/">Alex WaZa</a>, <a href="https://thenounproject.com/term/monster/37212/">Husein Aziz</a>, <a href="https://thenounproject.com/term/monster/2236082">iconcheese</a>, and <a href="https://thenounproject.com/term/socks/38451/">Yazmin Alanis</a>.</p> | |
| </footer> | |
| <script> | |
| // The monsters and socks | |
| //use a self executing function to hide variables from global scope | |
| let countClick = '0' | |
| let monsters = [ | |
| { | |
| name: 'monster1', | |
| alt: 'A yellow monster with a curly nose' | |
| }, | |
| { | |
| name: 'monster2', | |
| alt: 'A yellow monster with a wide head, one eye, and an underbite' | |
| }, | |
| { | |
| name: 'monster3', | |
| alt: 'A green monster with eyes on stalks and a mouth at the top of its head' | |
| }, | |
| { | |
| name: 'monster4', | |
| alt: 'A red monster with horns, four eyes, and no legs' | |
| }, | |
| { | |
| name: 'monster5', | |
| alt: 'A green monster with three horns on each side of its head, one eye, and a sad look on its face' | |
| }, | |
| { | |
| name: 'monster6', | |
| alt: 'A green, triangle-shaped monster with sharp teeth, walking upside-down on its hands' | |
| }, | |
| { | |
| name: 'monster7', | |
| alt: 'A purple monster with a single, sad looking eye and tentacles for arms' | |
| }, | |
| { | |
| name: 'monster8', | |
| alt: 'A purple, oval-shaped monster with one eye and no arms or legs' | |
| }, | |
| { | |
| name: 'monster9', | |
| alt: 'A blue, insect-like monster, with bug eyes, three body sections, and a pair of wings' | |
| }, | |
| { | |
| name: 'monster10', | |
| alt: 'A blue monster with lopsided eyes on stalks and long, sharp teeth' | |
| }, | |
| { | |
| name: 'monster11', | |
| alt: 'A furry gray monster with long arms and a happy face' | |
| }, | |
| { | |
| name: 'sock', | |
| alt: 'A pair of athletic socks' | |
| } | |
| ]; | |
| // Get the #app element | |
| let app = document.querySelector('#app'); | |
| document.addEventListener('click', function(e){ | |
| e.preventDefault(); | |
| if (event.target.matches('img') || event.target.matches('.toggleimg')){ | |
| let link = event.target.closest('.toggleimg'); | |
| //check if link exists if not then must be the revealed image. | |
| if (link){ | |
| countClick++; | |
| let image = link.querySelector('img'); | |
| //remove class to disable onclick behaviour | |
| link.classList.remove('toggleimg'); | |
| //add aria pressed to tell screen readers the button is clicked | |
| link.setAttribute('aria-pressed', 'true'); | |
| //decode the monster parts to reveal the monster | |
| let decodedImgAlt = atob(image.dataset.alt); | |
| let decodedImgSrc = atob(image.dataset.src); | |
| var revealedImg = `<img src="${decodedImgSrc}" alt="Revealed image of ${decodedImgAlt}" >` | |
| link.outerHTML = revealedImg; | |
| if (decodedImgSrc === "sock.svg") { | |
| //give time for image to load I would like to find a better way than a timeout for this! | |
| setTimeout(function () { | |
| app.innerHTML ='<h2 role="alert">Game Over you found the socks. Please try again!</h2><button onclick="loadGame()">Reload Game</button>'; | |
| }, 100); | |
| } else if(countClick === 11) { | |
| //give time for image to load I would like to find a better way than a timeout for this! | |
| setTimeout(function () { | |
| app.innerHTML ='<h2 role="alert">Congratulations you win! You found all the monsters and no socks!</h2><button onclick="loadGame()">Have another go!</button>'; | |
| }, 100); | |
| } | |
| } | |
| } | |
| }); | |
| /** | |
| * Randomly shuffle an array | |
| * https://stackoverflow.com/a/2450976/1293256 | |
| * @param {Array} array The array to shuffle | |
| * @return {String} The first item in the shuffled array | |
| */ | |
| function shuffle (array) { | |
| let currentIndex = array.length; | |
| let temporaryValue, randomIndex; | |
| // While there remain elements to shuffle... | |
| while (0 !== currentIndex) { | |
| // Pick a remaining element... | |
| randomIndex = Math.floor(Math.random() * currentIndex); | |
| currentIndex -= 1; | |
| // And swap it with the current element. | |
| temporaryValue = array[currentIndex]; | |
| array[currentIndex] = array[randomIndex]; | |
| array[randomIndex] = temporaryValue; | |
| } | |
| return array; | |
| } | |
| function loadGame(){ | |
| //reset click counter to 0 | |
| countClick = '0' | |
| // Shuffle the monsters array | |
| shuffle(monsters); | |
| // Inject the monsters into the DOM | |
| app.innerHTML = | |
| `<p>Click or Press on a door to find all the monsters. If you find a pair of socks before you find all the monsters you lose!<p> | |
| <div class="row"> | |
| ${monsters.map(function (monster, index) { | |
| return ` | |
| <div class="grid" aria-live="polite"> | |
| <a href="#" role="button" title="click on door ${index + 1} to reveal the monster or sock" class="toggleimg"> | |
| <img src="door.svg" alt="door ${index + 1}" data-alt="${btoa(monster.alt)}" data-src="${btoa(`${monster.name}.svg`)}"> | |
| </a> | |
| </div>`; | |
| }).join('')} | |
| </div>`; | |
| }; | |
| //loadGame on load | |
| loadGame(); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg xmlns="http://www.w3.org/2000/svg" width="83" height="90" aria-labelledby="title-sock"><title id="title-sock">Sock!</title><g fill="#808080" fill-rule="nonzero"><path d="M45.884 89.484c-.644 0-1.29-.048-1.926-.143-9.232-1.383-25.625-6.705-26.987-7.494a10.35 10.35 0 0 1-4.849-6.337 10.359 10.359 0 0 1 1.053-7.911c2.877-4.964 5.444-5.177 12.302-5.746.333-.023 7.74-.555 12.482-.555.628 0 1.178.011 1.658.03 3.48-6.343 16.778-31.459 17.894-33.936.508-1.122 2.048-4.529 5.549-4.529 1.998 0 4 1.065 6.534 2.415.463.247.944.503 1.449.765 1.888.979 3.479 1.706 4.885 2.347 4.83 2.203 8.021 3.657 5.289 9.708-3.05 6.757-23.235 43.483-24.165 45.043a13.068 13.068 0 0 1-11.168 6.343zm-7.926-24.489c-4.608 0-12.122.535-12.197.542-6.738.557-7.542.727-9.39 3.915a6.683 6.683 0 0 0-.68 5.107 6.681 6.681 0 0 0 3.13 4.092c1.071.511 16.59 5.675 25.682 7.037.454.066.918.102 1.38.102a9.356 9.356 0 0 0 7.995-4.541c.924-1.55 20.951-37.984 23.971-44.672 1.217-2.696 1.217-2.696-3.455-4.826-1.374-.626-3.084-1.406-5.055-2.43-.516-.267-1.01-.53-1.483-.782-1.998-1.063-3.722-1.981-4.798-1.981-.334 0-1.117 0-2.182 2.355-1.266 2.807-16.288 31.161-18.608 35.248a1.821 1.821 0 0 1-1.811.923c-.545-.061-1.387-.089-2.499-.089z"/><path d="M77.939 40.438a.728.728 0 0 1-.316-.072L57.807 31.05a.744.744 0 0 1 .631-1.347l19.818 9.317a.745.745 0 0 1-.317 1.418z"/><path d="M62.977 33.241a.744.744 0 0 1-.671-1.066l3.336-6.958a.745.745 0 1 1 1.341.643l-3.336 6.958a.743.743 0 0 1-.67.423zM66.69 35.08a.743.743 0 0 1-.67-1.065l3.337-6.958a.743.743 0 1 1 1.341.643l-3.337 6.958a.744.744 0 0 1-.671.422zM70.25 36.719a.744.744 0 0 1-.671-1.066l3.337-6.958a.748.748 0 0 1 .993-.349c.37.178.526.622.349.993l-3.337 6.958a.747.747 0 0 1-.671.422zM73.687 38.014a.744.744 0 0 1-.671-1.066l3.337-6.958a.745.745 0 0 1 1.342.644l-3.337 6.958a.746.746 0 0 1-.671.422zM45.645 88.599c-1.555 0-3.19-.306-4.864-.91a.75.75 0 0 1-.43-.996l4.136-9.622a.746.746 0 0 1 .831-.434l11.608 2.368a.74.74 0 0 1 .539 1.01c-.143.35-3.612 8.584-11.82 8.584zm-3.609-2.061c1.246.38 2.457.574 3.608.574 5.767 0 8.976-4.865 10.041-6.844l-10.072-2.053-3.577 8.323zM18.228 81.206a.726.726 0 0 1-.368-.097l-.331-.187a9.278 9.278 0 0 1-4.341-5.674 9.251 9.251 0 0 1 .941-7.07 9.353 9.353 0 0 1 8.072-4.646c.433 0 .87.031 1.299.092a.748.748 0 0 1 .433.223 10.308 10.308 0 0 1 2.887 7.165c0 4.986-3.556 9.269-8.456 10.182a.695.695 0 0 1-.136.012zm3.973-16.185a7.865 7.865 0 0 0-6.785 3.904 7.776 7.776 0 0 0-.791 5.942 7.785 7.785 0 0 0 3.643 4.763l.085.048a8.868 8.868 0 0 0 6.979-8.666 8.826 8.826 0 0 0-2.297-5.946 7.518 7.518 0 0 0-.834-.045z"/><path d="M31.549 58.037a12.944 12.944 0 0 1-6.393-1.681C17.046 51.757 3.651 40.904 2.66 39.679a10.351 10.351 0 0 1-2.252-7.657 10.352 10.352 0 0 1 3.822-7.005c4.465-3.601 6.938-2.88 13.543-.951.433.131 9.294 2.833 13.386 4.585 5.519-4.666 26.943-23.337 28.884-25.256 1.839-1.818 3.458-2.643 5.204-2.57 2.639.101 4.49 2.236 6.832 4.938.343.395.7.806 1.074 1.229 1.409 1.59 2.636 2.84 3.717 3.942 3.72 3.789 6.177 6.292 1.455 10.96-1.093 1.081-3.362 3.133-6.744 6.099a1.846 1.846 0 0 1-2.606-.172 1.844 1.844 0 0 1 .171-2.605c3.326-2.917 5.541-4.918 6.582-5.948 2.104-2.08 2.104-2.08-1.493-5.746-1.058-1.078-2.374-2.418-3.846-4.08-.384-.434-.748-.854-1.1-1.259-1.688-1.946-3.146-3.627-4.183-3.667-.762-.016-1.756.804-2.468 1.506-2.2 2.175-26.396 23.249-30.02 26.224a1.843 1.843 0 0 1-2.021.213c-2.433-1.259-10.843-3.93-13.879-4.854-6.489-1.893-7.301-2.026-10.17.287a6.687 6.687 0 0 0-2.468 4.522 6.685 6.685 0 0 0 1.453 4.942c.817.861 13.454 11.254 21.447 15.785.394.226.815.424 1.253.593a9.352 9.352 0 0 0 9.089-1.372c.439-.344 5.428-4.532 12.262-10.338a1.847 1.847 0 1 1 2.392 2.815c-6.134 5.211-11.783 9.965-12.371 10.427a13.041 13.041 0 0 1-8.056 2.771z"/><path d="M74.694 22.952a.739.739 0 0 1-.537-.229L59.002 6.915a.744.744 0 0 1 1.072-1.029l15.155 15.808a.744.744 0 0 1-.535 1.258z"/><path d="M63.309 10.866a.742.742 0 0 1-.511-1.284l5.61-5.298a.743.743 0 1 1 1.022 1.081l-5.61 5.298a.748.748 0 0 1-.511.203zM66.117 13.914a.745.745 0 0 1-.511-1.285l5.609-5.296a.745.745 0 0 1 1.023 1.082l-5.61 5.297a.745.745 0 0 1-.511.202zM68.852 16.723a.746.746 0 0 1-.512-1.285l5.61-5.297a.743.743 0 1 1 1.022 1.082l-5.61 5.296a.74.74 0 0 1-.51.204zM71.593 19.165a.745.745 0 0 1-.511-1.285l5.611-5.297a.744.744 0 0 1 1.023 1.083l-5.611 5.296a.748.748 0 0 1-.512.203zM31.048 57.028c-2.912 0-5.69-1.131-8.258-3.358a.737.737 0 0 1-.256-.531.738.738 0 0 1 .21-.549l7.312-7.499a.747.747 0 0 1 .933-.106l9.986 6.378a.743.743 0 0 1 .14 1.137c-.175.185-4.338 4.528-10.067 4.528zm-6.674-3.978c2.114 1.653 4.355 2.489 6.674 2.489 3.855 0 7-2.303 8.317-3.439l-8.667-5.536-6.324 6.486zM6.065 39.739c-.626 0-1.256-.058-1.873-.171a.747.747 0 0 1-.443-.264l-.238-.293a9.267 9.267 0 0 1-2.017-6.851 9.255 9.255 0 0 1 3.417-6.262c2.888-2.329 7.153-2.681 10.38-.89a.74.74 0 0 1 .324.363 10.321 10.321 0 0 1 .124 7.726c-1.527 3.972-5.415 6.642-9.674 6.642zm-1.337-1.591c.442.068.891.102 1.337.102 3.647 0 6.978-2.285 8.286-5.688a8.829 8.829 0 0 0-.01-6.375 7.896 7.896 0 0 0-3.59-.865c-1.803 0-3.5.6-4.906 1.733a7.784 7.784 0 0 0-2.872 5.264 7.785 7.785 0 0 0 1.691 5.753l.064.076z"/></g></svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment