robstenzinger/makey-game-animal-edition.html

## makey-game-animal-edition.html
<!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>
	<!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>