script.js

/* If you're feeling fancy you can add interactivity 
    to your site with Javascript */

// global constants
var clueHoldTime = 1000; //how long to hold each clue's light/sound
// prints "hi" in the browser's dev tools console
const cluePauseTime = 333; //how long to pause in between clues
const nextClueWaitTime = 1000; //how long to wait before starting playback of the clue sequence
var pattern = [] //5, 2, 4, 3, 2, 1, 2, 4];
var progress = 0; 
var gamePlaying = false;
var tonePlaying = false;
var volume = 0.5;
var guessCounter = 0;
var guesses = 2;
var audio;
//var timeLeft;

function startGame(){
    //initialize game variables
  
    clueHoldTime = 1000;
    guesses = 2;
    pattern = [];
    //timeLeft = 100;
    for(var i = 0 ;  i < 8 ; i++) {
      pattern.push(1 + Math.floor(Math.random() * 5));
    }
    console.log(pattern);
    progress = 0;
    gamePlaying = true;
    // swap the Start and Stop buttons
    document.getElementById("startBtn").classList.add("hidden");
    document.getElementById("stopBtn").classList.remove("hidden");
    playClueSequence();////
  
   // setInterval(function(){ timeLeft--; document.getElementById('timeLeft').html = timeLeft}, 1000);
}

function stopGame(){
  gamePlaying = false;
  
  document.getElementById("startBtn").classList.remove("hidden");
  document.getElementById("stopBtn").classList.add("hidden");
  
}
// Sound Synthesis Functions
const freqMap = {
  1: 261.6,
  2: 329.6,
  3: 392,
  4: 466.2,
  5: 587.3
}

const audioMap = {
  1: "https://cdn.glitch.com/89e7a594-4138-4a35-bff8-d94f53276ce7%2Fbensound-ukulele.mp3?v=1616641717701",
  2: "https://cdn.glitch.com/89e7a594-4138-4a35-bff8-d94f53276ce7%2Fbensound-acousticbreeze.mp3?v=1616643324394",
  3: "https://cdn.glitch.com/89e7a594-4138-4a35-bff8-d94f53276ce7%2Fbensound-goinghigher.mp3?v=1616643340755",
  4: "https://cdn.glitch.com/89e7a594-4138-4a35-bff8-d94f53276ce7%2Fbensound-hey.mp3?v=1616643345626",
  5: "https://cdn.glitch.com/89e7a594-4138-4a35-bff8-d94f53276ce7%2Fbensound-littleidea.mp3?v=1616643368851"
}
function playTone(btn,len){ 
  o.frequency.value = freqMap[btn]
  g.gain.setTargetAtTime(volume,context.currentTime + 0.05,0.025)
  tonePlaying = true
  setTimeout(function(){
    stopTone()
  },len)
}
function startTone(btn){
  if(!tonePlaying){
    var link = audioMap[btn];
    if(link) {
      audio = new Audio(link);
      audio.play();
      
    }
    else {
      o.frequency.value = freqMap[btn]
      g.gain.setTargetAtTime(volume,context.currentTime + 0.05,0.025)
      tonePlaying = true
    }
  }
}
function stopTone(){
  if(audio) {
    audio.pause();
  }
    g.gain.setTargetAtTime(0,context.currentTime + 0.05,0.025)
    tonePlaying = false
}

//Page Initialization
// Init Sound Synthesizer
var context = new AudioContext()
var o = context.createOscillator()
var g = context.createGain()
g.connect(context.destination)
g.gain.setValueAtTime(0,context.currentTime)
o.connect(g)
o.start(0)

function lightButton(btn){
  document.getElementById("button"+btn).classList.add("lit")
}
function clearButton(btn){
  document.getElementById("button"+btn).classList.remove("lit")
  stopTone();
}

function playSingleClue(btn){
  if(gamePlaying){
    lightButton(btn);
    playTone(btn,clueHoldTime);
    setTimeout(clearButton,clueHoldTime,btn);
  }
}

function playClueSequence(){
  guessCounter = 0;
  let delay = nextClueWaitTime; //set delay to initial wait time
  for(let i=0;i<=progress;i++){ // for each clue that is revealed so far
    console.log("play single clue: " + pattern[i] + " in " + delay + "ms")
    setTimeout(playSingleClue,delay,pattern[i]) // set a timeout to play that clue
    delay += clueHoldTime
    delay += cluePauseTime;
  }
  clueHoldTime -= 50;
}
function loseGame(){
  if(guesses == 0) {
    stopGame();
    alert("Game Over. You lost.");
  }
  console.log(guesses + " available")
  guesses--;
}
function winGame(){
  stopGame();
  alert("Game Over. You Won!");
}

function guess(btn){
  console.log("user guessed: " + btn);
  if(!gamePlaying){
    return;
  }
  if(pattern[guessCounter] == btn){
      if(guessCounter == progress){
        if(progress == pattern.length - 1){
            winGame();
          }else{
            progress++;
            playClueSequence();
          }
      }else{
            guessCounter++;
      }
  }else{
    loseGame();
  }
  // add game logic here
}