tmn
/
JS-Game
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c9bd677e04'
${ noResults }
JS-Game/code.js

327 lines
12 KiB
JavaScript
Raw Blame History

let fieldId;
let field;
let down;
let down2;
let up;
let up2;
let left;
let right;
let topRight;
let topLeft;
let bottomRight;
let bottomLeft;
let rowMin;
let rowMax;
let selectedPiece;
let turnTotal = 0;
let turnPlayer;
let piecesX;
let piecesO;
let gameOver = false;
let winner;
let somethingIsSelected = false;
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){
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;
}
}
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;
}
}
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)"
}
}
}
}
Reference in New Issue View Git Blame Copy Permalink