Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Slime [GAME]
ID	4784932780982272
Created	4 years ago, 1619391233349
Updated	4 years ago, 1619539838135
Code	<!DOCTYPE html> <!-- Slime - Dark Owl Made for Challenge 2 of Primavera @How It is basically a game of hangman. Guess the word correctly to avoid dropping the poor guy into the slime below. Use the keyboard to guess letters. An icon representing the category appears in the above the word. Wrong guesses are shown at the bottom. Categories: </> - Programmer Usernames Basketball - Sports Creature - Animals Fruit - Fruits Paintbrush - Colors @Credits LS: Helped throughout the project with debugging w3schools.com: Everything, a great reference --> <html> <!-- The head tag of the HTML page --> <head> <!-- Information about the page --> <meta charset="utf-8"> <title>Slime [GAME]</title> <!-- The CSS Styling of the program --> <style> /* the main body of the program / body { margin: 0px; padding: 0px; overflow: hidden; } / the title of the program / #title { width: 480px; margin: auto; } / the div for the title page / .container { opacity: 1; display: block; width: 100%; height: 400px; background-image: radial-gradient(circle, white, lightgray); transition: all 1s; } / transitioning / .container.fadeOut { opacity: 0; } / the svg letters / #S { position: relative; animation: wave 1s ease-in-out 0s infinite alternate-reverse; top: 30px; } #L { position: relative; animation: wave 1s ease-in-out 0.5s infinite alternate-reverse; top: 30px; } #I { position: relative; animation: wave 1s ease-in-out 1s infinite alternate-reverse; top: 30px; } #M { position: relative; animation: wave 1s ease-in-out 1.5s infinite alternate-reverse; top: 30px; } #E { position: relative; animation: wave 1s ease-in-out 2s infinite alternate-reverse; top: 30px; } @keyframes wave { from { top: 20px; } , to { top: 30px; } } / the waving animation / / the start button styling / .container button { position: relative; background: none; color: #333; border: 10px solid #333; border-radius: 100px; width: 200px; height: 200px; font-size: 150px; transition: box-shadow 0.5s; box-shadow: 5px 5px 5px dimgray; transform: translate(-50%, -50%); top: 35%; left: 50%; } .container button:hover { box-shadow: 10px 10px 10px gray; } .container button:active { box-shadow: 5px 5px 5px dimgray; } / styling for different parts of the game / #game { width: 390px; height: 400px; float: left; } #game #category { margin: 35px 150px; } #game #word { position: relative; left: 10%; width: 80%; } #game #wrong { border-top: 2px solid lightgray; width: 80%; margin: 10%; } div#wrong>svg { width: 30; height: 65; } / the styling for the canvas with the falling man / canvas { background-image: linear-gradient(gray, #333); float: right; border-left: 2px solid #555; } / the main body of the game page / .container2 { display: block; background-image: radial-gradient(circle, white, lightgray); } / the main body of lose scene / #lose { background-image: radial-gradient(circle, white, lightgray); height: 400px; } #lose div { position: relative; width: 268px; margin: auto; top: 75px; } #lose canvas { position: relative; width: 100px; height: 100px; border-radius: 100px; left: -250px; top: 100px; background: #00b000; } </style> </head> <!-- The body tag of the HTML page --> <body> <!-- The Title page container --> <div class="container"> <!-- The Title SVG --> <div id="title"> <svg width="105px" height="140px" id="S" class="title"> <defs> <linearGradient id="sGrad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#00ab00;stop-opacity:1" /> <stop offset="100%" style="stop-color:#002a00;stop-opacity:1" /> </linearGradient> </defs> <path d="M85 39 C80 10 30 9 19 40 C15 70 43 70 55 70 C70 69 88 83 85 104 C80 134 18 128 20 100" fill="none" stroke="url(#sGrad)" stroke-width="30px" stroke-linecap="round" /> </svg> <svg width="80px" height="140px" id="L" class="title"> <defs> <linearGradient id="lGrad" x1="0%" y1="0%" x2="80%" y2="80%"> <stop offset="0%" style="stop-color:#00ab00;stop-opacity:1" /> <stop offset="100%" style="stop-color:#002a00;stop-opacity:1" /> </linearGradient> </defs> <path d="M30 19 C-6 146 49 119 64 123" fill="none" stroke="url(#lGrad)" stroke-width="30px" stroke-linecap="round" /> </svg> <svg width="46px" height="140px" id="I" class="title"> <defs> <linearGradient id="iGrad" x1="0%" y1="0%" x2="22%" y2="114%"> <stop offset="0%" style="stop-color:#00ab00;stop-opacity:1" /> <stop offset="100%" style="stop-color:#002a00;stop-opacity:1" /> </linearGradient> </defs> <path d="M 16 18 L 23 124" fill="none" stroke="url(#iGrad)" stroke-width="30px" stroke-linecap="round" /> </svg> <svg width="128px" height="140px" id="M" class="title"> <defs> <linearGradient id="mGrad" x1="0%" y1="0%" x2="80%" y2="80%"> <stop offset="0%" style="stop-color:#00ab00;stop-opacity:1" /> <stop offset="100%" style="stop-color:#002a00;stop-opacity:1" /> </linearGradient> </defs> <path d="M20 123 C24 -17 42 -9 60 93 C 62 104 107 -97 108 120" fill="none" stroke="url(#mGrad)" stroke-width="30px" stroke-linecap="round" /> </svg> <svg width="105px" height="140px" id="E" class="title"> <defs> <linearGradient id="eGrad" x1="0%" y1="0%" x2="80%" y2="80%"> <stop offset="0%" style="stop-color:#00ab00;stop-opacity:1" /> <stop offset="100%" style="stop-color:#002a00;stop-opacity:1" /> </linearGradient> <linearGradient id="eGrad2" x1="-84%" y1="0%" x2="80%" y2="5%"> <stop offset="0%" style="stop-color:#00ab00;stop-opacity:1" /> <stop offset="100%" style="stop-color:#002a00;stop-opacity:1" /> </linearGradient> </defs> <path d="M90 20 C 10 11 14 20 20 97 C 23 100 7 135 90 118" fill="none" stroke="url(#eGrad)" stroke-width="30px" stroke-linecap="round" /> <path d="M 36 70 L 88 72" fill="none" stroke="url(#eGrad2)" stroke-width="30px" stroke-linecap="round" /> </svg> </div> <svg width="600" height="400" style="position: absolute; left: 200px"> <path stroke="#333" stroke-width="10" fill="none" d="M 75 100 L 135 140 L 75 180 Z" /> </svg> <!-- The start button --> <button></button> </div> <!-- Game Container --> <div class="container2"> <div id="game"> <!-- The Category Icon --> <svg id="category" width="80" height="80"> <circle cx="40" cy="40" r="40" fill="#00b000" /> </svg> <div id="word"></div> <div id="wrong"></div> </div> <!-- The canvas with the graphics of the hanging guy --> <canvas id="graphics" width="200px" height="400px"> Your browser does not support HTML Canvas </canvas> </div> <!-- Lose Screen --> <div id="lose"> <!-- "you lose" text--> <div> <svg width="30" height="65"> <path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="M7 16 L17 34 M24 17 L9 57" /> </svg> <svg width="30" height="65"> <path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="M18 21 C10 14 0 30 9 36 C31 50 30 18 18 21" /> </svg> <svg width="30" height="65"> <path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="M8 20 C1 42 23 45 23 23 L25 40" /> </svg> <svg width="30" height="65"> <path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="" /> </svg> <svg width="30" height="65"> <path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="M13 6 L16 40" /> </svg> <svg width="30" height="65"> <path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="M18 21 C10 14 0 30 9 36 C31 50 30 18 18 21" /> </svg> <svg width="30" height="65"> <path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="M23 20 C-16 21 46 35 9 39" /> </svg> <svg width="30" height="65"> <path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="M8 29 L25 30 C15 -2 -7 53 25 39" /> </svg> </div> <!-- restart button --> <canvas id="restart" width="100" height="100"></canvas> </div> <!-- Title page JS --> <script type="text/javascript"> if ((window.innerWidth !== 600 && window.innerWidth !== 595) \|\| window.innerHeight !== 400) { document.body.innerHTML = "<a href='https://www.khanacademy.org/computer-programming/slime-game/4784932780982272?width=600px&height=400px'>Please click here</a>"; } else {} // function to transition to game function switchPage() { pages[0].classList.add("fadeOut"); setTimeout(function() { pages[0].style.display = "none"; }, 1000); } var pages = document.querySelectorAll(".container"); var playBtn = document.querySelector(".container button"); playBtn.addEventListener("click", switchPage); </script> <!-- graphics script --> <script type="text/javascript"> // drawing the hanging man var c = document.getElementById("graphics"); var ctx = c.getContext("2d"); var height = 1 37.0; var grd = ctx.createLinearGradient(0, 350, 0, 400); grd.addColorStop(0, "rgb(0, 200, 0, 0.0)"); grd.addColorStop(0.5, "#007700"); grd.addColorStop(0.9, "darkgreen"); var grd2 = ctx.createLinearGradient(0, 0, 0, 400); grd2.addColorStop(0, "rgb(143, 143, 143)"); grd2.addColorStop(1, "rgb(56, 56, 56)"); ctx.fillStyle = grd2; ctx.fillRect(0, 0, 200, 400); ctx.fillStyle = grd; ctx.fillRect(0, 350, 200, 50); ctx.lineWidth = 4; ctx.strokeStyle = "rgb(92, 83, 65)"; ctx.moveTo(100, 0); ctx.lineTo(100, height); ctx.stroke(); // the man ctx.strokeStyle = "gainsboro"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(89, height + 10, 8, -1, 2 * Math.PI); ctx.moveTo(87, height + 15); ctx.arc(89, height + 17, 3, Math.PI * 1.22, 1.6 * Math.PI); ctx.moveTo(100, height); ctx.lineTo(99, height + 24); ctx.lineTo(78, height + 21); ctx.moveTo(94, height + 15); ctx.lineTo(104, height + 35); ctx.lineTo(112, height + 51); ctx.moveTo(104, height + 35); ctx.lineTo(99, height + 53); ctx.moveTo(85, height + 12); ctx.lineTo(84, height + 10); ctx.stroke(); var move; function drop() { clearInterval(move); move = setInterval(fall, 5); function fall() { if(height >= (wrong + 1) * 37) { clearInterval(move); } else { height += 0.5; ctx.fillStyle = grd2; ctx.fillRect(0, 0, 200, 400); ctx.lineWidth = 4; ctx.strokeStyle = "rgb(92, 83, 65)"; ctx.moveTo(100, 0); ctx.lineTo(100, height); ctx.stroke(); // the man ctx.strokeStyle = "gainsboro"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(89, height + 10, 8, -1, 2 * Math.PI); ctx.moveTo(87, height + 15); ctx.arc(89, height + 17, 3, Math.PI * 1.22, 1.6 * Math.PI); ctx.moveTo(100, height); ctx.lineTo(99, height + 24); ctx.lineTo(78, height + 21); ctx.moveTo(94, height + 15); ctx.lineTo(104, height + 35); ctx.lineTo(112, height + 51); ctx.moveTo(104, height + 35); ctx.lineTo(99, height + 53); ctx.moveTo(85, height + 12); ctx.lineTo(84, height + 10); ctx.stroke(); ctx.fillStyle = grd; ctx.fillRect(0, 350, 200, 50); } } } </script> <!-- Gameplay --> <script type="text/javascript"> var body = document.getElementsByTagName("body"); var chars = "abcdefghijklmnopqrstuvwxyz1234567890_"; var paths = ["M21 20 C-16 20 23 61 21 20 L24 39", "M9 5 L8 39 C15 -2 40 53 8 39", "M25 26 C13 8 -12 53 25 39", "M25 5 L24 42 C20 -6 -16 60 24 35", "M8 29 L25 30 C15 -2 -7 53 25 39", "M17 42 L13 27 C1 -5 27 15 21 13 M6 27 L20 25", "M9 52 C8 54 25 68 26 40 C15 -2 -7 53 25 39", "M9 6 L11 40 C15 6 29 30 24 40", "M17 26 L15 42 M18 18 L18 19", "M17 26 C28 67 15 55 10 50 M16 18 L16 19", "M8 8 L7 40 M19 21 L8 30 M22 39 L8 30", "M13 6 L16 40", "M5 16 L5 40 C10 1 13 29 14 39 C16 1 25 29 25 39", "M6 20 L8 41 C3 9 27 24 24 39", "M18 21 C10 14 0 30 9 36 C31 50 30 18 18 21", "M8 20 L10 59 M6 20 C42 16 11 53 7 33", "M24 57 L21 22 C2 9 1 43 20 39", "M6 20 L8 41 C3 9 27 24 24 23", "M23 20 C-16 21 46 35 9 39", "M13 5 L14 38 M7 15 L23 14", "M8 20 C1 42 23 45 23 23 L25 40", "M8 20 L16 38 L25 24", "M5 20 C6 48 13 29 15 22 C13 45 25 37 25 20", "M7 16 L26 34 M24 17 L9 32", "M7 16 L17 34 M24 17 L9 57", "M7 18 L24 17 M24 17 L9 32 M24 32 L9 32", "M11 14 L16 10 M18 8 L16 32 M26 35 L8 34", "M10 10 C30 10 28 20 8 34 M26 35 L8 34", "M10 10 C30 10 28 20 13 23 M10 35 C30 31 28 20 13 23", "M6 10 L7 27 L26 28 M20 10 L21 38", "M25 7 L5 8 L6 20 C30 9 25 43 6 32", "M18 6 C2 9 1 43 20 32 C30 18 16 14 8 25", "M7 9 L24 9 L10 35", "M15 20 C44 1 -10 -3 16 25 C37 41 -11 47 17 19", "M22 40 L21 8 C2 9 1 30 20 24", "M17 10 C2 9 1 43 20 39 C30 30 24 10 18 10 M8 33 L23 15", "M4 34 L27 35"]; var words = [ ["apple", "banana", "orange", "watermelon", "pineapple", "kiwi", "mango", "peach", "plum", "grape", "lemon", "lime", "apricot", "cherry", "blueberry", "grapefruit", "pear", "strawberry", "raisin", "melon", "papaya"], ["soccer", "cycling", "cricket", "badminton", "tennis", "hockey", "volleyball", "archery", "gymnastics", "lacrosse", "rugby", "polo", "skeleton", "karate", "rodeo", "squash"], ["giraffe", "elephant", "coyote", "gecko", "shark", "whale", "penguin", "falcon", "walrus", "spider", "crab", "moose", "crocodile", "zebra", "horse", "goat", "sheep", "lion", "salmon", "vulture"], ["xacer", "mango", "willard", "vexcess", "jentgent", "tachyon", "cyberwolf", "bennimus", "squishy", "apex", "akbaba"], ["aqua", "blue", "green", "orange", "purple", "yellow", "pink", "brown", "black", "white", "navy", "teal", "magenta", "cyan", "maroon", "silver", "indigo", "violet"] ]; var playState = "playing"; var category = ~~(Math.random() * words.length); var word = words[category][~~(Math.random() * words[category].length)]; var catSVG = document.getElementById("category"); var guess = []; var wrong = 0; var totalGuesses = "" var wrongGuesses = []; var game = document.getElementsByClassName("container2")[0]; for(var i = 0; i < word.length; i++) { guess.push("_"); } switch(category) { case 0: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke-width='2' stroke='none' fill='white' d='M28 28 C19 30 13 67 60 60 C73 30 42 12 28 27' /><path stroke-width='2' stroke='white' fill='none' d='M28 28 L20 22 M28 28 L 28 20 M28 28 L 24 20 M28 28 L 21 28' /><circle cx='40' cy='40' r='1' fill='#00b000' /><circle cx='49' cy='34' r='1' fill='#00b000' /><circle cx='39' cy='48' r='1' fill='#00b000' /><circle cx='32' cy='38' r='1' fill='#00b000' /><circle cx='51' cy='45' r='1' fill='#00b000' /><circle cx='56' cy='40' r='1' fill='#00b000' /><circle cx='50' cy='52' r='1' fill='#00b000' /><circle cx='38' cy='29' r='1' fill='#00b000' /><circle cx='30' cy='46' r='1' fill='#00b000' />" break; case 1: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><circle cx='40' cy='40' r='25' fill='white' /><path stroke-width='2' stroke='#00b000' fill='none' d='M40 0 L40 80 M0 40 L80 40' /><path stroke-width='2' stroke='#00b000' fill='none' d='M 60 20 a 20 17 93 1 0 14 38' /><path stroke-width='2' stroke='#00b000' fill='none' d='M 7 20 a 20 17 93 1 1 14 38' />" break; case 2: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><circle cx='40' cy='40' r='20' fill='white' /><path stroke-width='2' stroke='none' fill='white' d='M25 30 L30 15 L35 25 L45 25 L50 15 L55 30 Z' /><circle cx='35' cy='35' r='2' fill='#00b000' /><circle cx='45' cy='35' r='2' fill='#00b000' /><circle cx='40' cy='45' r='5' fill='#00b000' />" break; case 3: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke='white' fill='none' stroke-width='5' d='M25 25 L10 40 L25 55 M55 25 L70 40 L55 55 M45 20 L35 60' />"; break; case 4: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke='none' fill='white' d='M36 30 C43 26 35 17 21 14 C27 29 29 30 34 31 L56 60 L59 58 L34 25' />'"; break; } var wordSVG = document.getElementById("word"); var svgLetters = []; for(var i = 0; i < guess.length; i++) { svgLetters.push('<svg width="30" height="65"><path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="' + paths[chars.indexOf(guess[i])] + '"/></svg>'); } wordSVG.innerHTML = svgLetters.join(""); body[0].addEventListener("keyup", addGuess); function addGuess(e) { if(playState === "playing") { if(totalGuesses.indexOf(e.key) < 0 && chars.indexOf(e.key) > -1) { console.log("working"); totalGuesses += e.key; if(word.indexOf(e.key) < 0) { var wrongGuess = document.createElement('svg'); var wrongContainer = document.getElementById("wrong"); wrongContainer.appendChild(wrongGuess); wrongGuesses.push('<svg width="30" height="65"><path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="' + paths[chars.indexOf(e.key)] + '"/></svg>'); wrongContainer.innerHTML = wrongGuesses.join(""); wrong++; if(wrong >= 8) { playState = "lose"; game.style.display = "none"; } drop(); return; } for(var i = 0; i < word.length; i++) { if(word[i] === e.key) { guess[i] = e.key; } } var wordSVG = document.getElementById("word"); var svgLetters = []; for(var i = 0; i < guess.length; i++) { svgLetters.push('<svg width="30" height="65"><path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="' + paths[chars.indexOf(guess[i])] + '"/></svg>'); } wordSVG.innerHTML = svgLetters.join(""); if(guess.join("") === word) { playState = "win"; var next = setInterval(function() { playState = "playing"; category = ~~(Math.random() * words.length); word = words[category][~~(Math.random() * words[category].length)]; catSVG = document.getElementById("category"); guess = []; wrong = 0; totalGuesses = "" wrongGuesses = []; for(var i = 0; i < word.length; i++) { guess.push("_"); } switch(category) { case 0: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke-width='2' stroke='none' fill='white' d='M28 28 C19 30 13 67 60 60 C73 30 42 12 28 27' /><path stroke-width='2' stroke='white' fill='none' d='M28 28 L20 22 M28 28 L 28 20 M28 28 L 24 20 M28 28 L 21 28' /><circle cx='40' cy='40' r='1' fill='#00b000' /><circle cx='49' cy='34' r='1' fill='#00b000' /><circle cx='39' cy='48' r='1' fill='#00b000' /><circle cx='32' cy='38' r='1' fill='#00b000' /><circle cx='51' cy='45' r='1' fill='#00b000' /><circle cx='56' cy='40' r='1' fill='#00b000' /><circle cx='50' cy='52' r='1' fill='#00b000' /><circle cx='38' cy='29' r='1' fill='#00b000' /><circle cx='30' cy='46' r='1' fill='#00b000' />" break; case 1: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><circle cx='40' cy='40' r='25' fill='white' /><path stroke-width='2' stroke='#00b000' fill='none' d='M40 0 L40 80 M0 40 L80 40' /><path stroke-width='2' stroke='#00b000' fill='none' d='M 60 20 a 20 17 93 1 0 14 38' /><path stroke-width='2' stroke='#00b000' fill='none' d='M 7 20 a 20 17 93 1 1 14 38' />" break; case 2: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><circle cx='40' cy='40' r='20' fill='white' /><path stroke-width='2' stroke='none' fill='white' d='M25 30 L30 15 L35 25 L45 25 L50 15 L55 30 Z' /><circle cx='35' cy='35' r='2' fill='#00b000' /><circle cx='45' cy='35' r='2' fill='#00b000' /><circle cx='40' cy='45' r='5' fill='#00b000' />" break; case 3: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke='white' fill='none' stroke-width='5' d='M25 25 L10 40 L25 55 M55 25 L70 40 L55 55 M45 20 L35 60' />"; break; case 4: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke='none' fill='white' d='M36 30 C43 26 35 17 21 14 C27 29 29 30 34 31 L56 60 L59 58 L34 25' />'"; break; } wordSVG = document.getElementById("word"); svgLetters = []; for(var i = 0; i < guess.length; i++) { svgLetters.push('<svg width="30" height="65"><path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="' + paths[chars.indexOf(guess[i])] + '"/></svg>'); } wordSVG.innerHTML = svgLetters.join(""); wrongContainer = document.getElementById("wrong"); wrongContainer.innerHTML = wrongGuesses.join(""); height = 0 * 37.0; drop(); clearInterval(next); }, 2000); } } } } var r = document.getElementById("restart"); var rctx = r.getContext("2d"); rctx.beginPath(); rctx.lineWidth = "3"; rctx.arc(50, 50, 30, 0, 1.72 * Math.PI); rctx.lineTo(72, 23); rctx.lineTo(80, 33); rctx.lineTo(66, 31); rctx.lineTo(72, 23); rctx.stroke(); r.addEventListener("click", retry); function retry() { playState = "playing"; category = ~~(Math.random() * words.length); word = words[category][~~(Math.random() * words[category].length)]; catSVG = document.getElementById("category"); guess = []; wrong = 0; totalGuesses = "" wrongGuesses = []; for(var i = 0; i < word.length; i++) { guess.push("_"); } switch(category) { case 0: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke-width='2' stroke='none' fill='white' d='M28 28 C19 30 13 67 60 60 C73 30 42 12 28 27' /><path stroke-width='2' stroke='white' fill='none' d='M28 28 L20 22 M28 28 L 28 20 M28 28 L 24 20 M28 28 L 21 28' /><circle cx='40' cy='40' r='1' fill='#00b000' /><circle cx='49' cy='34' r='1' fill='#00b000' /><circle cx='39' cy='48' r='1' fill='#00b000' /><circle cx='32' cy='38' r='1' fill='#00b000' /><circle cx='51' cy='45' r='1' fill='#00b000' /><circle cx='56' cy='40' r='1' fill='#00b000' /><circle cx='50' cy='52' r='1' fill='#00b000' /><circle cx='38' cy='29' r='1' fill='#00b000' /><circle cx='30' cy='46' r='1' fill='#00b000' />" break; case 1: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><circle cx='40' cy='40' r='25' fill='white' /><path stroke-width='2' stroke='#00b000' fill='none' d='M40 0 L40 80 M0 40 L80 40' /><path stroke-width='2' stroke='#00b000' fill='none' d='M 60 20 a 20 17 93 1 0 14 38' /><path stroke-width='2' stroke='#00b000' fill='none' d='M 7 20 a 20 17 93 1 1 14 38' />" break; case 2: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><circle cx='40' cy='40' r='20' fill='white' /><path stroke-width='2' stroke='none' fill='white' d='M25 30 L30 15 L35 25 L45 25 L50 15 L55 30 Z' /><circle cx='35' cy='35' r='2' fill='#00b000' /><circle cx='45' cy='35' r='2' fill='#00b000' /><circle cx='40' cy='45' r='5' fill='#00b000' />" break; case 3: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke='white' fill='none' stroke-width='5' d='M25 25 L10 40 L25 55 M55 25 L70 40 L55 55 M45 20 L35 60' />"; break; case 4: catSVG.innerHTML = "<circle cx='40' cy='40' r='40' fill='#00b000' /><path stroke='none' fill='white' d='M36 30 C43 26 35 17 21 14 C27 29 29 30 34 31 L56 60 L59 58 L34 25' />'"; break; } wordSVG = document.getElementById("word"); svgLetters = []; for(var i = 0; i < guess.length; i++) { svgLetters.push('<svg width="30" height="65"><path fill="none" stroke="black" stroke-width="3" stroke-linecap="round" d="' + paths[chars.indexOf(guess[i])] + '"/></svg>'); } wordSVG.innerHTML = svgLetters.join(""); wrongContainer = document.getElementById("wrong"); wrongContainer.innerHTML = wrongGuesses.join(""); height = 0 * 37.0; drop(); game.style.display = "block"; } </script> </body> </html>
Folds	21,609
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL3V7_u_CAw
Votes	208
Spin-Offs	14
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Dark Owl
Author Name	DarkOwl04
Author ID	kaid_68775452932437457548702
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739369777573
Updated	10 months ago, 1739369784930
Source Deleted	unknown