// Thanks to @Gordon and @Mirielle for pointing me to the JS functions and Math // to get the Image Map to be Responsive when resizing the browser. function fixCoords() { var origImg = 284 var imgSize = document.getElementById("spin"); var imageHeight = window.getComputedStyle(imgSize, null).getPropertyValue("height"); var imageWidth = window.getComputedStyle(imgSize, null).getPropertyValue("width"); var compHeight = parseInt(imageHeight) / origImg var compWidth = parseInt(imageWidth) / origImg // console.log("imageHeight = " + imageHeight + " / imageWidth = " + imageWidth); // console.log("computedHeight = " + compHeight + " / computedWidth = " + compWidth); // https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_area_coords2 var scissorsCoords = [ parseInt(140 * compHeight), parseInt(55 * compHeight), parseInt(40 * compHeight) ]; var paperCoords = [ parseInt(232 * compHeight), parseInt(118 * compHeight), parseInt(40 * compHeight) ]; var spockCoords = [ parseInt(52 * compHeight), parseInt(120 * compHeight), parseInt(40 * compHeight) ]; var lizardCoords = [ parseInt(88 * compHeight), parseInt(230 * compHeight), parseInt(40 * compHeight) ]; var rockCoords = [ parseInt(200 * compHeight), parseInt(227 * compHeight), parseInt(40 * compHeight) ]; // coords = width, height, radius document.getElementById("scissors").coords = "\"" + scissorsCoords[0] + "," + scissorsCoords[1] + "," + scissorsCoords[2] + "\""; document.getElementById("paper").coords = "\"" + paperCoords[0] + "," + paperCoords[1] + "," + paperCoords[2] + "\""; document.getElementById("spock").coords = "\"" + spockCoords[0] + "," + spockCoords[1] + "," + spockCoords[2] + "\""; document.getElementById("lizard").coords = "\"" + lizardCoords[0] + "," + lizardCoords[1] + "," + lizardCoords[2] + "\""; document.getElementById("rock").coords = "\"" + rockCoords[0] + "," + rockCoords[1] + "," + rockCoords[2] + "\""; // console.log("scissorsCoords = " + scissorsCoords); // console.log("paperCoords = " + paperCoords); // console.log("spockCoords = " + spockCoords); // console.log("lizardCoords = " + lizardCoords); // console.log("rockCoords = " + rockCoords); } window.addEventListener('resize', fixCoords); // // Rock, Paper, Scissors, Lizard, Spock // // Scissors cut Paper // Paper covers Rock // Rock crushes Lizard // Lizard poisons Spock // Spock smashes Scissors // Scissors decapitate Lizard // Lizard eats Paper // Paper disproves Spock // Spock vaporizes Rock // Rock crushes Scissors // var userScr = 0; var compScr = 0; // function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); }).join(' '); } // function spinner(win=0) { // console.log('win = ' + win); if (win == 1) { document.getElementById("spin").classList.add("spinner"); document.getElementById("footer").classList.add("spinner"); spin.addEventListener("animationend", endSpinner); } else { document.getElementById("spin").classList.remove("spinner"); document.getElementById("footer").classList.remove("spinner"); } } // function endSpinner() { document.getElementById("spin").classList.remove("spinner"); document.getElementById("footer").classList.remove("spinner"); } // function RPSLS(userChoice) { fixCoords(); // console.log("You Chose: " + userChoice); function compChoice() { var computerChoice = Math.random(); if (computerChoice < 0.2) { computerChoice = "rock"; } else if (computerChoice <= 0.4) { computerChoice = "paper"; } else if (computerChoice <= 0.6) { computerChoice = "scissors"; } else if (computerChoice <= 0.8) { computerChoice = "lizard"; } else { computerChoice = "spock"; } return computerChoice; } // function result() { if(computerChoice == userChoice) { document.getElementById('footer').style.color="white"; var message = comp + "
" + user + "
It's a tie!"; spinner(win=0); } else { userChoice = choices[userChoice]; var victory = userChoice.defeats[computerChoice] !== undefined; computerChoice = choices[computerChoice]; // if(victory) { document.getElementById('footer').style.color='white'; userScr++; var message = comp + "
" + user + "
Victory... " + userChoice.name + " " + userChoice.defeats[computerChoice.name.toLowerCase()] + " " + computerChoice.name + "!"; spinner(win=1); } else { document.getElementById('footer').style.color='pink'; compScr++; var message = comp + "
" + user + "
Defeat... " + computerChoice.name + " " + computerChoice.defeats[userChoice.name.toLowerCase()] + " " + userChoice.name + "!"; spinner(win=0); } } return message; } // var choices = {rock : {name: "Rock", defeats: {scissors: "crushes", lizard: "crushes"} }, paper: {name: "Paper", defeats: {rock: "covers", spock: "disproves"} }, scissors: {name: "Scissors", defeats:{paper : "cuts", lizard: "decapitates"} }, lizard: {name: "Lizard", defeats:{paper: "eats", spock: "poisons"} }, spock: {name: "Spock", defeats:{scissors : "smashes",rock : "vaporises"} } }; var computerChoice = compChoice(); // console.log("computer chose: " + computerChoice); var comp = "The computer chose " + computerChoice; var user = "You chose " + userChoice; var message = result(); // document.getElementById('compScore').innerHTML = "comp: " + compScr; document.getElementById('userScore').innerHTML = "user: " + userScr; document.getElementById('footer').innerHTML = titleCase(message) + "
"; }

RPSLS 💎-📄-✂️-🦎-🖖 Web edition