-
-
Save Nasafato/2e377bb91b7509c858c5 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/hokebe
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> | |
| <style> | |
| body { | |
| background-color:black; | |
| } | |
| </style> | |
| <title> | |
| </title> | |
| <style id="jsbin-css"> | |
| @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); | |
| tr { | |
| color: white; | |
| text-align: center; | |
| } | |
| #batteryButton { | |
| color: red; | |
| background:black; | |
| } | |
| #question-box { | |
| color: white; | |
| } | |
| .ship { | |
| visibility: hidden; | |
| } | |
| #score{ | |
| color:green; | |
| font-size:40px; | |
| text-align:center; | |
| } | |
| #instructions { | |
| color: cyan; | |
| } | |
| #background-text { | |
| color: yellow; | |
| } | |
| #begin-instructions { | |
| height: 100vh; | |
| } | |
| body { | |
| font-family: "Lucida Console", Monaco, monospace; | |
| font-size: 20px; | |
| } | |
| #startGameButton { | |
| background-color: #ffff00; | |
| border: 4px solid #666; | |
| color: #000; | |
| text-decoration; | |
| font-weight: 900; | |
| } | |
| </style> | |
| </head> | |
| } | |
| <body> | |
| <div id="begin-instructions"> | |
| <div id="instructions"> | |
| <h2>A long time ago in a galaxy far, far away...</h2> | |
| </div> | |
| <div id="background-text"> | |
| You are Han Solo, the most famous smuggler in the galaxy. Due to a turn of bad luck, you are currently stuck in the solar system. Help Han make enough money to get home by guiding him to the correct planets where work can be found. | |
| </div> | |
| <button onclick="startGame();" id="startGameButton">Start Game</button> | |
| <div id="soundtrack"></div> | |
| </div> | |
| <table style="width:5%"> | |
| <tr> | |
| <td><div class="battery-label">Ship Battery</div> <i id="batteryButton" class="fa fa-battery-full fa-4x"></i></td> | |
| <td colspan=3> <div id="question-box"> | |
| = | |
| </div></td> | |
| <td>Total Bounty <div id="score">$0</div></td> | |
| </tr> | |
| <tr height=50></tr> | |
| <tr> | |
| <th>Earth </th> | |
| <th>Jupiter</th> | |
| <th>Mercury</th> | |
| <th>Pluto</th> | |
| <th>Uranus</th> | |
| </tr> | |
| <tr> <!--First row---> | |
| <td> | |
| <img onclick="next('earth');" src=https://static.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg width="200"heigth="200"> | |
| </td> | |
| <td> | |
| <img onclick="next('jupiter');" src=http://www.kimmana.com/wp-content/uploads/2014/09/jupiter.jpg width="200" height="200"> | |
| </td> | |
| <td> | |
| <img onclick="next('mercury');" src=https://41.media.tumblr.com/9cacae26deb3d4aeae50a07e090618b6/tumblr_inline_np8qv0v9Dj1tn0tli_540.jpg width="200" | |
| height="200"> | |
| </td> | |
| <td> | |
| <img onclick="next('pluto');" src=http://ww1.hdnux.com/photos/37/60/53/8325868/5/920x1240.jpg width="200" | |
| height="200"> </td> | |
| <td> | |
| <img onclick="next('uranus');" src=https://upload.wikimedia.org/wikipedia/commons/e/ea/Uranus_(Edited).jpg width="200" | |
| height="200"> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><img id="earth" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42"class="ship"></img></td> | |
| <td><img id="jupiter" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42"class="ship"></img></td> | |
| <td><img id="mercury" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42" class="ship"></img></td> | |
| <td><img id="pluto" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42"class="ship"></img></td> | |
| <td><img id="uranus" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42"class="ship"></img></td> | |
| </tr> | |
| <tr height=50></tr> | |
| <tr> | |
| <th>Saturn</th> | |
| <th>Neptune</th> | |
| <th>Venus</th> | |
| <th>Mars</th> | |
| <th>Sun</th> | |
| </tr> | |
| <tr> <!--Second row---> | |
| <td> | |
| <img onclick="next('saturn');" src=http://hermeshelix.com/images/sci-tech/space_0012_saturn_2560.jpg width="200" | |
| height="200"> | |
| </td> | |
| <td> | |
| <img onclick="next('neptune');" src=http://i1.nyt.com/images/2015/07/14/science/14afterPluto2/14afterPluto2-master1050.jpg width="200" | |
| height="200"> | |
| </td> | |
| <td> | |
| <img onclick="next('venus');" src=http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2005/08/artist_s_impression_of_the_venusian_surface/10333953-2-eng-GB/Artist_s_impression_of_the_Venusian_surface.jpg width="200" | |
| height="200"> | |
| </td> | |
| <td> | |
| <img onclick="next('mars');" src=https://anaivethinker.files.wordpress.com/2014/10/mars-hubble-giant-1.jpg width="200" | |
| height="200"> </td> | |
| <td> | |
| <img onclick="next('sun')" | |
| src=http://i.huffpost.com/gen/1067332/images/o-WHAT-IF-THE-SUN-DISAPPEARED-facebook.jpg width="200" height="200"> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><img id="saturn" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42" class="ship"></img></td> | |
| <td><img id="neptune" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42"class="ship"></img></td> | |
| <td><img id="venus" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42"class="ship"></img></td> | |
| <td><img id="mars" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42"class="ship"></img></td> | |
| <td><img id="sun" src="http://www.blastr.com/sites/blastr/files/mil-fal-2.jpg" height="42" width="42"class="ship"></img></td> | |
| </tr> | |
| </table> | |
| <script id="jsbin-javascript"> | |
| function startGame() { | |
| var instructions = document.getElementById("begin-instructions"); | |
| instructions.style.visibility = "hidden"; | |
| instructions.style.height = 0; | |
| player.stopVideo(); | |
| } | |
| var score = 0; | |
| var currentPlanet = 'earth'; | |
| var sound = new Audio("http://www.ericscudder.com/cats/jet.wav"); | |
| var cashSound = new Audio("http://www.wav-sounds.com/various/cashtill.wav"); | |
| function next(planet){ | |
| document.getElementById(currentPlanet).style.visibility = 'hidden'; | |
| document.getElementById(planet).style.visibility = 'visible'; | |
| currentPlanet = planet; | |
| sound.play(); | |
| sound.currentTime = 0; | |
| if (planet == answers[currentQuestionIndex]) { | |
| score += 100; | |
| cashSound.play(); | |
| sound.currentTime = 0; | |
| document.getElementById("score").innerHTML = "$" + score; | |
| nextQuestion(); | |
| return; | |
| } | |
| console.log("clicked"); | |
| var battery = document.getElementById("batteryButton"); | |
| // If battery is full, then set it to 3/4 | |
| if(battery.getAttribute("class")=="fa fa-battery-full fa-4x"){ | |
| battery.setAttribute("class", "fa fa-battery-three-quarters fa-4x"); | |
| } else if( battery.getAttribute("class") == "fa fa-battery-three-quarters fa-4x") { | |
| battery.setAttribute("class", "fa fa-battery-half fa-4x"); | |
| } else if(battery.getAttribute("class")== "fa fa-battery-half fa-4x") { | |
| battery.setAttribute("class", "fa fa-battery-quarter fa-4x"); | |
| } else if(battery.getAttribute("class")=="fa fa-battery-quarter fa-4x"){ | |
| battery.setAttribute("class", "fa fa-battery-empty fa-4x"); | |
| } else { | |
| var restart = confirm("You Are Out Of Fuel. Your final haul is $" + score); | |
| if (restart === true) { | |
| battery.setAttribute("class", "fa fa-battery-full fa-4x"); | |
| document.getElementById(currentPlanet).style.visibility = 'hidden'; | |
| score = 0; | |
| document.getElementById("score").innerHTML = "$" + score; | |
| } else { | |
| // do nothing | |
| } | |
| } | |
| } | |
| var questions = [ | |
| "I am looking for the infamous Jar Jar Binks, who I know can be found on the only planet in the solar system that has fish. I'm willing to pay a handsome bounty if you bring him to me alive.", | |
| "An alien stole gold from Earth and made its way to the Sun. We know that it's currently hiding at the closest planet from the Sun. Help us recover the gold and we'll pay you a nice prize.", | |
| " What planet is famous for the beautiful rings that surround it?", | |
| "What is the hottest planet in our solar system?", | |
| "What planet is known as the red planet?", | |
| "Ganymede is a moon of which planet?", | |
| "Olympus Mons is a large volcanic mountain on which planet?", | |
| ]; | |
| var answers = [ | |
| 'earth', | |
| 'mercury', | |
| 'saturn', | |
| 'venus', | |
| 'mars', | |
| 'jupiter', | |
| 'mars' | |
| ]; | |
| var currentQuestionIndex = 0; | |
| var maxIndex = questions.length - 1; //2 | |
| function nextQuestion() { | |
| // you're on the last question | |
| if (currentQuestionIndex === maxIndex) { | |
| currentQuestionIndex = 0; | |
| } else { | |
| currentQuestionIndex = currentQuestionIndex + 1; | |
| } | |
| document.getElementById("question-box").innerHTML = questions[currentQuestionIndex]; | |
| } | |
| document.getElementById("question-box").innerHTML = questions[0]; | |
| var tag= document.createElement('script'); | |
| tag.src = "https://www.youtube.com/iframe_api"; | |
| var firstScriptTag = document.getElementsByTagName('script')[0]; | |
| firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | |
| var player; | |
| function onYouTubeIframeAPIReady() { | |
| player = new YT.Player('soundtrack', { | |
| height: '0', | |
| width: '0', | |
| videoId: 'yptp1yCCRWk', | |
| events: { | |
| 'onReady': onPlayerReady | |
| } | |
| }); | |
| } | |
| function onPlayerReady(event) { | |
| event.target.playVideo(); | |
| } | |
| function stopVideo() { | |
| player.stopVideo(); | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); | |
| tr { | |
| color: white; | |
| text-align: center; | |
| } | |
| #batteryButton { | |
| color: red; | |
| background:black; | |
| } | |
| #question-box { | |
| color: white; | |
| } | |
| .ship { | |
| visibility: hidden; | |
| } | |
| #score{ | |
| color:green; | |
| font-size:40px; | |
| text-align:center; | |
| } | |
| #instructions { | |
| color: cyan; | |
| } | |
| #background-text { | |
| color: yellow; | |
| } | |
| #begin-instructions { | |
| height: 100vh; | |
| } | |
| body { | |
| font-family: "Lucida Console", Monaco, monospace; | |
| font-size: 20px; | |
| } | |
| #startGameButton { | |
| background-color: #ffff00; | |
| border: 4px solid #666; | |
| color: #000; | |
| text-decoration; | |
| font-weight: 900; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function startGame() { | |
| var instructions = document.getElementById("begin-instructions"); | |
| instructions.style.visibility = "hidden"; | |
| instructions.style.height = 0; | |
| player.stopVideo(); | |
| } | |
| var score = 0; | |
| var currentPlanet = 'earth'; | |
| var sound = new Audio("http://www.ericscudder.com/cats/jet.wav"); | |
| var cashSound = new Audio("http://www.wav-sounds.com/various/cashtill.wav"); | |
| function next(planet){ | |
| document.getElementById(currentPlanet).style.visibility = 'hidden'; | |
| document.getElementById(planet).style.visibility = 'visible'; | |
| currentPlanet = planet; | |
| sound.play(); | |
| sound.currentTime = 0; | |
| if (planet == answers[currentQuestionIndex]) { | |
| score += 100; | |
| cashSound.play(); | |
| sound.currentTime = 0; | |
| document.getElementById("score").innerHTML = "$" + score; | |
| nextQuestion(); | |
| return; | |
| } | |
| console.log("clicked"); | |
| var battery = document.getElementById("batteryButton"); | |
| // If battery is full, then set it to 3/4 | |
| if(battery.getAttribute("class")=="fa fa-battery-full fa-4x"){ | |
| battery.setAttribute("class", "fa fa-battery-three-quarters fa-4x"); | |
| } else if( battery.getAttribute("class") == "fa fa-battery-three-quarters fa-4x") { | |
| battery.setAttribute("class", "fa fa-battery-half fa-4x"); | |
| } else if(battery.getAttribute("class")== "fa fa-battery-half fa-4x") { | |
| battery.setAttribute("class", "fa fa-battery-quarter fa-4x"); | |
| } else if(battery.getAttribute("class")=="fa fa-battery-quarter fa-4x"){ | |
| battery.setAttribute("class", "fa fa-battery-empty fa-4x"); | |
| } else { | |
| var restart = confirm("You Are Out Of Fuel. Your final haul is $" + score); | |
| if (restart === true) { | |
| battery.setAttribute("class", "fa fa-battery-full fa-4x"); | |
| document.getElementById(currentPlanet).style.visibility = 'hidden'; | |
| score = 0; | |
| document.getElementById("score").innerHTML = "$" + score; | |
| } else { | |
| // do nothing | |
| } | |
| } | |
| } | |
| var questions = [ | |
| "I am looking for the infamous Jar Jar Binks, who I know can be found on the only planet in the solar system that has fish. I'm willing to pay a handsome bounty if you bring him to me alive.", | |
| "An alien stole gold from Earth and made its way to the Sun. We know that it's currently hiding at the closest planet from the Sun. Help us recover the gold and we'll pay you a nice prize.", | |
| " What planet is famous for the beautiful rings that surround it?", | |
| "What is the hottest planet in our solar system?", | |
| "What planet is known as the red planet?", | |
| "Ganymede is a moon of which planet?", | |
| "Olympus Mons is a large volcanic mountain on which planet?", | |
| ]; | |
| var answers = [ | |
| 'earth', | |
| 'mercury', | |
| 'saturn', | |
| 'venus', | |
| 'mars', | |
| 'jupiter', | |
| 'mars' | |
| ]; | |
| var currentQuestionIndex = 0; | |
| var maxIndex = questions.length - 1; //2 | |
| function nextQuestion() { | |
| // you're on the last question | |
| if (currentQuestionIndex === maxIndex) { | |
| currentQuestionIndex = 0; | |
| } else { | |
| currentQuestionIndex = currentQuestionIndex + 1; | |
| } | |
| document.getElementById("question-box").innerHTML = questions[currentQuestionIndex]; | |
| } | |
| document.getElementById("question-box").innerHTML = questions[0]; | |
| var tag= document.createElement('script'); | |
| tag.src = "https://www.youtube.com/iframe_api"; | |
| var firstScriptTag = document.getElementsByTagName('script')[0]; | |
| firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | |
| var player; | |
| function onYouTubeIframeAPIReady() { | |
| player = new YT.Player('soundtrack', { | |
| height: '0', | |
| width: '0', | |
| videoId: 'yptp1yCCRWk', | |
| events: { | |
| 'onReady': onPlayerReady | |
| } | |
| }); | |
| } | |
| function onPlayerReady(event) { | |
| event.target.playVideo(); | |
| } | |
| function stopVideo() { | |
| player.stopVideo(); | |
| } | |
| </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
| @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); | |
| tr { | |
| color: white; | |
| text-align: center; | |
| } | |
| #batteryButton { | |
| color: red; | |
| background:black; | |
| } | |
| #question-box { | |
| color: white; | |
| } | |
| .ship { | |
| visibility: hidden; | |
| } | |
| #score{ | |
| color:green; | |
| font-size:40px; | |
| text-align:center; | |
| } | |
| #instructions { | |
| color: cyan; | |
| } | |
| #background-text { | |
| color: yellow; | |
| } | |
| #begin-instructions { | |
| height: 100vh; | |
| } | |
| body { | |
| font-family: "Lucida Console", Monaco, monospace; | |
| font-size: 20px; | |
| } | |
| #startGameButton { | |
| background-color: #ffff00; | |
| border: 4px solid #666; | |
| color: #000; | |
| text-decoration; | |
| font-weight: 900; | |
| } |
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
| function startGame() { | |
| var instructions = document.getElementById("begin-instructions"); | |
| instructions.style.visibility = "hidden"; | |
| instructions.style.height = 0; | |
| player.stopVideo(); | |
| } | |
| var score = 0; | |
| var currentPlanet = 'earth'; | |
| var sound = new Audio("http://www.ericscudder.com/cats/jet.wav"); | |
| var cashSound = new Audio("http://www.wav-sounds.com/various/cashtill.wav"); | |
| function next(planet){ | |
| document.getElementById(currentPlanet).style.visibility = 'hidden'; | |
| document.getElementById(planet).style.visibility = 'visible'; | |
| currentPlanet = planet; | |
| sound.play(); | |
| sound.currentTime = 0; | |
| if (planet == answers[currentQuestionIndex]) { | |
| score += 100; | |
| cashSound.play(); | |
| sound.currentTime = 0; | |
| document.getElementById("score").innerHTML = "$" + score; | |
| nextQuestion(); | |
| return; | |
| } | |
| console.log("clicked"); | |
| var battery = document.getElementById("batteryButton"); | |
| // If battery is full, then set it to 3/4 | |
| if(battery.getAttribute("class")=="fa fa-battery-full fa-4x"){ | |
| battery.setAttribute("class", "fa fa-battery-three-quarters fa-4x"); | |
| } else if( battery.getAttribute("class") == "fa fa-battery-three-quarters fa-4x") { | |
| battery.setAttribute("class", "fa fa-battery-half fa-4x"); | |
| } else if(battery.getAttribute("class")== "fa fa-battery-half fa-4x") { | |
| battery.setAttribute("class", "fa fa-battery-quarter fa-4x"); | |
| } else if(battery.getAttribute("class")=="fa fa-battery-quarter fa-4x"){ | |
| battery.setAttribute("class", "fa fa-battery-empty fa-4x"); | |
| } else { | |
| var restart = confirm("You Are Out Of Fuel. Your final haul is $" + score); | |
| if (restart === true) { | |
| battery.setAttribute("class", "fa fa-battery-full fa-4x"); | |
| document.getElementById(currentPlanet).style.visibility = 'hidden'; | |
| score = 0; | |
| document.getElementById("score").innerHTML = "$" + score; | |
| } else { | |
| // do nothing | |
| } | |
| } | |
| } | |
| var questions = [ | |
| "I am looking for the infamous Jar Jar Binks, who I know can be found on the only planet in the solar system that has fish. I'm willing to pay a handsome bounty if you bring him to me alive.", | |
| "An alien stole gold from Earth and made its way to the Sun. We know that it's currently hiding at the closest planet from the Sun. Help us recover the gold and we'll pay you a nice prize.", | |
| " What planet is famous for the beautiful rings that surround it?", | |
| "What is the hottest planet in our solar system?", | |
| "What planet is known as the red planet?", | |
| "Ganymede is a moon of which planet?", | |
| "Olympus Mons is a large volcanic mountain on which planet?", | |
| ]; | |
| var answers = [ | |
| 'earth', | |
| 'mercury', | |
| 'saturn', | |
| 'venus', | |
| 'mars', | |
| 'jupiter', | |
| 'mars' | |
| ]; | |
| var currentQuestionIndex = 0; | |
| var maxIndex = questions.length - 1; //2 | |
| function nextQuestion() { | |
| // you're on the last question | |
| if (currentQuestionIndex === maxIndex) { | |
| currentQuestionIndex = 0; | |
| } else { | |
| currentQuestionIndex = currentQuestionIndex + 1; | |
| } | |
| document.getElementById("question-box").innerHTML = questions[currentQuestionIndex]; | |
| } | |
| document.getElementById("question-box").innerHTML = questions[0]; | |
| var tag= document.createElement('script'); | |
| tag.src = "https://www.youtube.com/iframe_api"; | |
| var firstScriptTag = document.getElementsByTagName('script')[0]; | |
| firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | |
| var player; | |
| function onYouTubeIframeAPIReady() { | |
| player = new YT.Player('soundtrack', { | |
| height: '0', | |
| width: '0', | |
| videoId: 'yptp1yCCRWk', | |
| events: { | |
| 'onReady': onPlayerReady | |
| } | |
| }); | |
| } | |
| function onPlayerReady(event) { | |
| event.target.playVideo(); | |
| } | |
| function stopVideo() { | |
| player.stopVideo(); | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment