“Simon” Piano Game JavaScript Code

Demo: https://kimconnect.com/pianogame.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<style>
body{ 
  background-image: url(http://wallup.net/wp-content/uploads/2016/01/167565-abstract-dark-black_background-digital_art-artwork.png);
  text-align: center;
  background-size: 100%;
  font-family: 'VT323', monospace;
}

ul {
	height:360px; width:540px;
  margin:auto auto; padding:20px 45px 0 45px; position:relative; 
  border:1px solid #160801; border-radius:16px; 
  background:-webkit-gradient(linear, right bottom, left top, color-stop(0%,grey), color-stop(100%,grey)), grey;
box-shadow:0 0 50px rgba(0,0,0,0.5) inset, 0 1px rgba(212,152,125,0.2) inset,0 5px 15px rgba(0,0,0,0.5); }
li { margin:0; padding:0; list-style:none; position:relative; float:left; cursor:pointer;}

ul .white {
	height:256px; width:64px; z-index:1;
	border-left:1px solid #bbb;
	border-bottom:1px solid #bbb;
	border-radius:0 0 5px 5px;
  background: white;
  box-shadow:-1px -1px 2px rgba(255,255,255,0) inset, 0 -5px 2px 3px rgba(0,0,0,0.6) inset, 0 2px 4px rgba(0,0,0,1);
  
}

ul .white:active {
	border-top:1px solid grey;
	border-left:1px solid grey;
	border-bottom:1px solid grey;
  background: red!important;
}

.black {
	height:128px; width:32px; margin:0 0 0 -16px; z-index:2;
	border:1px solid #000;
	border-radius:0 0 3px 3px;
	box-shadow:-1px -1px 2px rgba(255,255,255,0) inset, 0 -5px 2px 3px rgba(0,0,0,0.6) inset, 0 2px 4px rgba(0,0,0,1);
  background: black;
}

.black:active {
  background: yellow!important;
}

.d,.e,.g,.a,.b { margin:0 0 0 -16px;  }

ul li:first-child { border-radius:5px 0 5px 5px; }
ul li:last-child { border-radius:0 5px 5px 5px; }

.display{
  width: 200px;
  height: 40px;
  display: inline-block;
  font-weight: bold;
  background: #99997d;
  box-shadow: inset 10px 10px 20px 1px #99997d,inset -10px -10px 10px 1px #99997d;
  border-radius: 5px;
  overflow: auto;
}

.displayLight{
  background: #cccc00;
  box-shadow: inset 10px 10px 20px 1px #ffff33,inset -10px -10px 10px 1px #ffff33;
}

.button{
  cursor:pointer;
  box-shadow:-1px -1px 3px rgba(255,255,255,0.2) inset, 0 -2px 3px 3px rgba(0,0,0,0.6) inset, 0 1px 2px rgba(0,0,0,0.5);
}

.pressed{
  cursor:pointer;
  box-shadow:-1px -1px 1px rgba(255,255,255,0.2) inset , 0 -1px 1px 1px rgba(0,0,0,0.6) inset, 0 1px 1px rgba(0,0,0,0.5);
  font-weight: bold;
}

</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var a = new Audio('./piano/a.mp3');
var as = new Audio('./piano/as.mp3');
var b = new Audio('./piano/b.mp3');
var c = new Audio('./piano/c.mp3');
var cs = new Audio('./piano/cs.mp3');
var d = new Audio('./piano/d.mp3');
var ds = new Audio('./piano/ds.mp3');
var e = new Audio('./piano/e.mp3');
var f = new Audio('./piano/f.mp3');
var fs = new Audio('./piano/fs.mp3');
var g = new Audio('./piano/g.mp3');
var gs = new Audio('./piano/gs.mp3');
var bell= new Audio('./piano/bellsound.mp3');
  
$a = $(".a");
$as = $(".as");
$b = $(".b");
$c = $(".c");
$cs = $(".cs");
$d = $(".d");
$ds = $(".ds");
$e = $(".e");
$f = $(".f");
$fs = $(".fs");
$g = $(".g");
$gs = $(".gs");
$key=$(".key");
$display=$(".display");
$onoff=$(".onoff");
$strict=$(".strict");  
  
  var status=0;
  var strict=0;
  var sequence, notes;
  var speed;  // 1:1200ms, 2:750ms, 3:300ms
  var level;
  var input;
  var noteCount;
  var repeat;
  
$onoff.click(function(){
  if (!status){
    status=1;
    $onoff.removeClass("button");
    $onoff.addClass("pressed");
    $display.text("STARTING...");
    $display.addClass("displayLight");
    initGame();    
  } else {
    status=0;
    $onoff.addClass("button");
    $onoff.removeClass("pressed");
    $display.text("STATUS: OFF");
    $display.removeClass("displayLight");
  }
});

  $strict.click(function(){
      if (!strict){
      strict=1;
      $strict.removeClass("button");
      $strict.addClass("pressed");
    } else {
      strict=0;
      $strict.addClass("button");
      $strict.removeClass("pressed");
    }
  });
  
  function initGame(){
    speed=1250;
    level=1;
    input=[];
    noteCount=0;
    sequence=[];
    repeat=1;
    for (i=0;i<30;i++){
        sequence.push(Math.floor(Math.random() * 12) + 1);
    }
  challenge(level);
  }
  
  function challenge(levelNumber){
    notes=sequence.slice(0,levelNumber);
    play(notes);
//    waitInput();
  }

  function play(arr){
    $display.text("STATUS: LEVEL "+level+" OF 30");
    switch (level){
      case 2: speed=800; break;
      case 5: speed=650; break;
      case 8: speed=500; break;
      case 10: speed=350; break;
      case 12: speed=250; break;
      case 15: speed=200; break;
      case 20: speed=150; break;
      case 25: speed=100; break;
      case 27: speed=85; break;
      case 29: speed=70;
                 }
   //    The for loop requires a special function to make timed delays effective
    var i = 0;        
    function loopWait () {
       setTimeout(function () {         
          pickNote(arr[i],speed*0.9);         
          i++;
          if (i < arr.length) {    
             loopWait();            
          } 
       }, speed)        
    }
    loopWait(); 

    window.setTimeout(function() {
          repeat=0;
          }, (speed*0.9)*arr.length);    
    
  }

  function pickNote(val,delay){
    var sound, lightedKey;
    switch(val){ 
      case 1: sound=c; 
        $c.css("background",'red'); 
        window.setTimeout(function() {
          $c.css("background",'white');
          }, delay);
        break;
      case 2: sound=cs;$cs.css("background",'yellow'); 
        window.setTimeout(function() {
          $cs.css("background",'black');
          }, delay);
        break;
      case 3: sound=d;$d.css("background",'red'); 
        window.setTimeout(function() {
          $d.css("background",'white');
          }, delay);
        break;
      case 4: sound=ds;$ds.css("background",'yellow'); 
        window.setTimeout(function() {
          $ds.css("background",'black');
          }, delay);
        break;
      case 5: sound=e;$e.css("background",'red'); 
        window.setTimeout(function() {
          $e.css("background",'white');
          }, delay);
        break;
      case 6: sound=f;$f.css("background",'red');
        window.setTimeout(function() {
          $f.css("background",'white');
          }, delay);
        break;
      case 7: sound=fs;$fs.css("background",'yellow');
        window.setTimeout(function() {
          $fs.css("background",'black');
          }, delay);
        break;
      case 8: sound=g;$g.css("background",'red'); 
        window.setTimeout(function() {
          $g.css("background",'white');
          }, delay);
        break;
      case 9: sound=gs;$gs.css("background",'yellow');
        window.setTimeout(function() {
          $gs.css("background",'black');
          }, delay);
        break;
      case 10: sound=a;$a.css("background",'red');
        window.setTimeout(function() {
          $a.css("background",'white');
          }, delay);
        break;
      case 11: sound=as;$as.css("background",'yellow');
        window.setTimeout(function() {
          $as.css("background",'black');
          }, delay);
        break;
      case 12: sound=b;$b.css("background",'red');
        window.setTimeout(function() {
          $b.css("background",'white');
          }, delay);
    }    
    sound.pause(); 
    sound.currentTime = 0;
    sound.load(); 
    sound.play();     
  }

// Listening to user inputs  
$key.mousedown(function(event){
  var key= parseInt($(this).attr("value"));
  var audio;  
  if (!repeat){
  switch(key){
    case 1: audio=c;break;
      case 2: audio=cs;break;
      case 3: audio=d;break;
      case 4: audio=ds;break;
      case 5: audio=e;break;
      case 6: audio=f;break;
      case 7: audio=fs;break;
      case 8: audio=g;break;
      case 9: audio=gs;break;
      case 10: audio=a;break;
      case 11: audio=as;break;
      case 12: audio=b;
            };
  audio.pause(); 
  audio.currentTime = 0;
  audio.load(); 
  audio.play();  
  
  if (status){
  input.push(key);
  if(input.length==notes.length){ checkInput();} 
  else if (input[input.length-1]==notes[noteCount++]){
    $display.text("CORRECT!");
  }  else if (strict){
    window.setTimeout(function() {
      initGame();
    }, speed);    
  } else {
    bell.play();
    $display.text("TRY AGAIN...");
    input=[];
    noteCount=0;
    repeat=1;
    window.setTimeout(function() {
      challenge(level);
    }, speed);
       
  }
  }
  
  } // ends repeat check
}); // ends key.mousedown function 
  
  function checkInput(){
  if (JSON.stringify(notes)==JSON.stringify(input)){
    input=[];
    noteCount=0;
    $display.text("LEVELING UP!");    
    challenge(++level);       
  } 
    
    else if (strict){
    bell.play();
    $display.text("STRICT MODE: GAME RESETTING");
    window.setTimeout(function() {
    initGame();
    }, speed);    
  }    
  else {
    bell.play();
    $display.text("INCORRECT!");
    input=[];
    noteCount=0;
    challenge(level);         
  }
  
}  
  
}); // ends $(document).ready(function(){
</script>



</head>
<body>
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<ul class="set">
  <div><a class="button btn btn-danger onoff">ON / OFF</a>&nbsp&nbsp<a class="btn display">STATUS: OFF</a>&nbsp&nbsp<a class="button btn btn-primary strict">STRICT MODE</a></div>
  <hr>
  <div class="center">
  <li class="key white c" value="1">C</li>
  <li class="key black cs"value="2">C#</li>
  <li class="key white d"value="3">D</li>
  <li class="key black ds"value="4">D#</li>
  <li class="key white e"value="5">E</li>
  <li class="key white f"value="6">F</li>
  <li class="key black fs"value="7">F#</li>
  <li class="key white g"value="8">G</li>
  <li class="key black gs"value="9">G#</li>
  <li class="key white a"value="10">A</li>
  <li class="key black as"value="11">A#</li>
  <li class="key white b"value="12">B</li>
  </div>
</ul>
<h4>Piano Game - Prototype</h4>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *