Hallo Leute,
beim Schlagen einer Figur verschwindet nicht die geschlagene Figur, sondern diejenige, die geschlagen hat. Vermutlich ist es keine große Sache, den JS - Code so abzuändern, dass die geschlagene Figur verschwindet.
Nur wie und wo muss ich was abändern?
hier der CSS-Code:
Und hier der HTML/JS-Code
beim Schlagen einer Figur verschwindet nicht die geschlagene Figur, sondern diejenige, die geschlagen hat. Vermutlich ist es keine große Sache, den JS - Code so abzuändern, dass die geschlagene Figur verschwindet.
Nur wie und wo muss ich was abändern?
hier der CSS-Code:
CSS:
#schachbrett {
width: 420px;
height: 420px;
background-color: lightgrey;
border: 2px solid blue;
}
.feld {
width: 50px;
height: 50px;
display: inline-block;
vertical-align: top;
}
.feld.schwarz {
background-color: black;
}
.feld.weiss {
background-color: white;
}
.vlabel {
width: 20px;
height: 50px;
}
.hlabel {
width: 50px;
height: 20px;
}
.hlabel, .vlabel {
display: inline-flex;
align-items: center;
justify-content: center;
}
label{
font-size:50px;
}
Code:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Schachbrett mit Drag&Drop </title>
<link href="css/schachdesign.css" rel="stylesheet">
</head>
<body>
<center><h3>Schachbrett mit Drag&Drop</h3>
<!-- weiße Spielfiguren -->
<div id="schachbrett" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="SpringerW1" src="img/Springer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="SpringerW2" src="img/Springer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="TurmW1" src="img/Turm.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="TurmW2" src="img/Turm.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="LaeuferW1" src="img/Laeufer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="LaeuferW2" src="img/Laeufer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="DameW" src="img/Dame.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="KoenigW" src="img/Koenig.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerW1" src="img/Bauer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerW2" src="img/Bauer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerW3" src="img/Bauer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerW4" src="img/Bauer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerW5" src="img/Bauer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerW6" src="img/Bauer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerW7" src="img/Bauer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerW8" src="img/Bauer.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<!-- schwarze Spielfiguren -->
<img id="SpringerB1" src="img/SpringerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="SpringerB2" src="img/SpringerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="TurmB1" src="img/TurmB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="TurmB2" src="img/TurmB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="LaeuferB1" src="img/LaeuferB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="LaeuferB2" src="img/LaeuferB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="DameB" src="img/DameB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="KoenigB" src="img/KoenigB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerB1" src="img/BauerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerB2" src="img/BauerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerB3" src="img/BauerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerB4" src="img/BauerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerB5" src="img/BauerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerB6" src="img/BauerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerB7" src="img/BauerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
<img id="BauerB8" src="img/BauerB.png" draggable="true" ondragstart="drag(event)" width="47" height="47">
</div>
<script>
var brett = document.getElementById("schachbrett");
for (var i = 0; i < 8; i++) {
var zeile = document.createElement("div");
brett.appendChild(zeile);
var schwarz = !(i % 2);
for (var j = 0; j < 8; j++) {
var feld = document.createElement("div");
feld.id = "feld" + i + j; // dem Feld eine ID zuweisen
if (schwarz) feld.className = "feld schwarz";
else feld.className = "feld weiss";
zeile.appendChild(feld);
schwarz = !schwarz;
}
var vlabel = document.createElement("div");
vlabel.className = "vlabel";
vlabel.textContent = 8 - i;
zeile.append(vlabel);
}
//weiße Spielfiguren
document.getElementById("feld71").appendChild(document.getElementById("SpringerW1"));
document.getElementById("feld76").appendChild(document.getElementById("SpringerW2"));
document.getElementById("feld70").appendChild(document.getElementById("TurmW1"));
document.getElementById("feld77").appendChild(document.getElementById("TurmW2"));
document.getElementById("feld72").appendChild(document.getElementById("LaeuferW1"));
document.getElementById("feld75").appendChild(document.getElementById("LaeuferW2"));
document.getElementById("feld74").appendChild(document.getElementById("DameW"));
document.getElementById("feld73").appendChild(document.getElementById("KoenigW"));
document.getElementById("feld60").appendChild(document.getElementById("BauerW1"));
document.getElementById("feld61").appendChild(document.getElementById("BauerW2"));
document.getElementById("feld62").appendChild(document.getElementById("BauerW3"));
document.getElementById("feld63").appendChild(document.getElementById("BauerW4"));
document.getElementById("feld64").appendChild(document.getElementById("BauerW5"));
document.getElementById("feld65").appendChild(document.getElementById("BauerW6"));
document.getElementById("feld66").appendChild(document.getElementById("BauerW7"));
document.getElementById("feld67").appendChild(document.getElementById("BauerW8"));
//schwarze Spielfiguren
document.getElementById("feld01").appendChild(document.getElementById("SpringerB1"));
document.getElementById("feld06").appendChild(document.getElementById("SpringerB2"));
document.getElementById("feld00").appendChild(document.getElementById("TurmB1"));
document.getElementById("feld07").appendChild(document.getElementById("TurmB2"));
document.getElementById("feld02").appendChild(document.getElementById("LaeuferB1"));
document.getElementById("feld05").appendChild(document.getElementById("LaeuferB2"));
document.getElementById("feld04").appendChild(document.getElementById("DameB"));
document.getElementById("feld03").appendChild(document.getElementById("KoenigB"));
document.getElementById("feld10").appendChild(document.getElementById("BauerB1"));
document.getElementById("feld11").appendChild(document.getElementById("BauerB2"));
document.getElementById("feld12").appendChild(document.getElementById("BauerB3"));
document.getElementById("feld13").appendChild(document.getElementById("BauerB4"));
document.getElementById("feld14").appendChild(document.getElementById("BauerB5"));
document.getElementById("feld15").appendChild(document.getElementById("BauerB6"));
document.getElementById("feld16").appendChild(document.getElementById("BauerB7"));
document.getElementById("feld17").appendChild(document.getElementById("BauerB8"));
var lzeile = document.createElement("div");
brett.appendChild(lzeile);
for (var k = 0; k < 8; k++) {
var hlabel = document.createElement("div");
hlabel.className = "hlabel";
hlabel.textContent = String.fromCharCode(64 + k + 1)
lzeile.appendChild(hlabel);
}
//Drag and Drop
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<form id="formular" name="formular" action="" method="post"></form>
<label>†</label>
<label>‡</label>
<label>⟳</label>
<br><button type="button" onclick="location.reload()">Brett neu aufstellen!</button>
</center>
<?php
?>
</body>
</html>
Zuletzt bearbeitet: