let fieldId ;
let field ;
let down ;
let down2 ;
let up ;
let up2 ;
let left ;
let left2 ;
let right ;
let right2 ;
let topRight ;
let topLeft ;
let bottomRight ;
let bottomLeft ;
let rowMin ;
let rowMax ;
let selectedPiece ;
let turnTotal = 0 ;
let turnPlayer ;
let piecesX ;
let piecesO ;
let scoreX = 0 ;
let scoreCounterX = 100 ;
let scoreO = 0 ;
let scoreCounterO = 100 ;
let gameOver = false ;
let winner ;
let highScore = 0 ;
let allowHSCookies ;
let saveChoiceCookie ;
let somethingIsSelected = false ;
document . getElementById ( "scoreCounter" ) . innerText = "Score counter: 100" ;
document . getElementById ( "scoreX" ) . innerText = "Score X: 0" ;
document . getElementById ( "scoreO" ) . innerText = "Score O: 0" ;
if ( getCookie ( "saveChoiceAllowed" ) !== "true" ) {
allowHSCookies = confirm ( "Do you allow the use of Cookies to store the local Highscore? \nNote, that existing Cookies will not be deleted" ) ;
saveChoiceCookie = confirm ( "Do you allow a Cookie to save that answer?" ) ;
if ( saveChoiceCookie ) {
document . cookie = "cookiesAllowed=" + allowHSCookies + "; expires=Thu, 5 Dec 2030 12:00:00 UTC" ;
document . cookie = "saveChoiceAllowed=" + saveChoiceCookie + "; expires=Thu, 5 Dec 2030 12:00:00 UTC" ;
}
}
allowHSCookies = getCookie ( "cookiesAllowed" ) ;
if ( allowHSCookies && getCookie ( "highScore" ) !== "" ) {
highScore = getCookie ( "highScore" ) ;
}
document . getElementById ( "highScore" ) . innerText = "Highscore: " + highScore ;
for ( let i = 0 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
document . getElementById ( "field" + fieldId ) . selected = 0 ; //Sorgt dafür dass alle Felder die selected variable haben und diese 0 ist
document . getElementById ( "field" + fieldId ) . piece = 0 ; //Sorgt dafür dass alle Felder die piece variable haben und diese 0 ist
document . getElementById ( "field" + fieldId ) . fieldNum = i ; //Gibt jedem Feld eine Feldnummer, brauche ich für's movement
}
for ( let i = 56 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
document . getElementById ( "field" + fieldId ) . piece = 1 ; //Setzt die piece Variable von Feld 0 bis 8 auf 1 -> Diese Felder haben einen Spielstein von Spieler 1
}
for ( let i = 0 ; i < 8 ; i ++ ) {
fieldId = i . toString ( ) ;
document . getElementById ( "field" + fieldId ) . piece = 2 ; //Setzt die piece Variable von Feld 0 bis 8 auf 1 -> Diese Felder haben einen Spielstein von Spieler 1
}
drawPieces ( ) ;
resetValidMoves ( ) ;
advanceTurn ( ) ;
function drawPieces ( ) {
for ( let i = 0 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
field = document . getElementById ( "field" + fieldId ) ;
if ( field . piece === 0 ) {
field . innerText = "" ;
} else if ( field . piece === 1 ) {
field . innerText = "X" ;
} else if ( field . piece === 2 ) {
field . innerText = "O" ;
} else if ( field . piece === 11 ) {
field . innerText = "XX" ;
} else if ( field . piece === 22 ) {
field . innerText = "OO" ;
}
}
}
function selectField ( field ) {
console . log ( field . id ) ;
for ( let i = 0 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
if ( document . getElementById ( "field" + fieldId ) . selected === 1 ) {
somethingIsSelected = true ;
}
}
if ( ! somethingIsSelected && ! gameOver && ( ( ( field . piece === 1 || field . piece === 11 ) && turnTotal % 2 === 1 ) || ( ( field . piece === 2 || field . piece === 22 ) && turnTotal % 2 === 0 ) ) ) {
field . style . backgroundColor = "rgb(16,43,202, 0.3)" ;
field . selected = 1 ;
if ( field . piece === 1 || field . piece === 11 ) {
selectedPiece = field ;
validMovesPlayer1 ( field ) ;
} else if ( field . piece === 2 || field . piece === 22 ) {
selectedPiece = field ;
validMovesPlayer2 ( field ) ;
}
} else if ( field . selected === 1 ) {
field . selected = 0 ;
somethingIsSelected = false ;
resetValidMoves ( ) ;
} else if ( field . validMove !== 0 ) {
score ( field ) ;
field . piece = movePiece ( field , selectedPiece ) ;
selectedPiece . piece = 0 ;
drawPieces ( ) ;
resetValidMoves ( ) ;
for ( let i = 0 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
document . getElementById ( "field" + fieldId ) . selected = 0 ;
somethingIsSelected = false ;
}
advanceTurn ( ) ;
checkWinCondition ( ) ;
}
}
function validMovesPlayer1 ( field ) {
if ( field . fieldNum < 8 && field . fieldNum >= 0 ) {
rowMin = 0 ;
rowMax = 7 ;
} else if ( field . fieldNum < 16 && field . fieldNum >= 8 ) {
rowMin = 8 ;
rowMax = 15 ;
} else if ( field . fieldNum < 24 && field . fieldNum >= 16 ) {
rowMin = 16 ;
rowMax = 23 ;
} else if ( field . fieldNum < 32 && field . fieldNum >= 24 ) {
rowMin = 24 ;
rowMax = 31 ;
} else if ( field . fieldNum < 40 && field . fieldNum >= 32 ) {
rowMin = 32 ;
rowMax = 39 ;
} else if ( field . fieldNum < 48 && field . fieldNum >= 40 ) {
rowMin = 40 ;
rowMax = 47 ;
} else if ( field . fieldNum < 56 && field . fieldNum >= 48 ) {
rowMin = 48 ;
rowMax = 55 ;
} else if ( field . fieldNum < 64 && field . fieldNum >= 56 ) {
rowMin = 56 ;
rowMax = 63 ;
}
if ( ( field . fieldNum + 8 ) < 64 ) {
down = document . getElementById ( "field" + ( field . fieldNum + 8 ) . toString ( ) ) ;
if ( down . piece === 0 ) {
down . validMove = 1 ;
}
}
if ( ( field . fieldNum - 8 ) >= 0 ) {
up = document . getElementById ( "field" + ( field . fieldNum - 8 ) . toString ( ) ) ;
if ( up . piece === 0 ) {
up . validMove = 1 ;
}
}
if ( ( field . fieldNum - 16 ) >= 0 ) {
up2 = document . getElementById ( "field" + ( field . fieldNum - 16 ) . toString ( ) ) ;
if ( up . validMove === 1 && up2 . piece === 0 ) {
up2 . validMove = 1 ;
}
}
if ( ( field . fieldNum - 1 ) >= rowMin ) {
left = document . getElementById ( "field" + ( field . fieldNum - 1 ) . toString ( ) ) ;
if ( left . piece === 0 ) {
left . validMove = 1 ;
} else if ( left . piece === 2 || left . piece === 22 ) {
left . validMove = 2 ;
}
}
if ( ( field . fieldNum + 1 ) <= rowMax ) {
right = document . getElementById ( "field" + ( field . fieldNum + 1 ) . toString ( ) ) ;
if ( right . piece === 0 ) {
right . validMove = 1 ;
} else if ( right . piece === 2 || right . piece === 22 ) {
right . validMove = 2 ;
}
}
if ( ( field . fieldNum - 9 ) >= ( rowMin - 8 ) && ( field . fieldNum - 9 ) >= 0 ) {
topLeft = document . getElementById ( "field" + ( field . fieldNum - 9 ) . toString ( ) ) ;
if ( topLeft . piece === 2 || topLeft . piece === 22 ) {
topLeft . validMove = 2 ;
}
}
if ( ( field . fieldNum - 7 ) <= ( rowMax - 8 ) && ( field . fieldNum - 7 ) >= 0 ) {
topRight = document . getElementById ( "field" + ( field . fieldNum - 7 ) . toString ( ) ) ;
if ( topRight . piece === 2 || topRight . piece === 22 ) {
topRight . validMove = 2 ;
}
}
if ( field . piece === 11 ) {
if ( ( field . fieldNum + 16 ) < 64 ) {
down2 = document . getElementById ( "field" + ( field . fieldNum + 16 ) . toString ( ) ) ;
if ( down . validMove === 1 && down2 . piece === 0 ) {
down2 . validMove = 1 ;
}
}
if ( ( field . fieldNum + 2 ) <= rowMax ) {
right2 = document . getElementById ( "field" + ( field . fieldNum + 2 ) . toString ( ) ) ;
if ( right . validMove === 1 && right2 . piece === 0 ) {
right2 . validMove = 1 ;
}
}
if ( ( field . fieldNum - 2 ) >= rowMin ) {
left2 = document . getElementById ( "field" + ( field . fieldNum - 2 ) . toString ( ) ) ;
if ( left . validMove === 1 && left2 . piece === 0 ) {
left2 . validMove = 1 ;
}
}
if ( ( field . fieldNum + 7 ) >= ( rowMin + 8 ) && ( field . fieldNum + 7 ) < 64 ) {
bottomLeft = document . getElementById ( "field" + ( field . fieldNum + 7 ) . toString ( ) ) ;
if ( bottomLeft . piece === 2 || bottomLeft . piece === 22 ) {
bottomLeft . validMove = 2 ;
} else if ( bottomLeft . piece === 0 ) {
bottomLeft . validMove = 1 ;
}
}
if ( ( field . fieldNum + 9 ) <= ( rowMax + 8 ) && ( field . fieldNum + 9 ) < 64 ) {
bottomRight = document . getElementById ( "field" + ( field . fieldNum + 9 ) . toString ( ) ) ;
if ( bottomRight . piece === 2 || bottomRight . piece === 22 ) {
bottomRight . validMove = 2 ;
} else if ( bottomRight . piece === 0 ) {
bottomRight . validMove = 1 ;
}
}
if ( ( field . fieldNum - 9 ) >= ( rowMin - 8 ) && ( field . fieldNum - 9 ) >= 0 ) {
topLeft = document . getElementById ( "field" + ( field . fieldNum - 9 ) . toString ( ) ) ;
if ( topLeft . piece === 0 ) {
topLeft . validMove = 1 ;
}
}
if ( ( field . fieldNum - 7 ) <= ( rowMax - 8 ) && ( field . fieldNum - 7 ) >= 0 ) {
topRight = document . getElementById ( "field" + ( field . fieldNum - 7 ) . toString ( ) ) ;
if ( topRight . piece === 0 ) {
topRight . validMove = 1 ;
}
}
}
for ( let i = 0 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
if ( document . getElementById ( "field" + fieldId ) . validMove === 1 ) {
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(33,157,35, 0.3)" ;
} else if ( document . getElementById ( "field" + fieldId ) . validMove === 2 ) {
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(227,8,8, 0.3)" ;
}
}
}
function validMovesPlayer2 ( field ) {
if ( field . fieldNum < 8 && field . fieldNum >= 0 ) {
rowMin = 0 ;
rowMax = 7 ;
} else if ( field . fieldNum < 16 && field . fieldNum >= 8 ) {
rowMin = 8 ;
rowMax = 15 ;
} else if ( field . fieldNum < 24 && field . fieldNum >= 16 ) {
rowMin = 16 ;
rowMax = 23 ;
} else if ( field . fieldNum < 32 && field . fieldNum >= 24 ) {
rowMin = 24 ;
rowMax = 31 ;
} else if ( field . fieldNum < 40 && field . fieldNum >= 32 ) {
rowMin = 32 ;
rowMax = 39 ;
} else if ( field . fieldNum < 48 && field . fieldNum >= 40 ) {
rowMin = 40 ;
rowMax = 47 ;
} else if ( field . fieldNum < 56 && field . fieldNum >= 48 ) {
rowMin = 48 ;
rowMax = 55 ;
} else if ( field . fieldNum < 64 && field . fieldNum >= 56 ) {
rowMin = 56 ;
rowMax = 63 ;
}
if ( ( field . fieldNum + 8 ) < 64 ) {
down = document . getElementById ( "field" + ( field . fieldNum + 8 ) . toString ( ) ) ;
if ( down . piece === 0 ) {
down . validMove = 1 ;
}
}
if ( ( field . fieldNum + 16 ) < 64 ) {
down2 = document . getElementById ( "field" + ( field . fieldNum + 16 ) . toString ( ) ) ;
if ( down . validMove === 1 && down2 . piece === 0 ) {
down2 . validMove = 1 ;
}
}
if ( ( field . fieldNum - 8 ) >= 0 ) {
up = document . getElementById ( "field" + ( field . fieldNum - 8 ) . toString ( ) ) ;
if ( up . piece === 0 ) {
up . validMove = 1 ;
}
}
if ( ( field . fieldNum - 1 ) >= rowMin ) {
left = document . getElementById ( "field" + ( field . fieldNum - 1 ) . toString ( ) ) ;
if ( left . piece === 0 ) {
left . validMove = 1 ;
} else if ( left . piece === 1 || left . piece === 11 ) {
left . validMove = 2 ;
}
}
if ( ( field . fieldNum + 1 ) <= rowMax ) {
right = document . getElementById ( "field" + ( field . fieldNum + 1 ) . toString ( ) ) ;
if ( right . piece === 0 ) {
right . validMove = 1 ;
} else if ( right . piece === 1 || right . piece === 11 ) {
right . validMove = 2 ;
}
}
if ( ( field . fieldNum + 7 ) >= ( rowMin + 8 ) && ( field . fieldNum + 7 ) < 64 ) {
bottomLeft = document . getElementById ( "field" + ( field . fieldNum + 7 ) . toString ( ) ) ;
if ( bottomLeft . piece === 1 || bottomLeft . piece === 11 ) {
bottomLeft . validMove = 2 ;
}
}
if ( ( field . fieldNum + 9 ) <= ( rowMax + 8 ) && ( field . fieldNum + 9 ) < 64 ) {
bottomRight = document . getElementById ( "field" + ( field . fieldNum + 9 ) . toString ( ) ) ;
if ( bottomRight . piece === 1 || bottomRight . piece === 11 ) {
bottomRight . validMove = 2 ;
}
}
if ( field . piece === 22 ) {
if ( ( field . fieldNum - 16 ) >= 0 ) {
up2 = document . getElementById ( "field" + ( field . fieldNum - 16 ) . toString ( ) ) ;
if ( up . validMove === 1 && up2 . piece === 0 ) {
up2 . validMove = 1 ;
}
}
if ( ( field . fieldNum + 2 ) <= rowMax ) {
right2 = document . getElementById ( "field" + ( field . fieldNum + 2 ) . toString ( ) ) ;
if ( right . validMove === 1 && right2 . piece === 0 ) {
right2 . validMove = 1 ;
}
}
if ( ( field . fieldNum - 2 ) >= rowMin ) {
left2 = document . getElementById ( "field" + ( field . fieldNum - 2 ) . toString ( ) ) ;
if ( left . validMove === 1 && left2 . piece === 0 ) {
left2 . validMove = 1 ;
}
}
if ( ( field . fieldNum + 7 ) >= ( rowMin + 8 ) && ( field . fieldNum + 7 ) < 64 ) {
bottomLeft = document . getElementById ( "field" + ( field . fieldNum + 7 ) . toString ( ) ) ;
if ( bottomLeft . piece === 0 ) {
bottomLeft . validMove = 1 ;
}
}
if ( ( field . fieldNum + 9 ) <= ( rowMax + 8 ) && ( field . fieldNum + 9 ) < 64 ) {
bottomRight = document . getElementById ( "field" + ( field . fieldNum + 9 ) . toString ( ) ) ;
if ( bottomRight . piece === 0 ) {
bottomRight . validMove = 1 ;
}
}
if ( ( field . fieldNum - 9 ) >= ( rowMin - 8 ) && ( field . fieldNum - 9 ) >= 0 ) {
topLeft = document . getElementById ( "field" + ( field . fieldNum - 9 ) . toString ( ) ) ;
if ( topLeft . piece === 1 || topLeft . piece === 11 ) {
topLeft . validMove = 2 ;
} else if ( topLeft . piece === 0 ) {
topLeft . validMove = 1 ;
}
}
if ( ( field . fieldNum - 7 ) <= ( rowMax - 8 ) && ( field . fieldNum - 7 ) >= 0 ) {
topRight = document . getElementById ( "field" + ( field . fieldNum - 7 ) . toString ( ) ) ;
if ( topRight . piece === 1 || topRight . piece === 11 ) {
topRight . validMove = 2 ;
} else if ( topRight . piece === 0 ) {
topRight . validMove = 1 ;
}
}
}
for ( let i = 0 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
if ( document . getElementById ( "field" + fieldId ) . validMove === 1 ) {
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(33,157,35, 0.3)" ;
} else if ( document . getElementById ( "field" + fieldId ) . validMove === 2 ) {
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(227,8,8, 0.3)" ;
}
}
}
function resetValidMoves ( ) {
for ( let i = 0 ; i < 64 ; i ++ ) {
let fieldId = i . toString ( ) ;
document . getElementById ( "field" + fieldId ) . validMove = 0 ;
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(255,255,255, 1)" ;
}
}
function advanceTurn ( ) {
turnTotal ++ ;
if ( turnTotal % 2 === 0 ) {
turnPlayer = "Player-Turn: O" ;
} else {
turnPlayer = "Player-Turn: X" ;
}
document . getElementById ( "turnTotal" ) . innerText = "Game-Turn: " + turnTotal ;
document . getElementById ( "turnPlayer" ) . innerText = turnPlayer ;
}
function movePiece ( field , selectedPiece ) {
if ( ( selectedPiece . piece === 1 && field . fieldNum < 8 && field . fieldNum >= 0 ) || selectedPiece . piece === 11 ) {
return 11 ;
} else if ( ( selectedPiece . piece === 2 && field . fieldNum < 64 && field . fieldNum >= 56 ) || selectedPiece . piece === 22 ) {
return 22 ;
} else {
return selectedPiece . piece ;
}
}
function checkWinCondition ( ) {
piecesX = 0 ;
piecesO = 0 ;
for ( let i = 0 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
if ( document . getElementById ( "field" + fieldId ) . piece === 1 ) {
piecesX ++ ;
} else if ( document . getElementById ( "field" + fieldId ) . piece === 11 ) {
piecesX += 2 ;
} else if ( document . getElementById ( "field" + fieldId ) . piece === 2 ) {
piecesO ++ ;
} else if ( document . getElementById ( "field" + fieldId ) . piece === 22 ) {
piecesO += 2 ;
}
}
if ( piecesX >= ( 2 * piecesO ) ) {
gameOver = true ;
winner = 1 ;
document . getElementById ( "turnTotal" ) . innerText = "Game Over!" ;
document . getElementById ( "turnPlayer" ) . innerText = "X Won!" ;
} else if ( piecesO >= ( 2 * piecesX ) ) {
gameOver = true ;
winner = 2 ;
document . getElementById ( "turnTotal" ) . innerText = "Game Over!" ;
document . getElementById ( "turnPlayer" ) . innerText = "O Won!" ;
}
if ( gameOver ) {
for ( let i = 0 ; i < 64 ; i ++ ) {
fieldId = i . toString ( ) ;
if ( ( document . getElementById ( "field" + fieldId ) . piece === 1 || document . getElementById ( "field" + fieldId ) . piece === 11 ) && winner === 1 ) {
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(33,157,35, 0.3)"
}
if ( ( document . getElementById ( "field" + fieldId ) . piece === 1 || document . getElementById ( "field" + fieldId ) . piece === 11 ) && winner === 2 ) {
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(227,8,8, 0.3)"
}
if ( ( document . getElementById ( "field" + fieldId ) . piece === 2 || document . getElementById ( "field" + fieldId ) . piece === 22 ) && winner === 1 ) {
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(227,8,8, 0.3)"
}
if ( ( document . getElementById ( "field" + fieldId ) . piece === 2 || document . getElementById ( "field" + fieldId ) . piece === 22 ) && winner === 2 ) {
document . getElementById ( "field" + fieldId ) . style . backgroundColor = "rgb(33,157,35, 0.3)"
}
}
if ( allowHSCookies && parseInt ( highScore ) < scoreX ) {
document . cookie = "highScore=" + scoreX + "; expires=Thu, 5 Dec 2030 12:00:00 UTC" ;
} else if ( allowHSCookies && parseInt ( highScore ) < scoreO ) {
document . cookie = "highScore=" + scoreO + "; expires=Thu, 5 Dec 2030 12:00:00 UTC" ;
}
if ( allowHSCookies ) {
highScore = getCookie ( "highScore" ) ;
document . getElementById ( "highScore" ) . innerText = "Highscore: " + highScore ;
}
}
}
function score ( field ) {
if ( field . piece === 0 && turnPlayer === "Player-Turn: X" && scoreCounterX > 25 ) {
scoreCounterX -= 5 ;
} else if ( field . piece === 0 && turnPlayer === "Player-Turn: O" && scoreCounterO > 25 ) {
scoreCounterO -= 5 ;
} else if ( field . piece === 1 ) {
scoreO += scoreCounterO ;
scoreCounterO = 100 ;
} else if ( field . piece === 11 ) {
scoreO += ( ( scoreCounterO + 50 ) * 2 )
scoreCounterO = 100 ;
} else if ( field . piece === 2 ) {
scoreX += scoreCounterX ;
scoreCounterX = 100 ;
} else if ( field . piece === 2 ) {
scoreX += ( ( scoreCounterX + 50 ) * 2 )
scoreCounterX = 100 ;
}
if ( turnPlayer === "Player-Turn: X" ) {
document . getElementById ( "scoreCounter" ) . innerText = "Score counter: " + scoreCounterO ;
} else if ( turnPlayer === "Player-Turn: O" ) {
document . getElementById ( "scoreCounter" ) . innerText = "Score counter: " + scoreCounterX ;
}
document . getElementById ( "scoreO" ) . innerText = "Score O: " + scoreO ;
document . getElementById ( "scoreX" ) . innerText = "Score X: " + scoreX ;
}
function getCookie ( cname ) {
let name = cname + "=" ;
let decodedCookie = decodeURIComponent ( document . cookie ) ;
let ca = decodedCookie . split ( ';' ) ;
for ( let i = 0 ; i < ca . length ; i ++ ) {
let c = ca [ i ] ;
while ( c . charAt ( 0 ) === ' ' ) {
c = c . substring ( 1 ) ;
}
if ( c . indexOf ( name ) === 0 ) {
return c . substring ( name . length , c . length ) ;
}
}
return "" ;
}