Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.