|
|
|
|
|
|
|
|
* |
|
|
* |
|
|
* @constructor |
|
|
* @constructor |
|
|
*/ |
|
|
*/ |
|
|
|
|
|
var root = document.documentElement; |
|
|
|
|
|
var ball = document.getElementById("ball"); |
|
|
|
|
|
|
|
|
var Board = function(scoreBoard) { |
|
|
var Board = function(scoreBoard) { |
|
|
this.cups = []; |
|
|
this.cups = []; |
|
|
this.dom = document.getElementById('cont'); |
|
|
this.dom = document.getElementById('cont'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Board.prototype.disableAll = function() { |
|
|
Board.prototype.disableAll = function() { |
|
|
alert('disableAll'); |
|
|
|
|
|
this.cups.forEach(function(cup) { |
|
|
this.cups.forEach(function(cup) { |
|
|
//cup.classList.add('notActive'); |
|
|
//cup.classList.add('notActive'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
Board.prototype.enableTurn = function() { |
|
|
Board.prototype.enableTurn = function() { |
|
|
alert('enableTurn'); |
|
|
|
|
|
this.cups.forEach(function(cup) { |
|
|
this.cups.forEach(function(cup) { |
|
|
if (cup.getAttribute('marked') === 'false') { |
|
|
if (cup.getAttribute('marked') === 'false') { |
|
|
//cup.classList.remove('notActive'); |
|
|
//cup.classList.remove('notActive'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Board.prototype.getCup = function(code) { |
|
|
Board.prototype.getCup = function(code) { |
|
|
alert(code); |
|
|
|
|
|
|
|
|
ball.classList.add("Shoot"); |
|
|
switch (code) |
|
|
switch (code) |
|
|
{ |
|
|
{ |
|
|
case 'e': |
|
|
case 'e': |
|
|
case 'E': |
|
|
case 'E': |
|
|
//root.style.setProperty('--top325', "-350"+ "px"); |
|
|
|
|
|
ball.style.top = "-350px" |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-350"+ "px"); |
|
|
|
|
|
ball.style.top = "-350px"; |
|
|
ball.style.left = "-155px"; |
|
|
ball.style.left = "-155px"; |
|
|
return "cup1"; |
|
|
return "cup1"; |
|
|
break; |
|
|
break; |
|
|
case 'r': |
|
|
case 'r': |
|
|
case 'R': |
|
|
case 'R': |
|
|
//root.style.setProperty('--top325', "-350"+ "px"); |
|
|
|
|
|
ball.style.top = "-350px" |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-350"+ "px"); |
|
|
|
|
|
ball.style.top = "-350px"; |
|
|
ball.style.left = "-50px"; |
|
|
ball.style.left = "-50px"; |
|
|
|
|
|
return "cup2"; |
|
|
//removeCup("2"); |
|
|
//removeCup("2"); |
|
|
break; |
|
|
break; |
|
|
case 't': |
|
|
case 't': |
|
|
case 'T': |
|
|
case 'T': |
|
|
//root.style.setProperty('--top325', "-350"+ "px"); |
|
|
|
|
|
ball.style.top = "-350px" |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-350"+ "px"); |
|
|
|
|
|
ball.style.top = "-350px"; |
|
|
ball.style.left = "55px"; |
|
|
ball.style.left = "55px"; |
|
|
|
|
|
return "cup3"; |
|
|
//removeCup("3"); |
|
|
//removeCup("3"); |
|
|
break; |
|
|
break; |
|
|
case 'z': |
|
|
case 'z': |
|
|
case 'Z': |
|
|
case 'Z': |
|
|
//root.style.setProperty('--top325', "-350"+ "px"); |
|
|
|
|
|
ball.style.top = "-350px" |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-350"+ "px"); |
|
|
|
|
|
ball.style.top = "-350px"; |
|
|
ball.style.left = "160px"; |
|
|
ball.style.left = "160px"; |
|
|
|
|
|
return "cup4"; |
|
|
//removeCup("4"); |
|
|
//removeCup("4"); |
|
|
break; |
|
|
break; |
|
|
case 'd': |
|
|
case 'd': |
|
|
case 'D': |
|
|
case 'D': |
|
|
//root.style.setProperty('--top325', "-290"+ "px"); |
|
|
|
|
|
ball.style.top = "-290px" |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-290"+ "px"); |
|
|
|
|
|
ball.style.top = "-290px"; |
|
|
ball.style.left = "-100px"; |
|
|
ball.style.left = "-100px"; |
|
|
|
|
|
return "cup5"; |
|
|
//removeCup("5"); |
|
|
//removeCup("5"); |
|
|
break; |
|
|
break; |
|
|
case 'f': |
|
|
case 'f': |
|
|
case 'F': |
|
|
case 'F': |
|
|
//root.style.setProperty('--top325', "-290"+ "px"); |
|
|
|
|
|
ball.style.top = "-290px" |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-290"+ "px"); |
|
|
|
|
|
ball.style.top = "-290px"; |
|
|
ball.style.left = "0px"; |
|
|
ball.style.left = "0px"; |
|
|
|
|
|
return "cup6"; |
|
|
//removeCup("6"); |
|
|
//removeCup("6"); |
|
|
break; |
|
|
break; |
|
|
case 'g': |
|
|
case 'g': |
|
|
case 'G': |
|
|
case 'G': |
|
|
//root.style.setProperty('--top325', "-290"+ "px"); |
|
|
|
|
|
ball.style.top = "-290px" |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-290"+ "px"); |
|
|
|
|
|
ball.style.top = "-290px"; |
|
|
ball.style.left = "110px"; |
|
|
ball.style.left = "110px"; |
|
|
//removeCup("7"); |
|
|
//removeCup("7"); |
|
|
|
|
|
return "cup7"; |
|
|
break; |
|
|
break; |
|
|
case 'c': |
|
|
case 'c': |
|
|
case 'C': |
|
|
case 'C': |
|
|
//root.style.setProperty('--top325', "-220"+ "px"); |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-220"+ "px"); |
|
|
ball.style.top = "-220px" |
|
|
ball.style.top = "-220px" |
|
|
ball.style.left = "-50px"; |
|
|
ball.style.left = "-50px"; |
|
|
//removeCup("8"); |
|
|
//removeCup("8"); |
|
|
|
|
|
return "cup8"; |
|
|
break; |
|
|
break; |
|
|
case 'v': |
|
|
case 'v': |
|
|
case 'V': |
|
|
case 'V': |
|
|
//root.style.setProperty('--top325', "-220"+ "px"); |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-220"+ "px"); |
|
|
ball.style.top = "-220px" |
|
|
ball.style.top = "-220px" |
|
|
ball.style.left = "55px"; |
|
|
ball.style.left = "55px"; |
|
|
//removeCup("9"); |
|
|
//removeCup("9"); |
|
|
|
|
|
return "cup9"; |
|
|
break; |
|
|
break; |
|
|
case 'b': |
|
|
case 'b': |
|
|
case 'B': |
|
|
case 'B': |
|
|
//root.style.setProperty('--top325', "-160"+ "px"); |
|
|
|
|
|
|
|
|
root.style.setProperty('--top325', "-160"+ "px"); |
|
|
ball.style.top = "-160px" |
|
|
ball.style.top = "-160px" |
|
|
ball.style.left = "0px"; |
|
|
ball.style.left = "0px"; |
|
|
//removeCup("10"); |
|
|
//removeCup("10"); |
|
|
|
|
|
return "cup10"; |
|
|
break; |
|
|
break; |
|
|
default: |
|
|
default: |
|
|
break; |
|
|
break; |
|
|
|
|
|
|
|
|
* @param event |
|
|
* @param event |
|
|
*/ |
|
|
*/ |
|
|
Board.prototype.mark = function(event) { |
|
|
Board.prototype.mark = function(event) { |
|
|
alert(this.ready); |
|
|
|
|
|
if (this.ready) { |
|
|
if (this.ready) { |
|
|
var target = document.getElementById(this.getCup(event.key)); |
|
|
var target = document.getElementById(this.getCup(event.key)); |
|
|
alert(target); |
|
|
|
|
|
if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') { |
|
|
if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') { |
|
|
|
|
|
|
|
|
this.onMark(this.cups.indexOf(target)); |
|
|
this.onMark(this.cups.indexOf(target)); |
|
|
this.disableAll(); |
|
|
this.disableAll(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var cup = this.cups[cupId]; |
|
|
var cup = this.cups[cupId]; |
|
|
cup.textContent = label; |
|
|
cup.textContent = label; |
|
|
//cup.classList.add('notActive'); |
|
|
//cup.classList.add('notActive'); |
|
|
|
|
|
|
|
|
// removeCup |
|
|
// removeCup |
|
|
|
|
|
setTimeout(this.cups[cupId].classList.add("fadeAway") ,1000); |
|
|
cup.setAttribute('marked', 'true'); |
|
|
cup.setAttribute('marked', 'true'); |
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
|
ball.style.top = "0px"; |
|
|
|
|
|
ball.style.left = "0px"; |
|
|
|
|
|
}, 1000); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
|
|
|
|
|
|
* |
|
|
* |
|
|
*/ |
|
|
*/ |
|
|
Board.prototype.doDraw = function() { |
|
|
Board.prototype.doDraw = function() { |
|
|
|
|
|
alert('doDraw'); |
|
|
this.lowlightcups(); |
|
|
this.lowlightcups(); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|