From 1bf296a38287e5d8204d1d2c4aaffeea2413fb31 Mon Sep 17 00:00:00 2001 From: ElGurkus Date: Tue, 3 Nov 2020 13:33:53 +0100 Subject: [PATCH] changed code -> The selected piece is now marked blue. All valid moves are marked green. All valid moves that kill a piece are marked red. Added nonpermanent debug lines to test this untill movement is implemented --- code.js | 193 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 189 insertions(+), 4 deletions(-) diff --git a/code.js b/code.js index 799b86a..f34ed6f 100644 --- a/code.js +++ b/code.js @@ -1,5 +1,17 @@ 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 somethingIsSelected = false; for(let i = 0; i < 64; i++){ @@ -16,7 +28,14 @@ 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 } + +/* ---------- DEBUG, NICHT PERMANENT ---------- */ +document.getElementById("field41").piece = 1; +document.getElementById("field34").piece = 2; +/* ---------- DEBUG, NICHT PERMANENT ---------- */ + drawPieces(); +resetValidMoves(); function drawPieces() { for (let i = 0; i < 64; i++) { @@ -40,7 +59,7 @@ function selectField(field){ } } if(!somethingIsSelected && field.piece !== 0) { - field.style.backgroundColor = "rgb(227,8,8, 0.3)"; + field.style.backgroundColor = "rgb(16,43,202, 0.3)"; field.selected = 1; if(field.piece === 1){ validMovesPlayer1(field); @@ -48,14 +67,180 @@ function selectField(field){ validMovesPlayer2(field); } } else if (field.selected === 1){ - field.style.backgroundColor = "rgb(255,255,255, 1)"; + for (let i = 0; i < 64; i++) { + fieldId = i.toString(); + document.getElementById("field" + fieldId).style.backgroundColor = "rgb(255,255,255, 1)"; + document.getElementById("field" + fieldId).validMove = 0; + } field.selected = 0; somethingIsSelected = false; } } 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.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.validMove = 2; + } + } + if((field.fieldNum - 9) >= (rowMin - 8)) { + topLeft = document.getElementById("field" + (field.fieldNum - 9).toString()); + if (topLeft.piece === 2){ + topLeft.validMove = 2; + } + } + if((field.fieldNum - 7) <= (rowMax - 8)) { + topRight = document.getElementById("field" + (field.fieldNum - 7).toString()); + if (topRight.piece === 2){ + 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.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.validMove = 2; + } + } + if((field.fieldNum + 7) >= (rowMin + 8)) { + bottomLeft = document.getElementById("field" + (field.fieldNum + 7).toString()); + if (bottomLeft.piece === 1){ + bottomLeft.validMove = 2; + } + } + if((field.fieldNum + 9) <= (rowMax + 8)) { + bottomRight = document.getElementById("field" + (field.fieldNum + 9).toString()); + if (bottomRight.piece === 1){ + 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; + } } \ No newline at end of file