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