/makey-game-animal-edition.html
Created Sep 2, 2017
Display and feedback for an operation-like game using the Makey-makey, based on: https://makercamp.com/makey-game
| <!DOCTYPE html> | |
| <html lang="en-US" prefix="og: http://ogp.me/ns#"> | |
| <head> | |
| <title>Makey Makey Animal Hospital</title> | |
| <!-- | |
| based on: https://makercamp.com/makey-game | |
| --> | |
| <script> | |
| var key_up = "38"; | |
| var key_down = "40"; | |
| var key_left = "37"; | |
| var key_right = "39"; | |
| var key_space = "32"; | |
| // setup the map of which animal gets which input from the makey-makey | |
| var puppyKeys = [key_up, key_down, key_left]; | |
| var kittyKeys = [key_right, key_space]; | |
| function handleKeyDown(e) { | |
| console.log(e.keyCode); | |
| if(kittyKeys.indexOf(e.keyCode.toString()) > -1){ | |
| document.body.style.backgroundColor = "red"; | |
| document.getElementById('situation_ok_kitty').style.display = "none"; | |
| document.getElementById('situation_ouch_kitty').style.display = ""; | |
| document.getElementById('Buzzer').play(); | |
| }else if(puppyKeys.indexOf(e.keyCode.toString()) > -1){ | |
| document.body.style.backgroundColor = "red"; | |
| document.getElementById('situation_ok_puppy').style.display = "none"; | |
| document.getElementById('situation_ouch_puppy').style.display = ""; | |
| document.getElementById('Buzzer').play(); | |
| } | |
| } | |
| function handleKeyUp() { | |
| document.body.style.backgroundColor = "green"; | |
| document.getElementById('Buzzer').pause(); | |
| document.getElementById('Buzzer').load(); | |
| document.getElementById('situation_ok_puppy').style.display = ""; | |
| document.getElementById('situation_ok_kitty').style.display = ""; | |
| document.getElementById('situation_ouch_puppy').style.display = "none"; | |
| document.getElementById('situation_ouch_kitty').style.display = "none"; | |
| } | |
| document.addEventListener("keydown", handleKeyDown, false); | |
| document.onkeyup = function() {handleKeyUp()}; | |
| </script> | |
| <style> | |
| body{ | |
| background-color: green; | |
| font-family: sans-serif; | |
| display: grid; | |
| height:100%; | |
| } | |
| ul{ | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| grid-auto-rows: 1fr; | |
| grid-gap: 1rem; | |
| list-style-type: none; | |
| } | |
| .animal{ | |
| text-align: center; | |
| font-size: 6em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <audio id="Buzzer"> | |
| <source src="BUZZER.mp3"> | |
| </audio> | |
| <ul> | |
| <li class="animal" id="puppy"> | |
| <span class="name">Puppy is</span> | |
| <span class="situation_ok" id="situation_ok_puppy">OK</span> | |
| <span class="situation_ouch" id="situation_ouch_puppy">having a bad day!</span> | |
| </li> | |
| <li class="animal" id="kitty"> | |
| <span class="name">Kitty is</span> | |
| <span class="situation_ok" id="situation_ok_kitty">OK</span> | |
| <span class="situation_ouch" id="situation_ouch_kitty">having a bad day!</span> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment