You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
499 lines
20 KiB
499 lines
20 KiB
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 "";
|
|
} |