Test

by enbette

HTML

<button id='Blue'>blue</button>
<button id='White'>white</button>
<button id='Green'>green</button>
<button id='Brown'>brown</button>

JavaScript

let iceCone = {
  position:{x:0,y:0},
  stack:[]

}

let ice = {
  color :'White'
}

document.getElementById('Blue').addEventListener('click',addIce)
document.getElementById('White').addEventListener('click',addIce)

document.getElementById('Green').addEventListener('touchstart',pourGreen)

document.getElementById('Green').addEventListener('touchend',unpour)

document.getElementById('Green').addEventListener('touchcancel',unpour)


function addIce(e){
  iceCone.stack.push(this.id)
  console.log(iceCone)
  
}

let greenPercent = 0
let totalGreen = 10000
let greenPourInterval

let orangePercent = 0
let totalOrange = 10000
let orangePourInterval

function pourGreen(){
  greenPourInterval = setInterval(pouring,1)
  
}


function unpour(){
  clearInterval(greenPourInterval)
  clearInterval(orangePourInterval)
}

function pouring(){
  greenPercent += 1
  totalGreen -= 1
  console.log(greenPercent, totalGreen)
}