✔ Beim Schlagen verschwindet die falsche Figur

T

tklustig

Erfahrenes Mitglied
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:
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;
}
Und hier der HTML/JS-Code
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>&#8224;</label>
<label>&#8225;</label>
<label>&#10227;</label>

<br><button type="button" onclick="location.reload()">Brett neu aufstellen!</button>
</center>
<?php
?>
</body>
</html>
 
Zuletzt bearbeitet:
Beim Drop gibt es zwei Möglichkeiten:
  1. Man trifft das Bild mit der vorhandenen Figur. Dann verschwindet die gezogene Figur weil das Bild inhaltsleer ist und das appendChild dafür nicht möglich ist.
  2. Man trifft den freien Raum neben dem Bild. Dann wird die gezogene Figur dem Feld hinzu gefügt.
Um es zum Laufen zu bringen, muss man beide Möglichkeiten berücksichtigen und die vorhandene Figur löschen:
Code: 
            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                if (ev.target.classList.contains("feld")) {
                    var figur = ev.target.childNodes[0];
                    var feld = ev.target;
                } else {
                    var figur = ev.target;
                    var feld = ev.target.parentNode;
                }
                feld.removeChild(figur);
                feld.appendChild(document.getElementById(data))
            }
Jetzt kannst Du es noch dahin gehend erweitern, dass die geschlagene Figur nicht gelöscht, sondern neben dem Brett abgelegt wird.
 
Zuletzt bearbeitet:
Funktioniert leider nüscht.
Ich bekomme folgende Exception:
Code: 
 [Show/hide message details.] TypeError: Argument 1 of Node.removeChild is not an object.[Learn More] Schachbrett.html:129:17
drop
file:///D:/IBB_2/Woche7_8_9_10/Programmierung/JScript/Quellcode/Schachbrett.html:129:17
ondrop
file:///D:/IBB_2/Woche7_8_9_10/Programmierung/JScript/Quellcode/Schachbrett.html:1:1
Auch folgender Code funktioniert nicht:
Code: 
feld.removeChild(ev.target.childNodes[0]); //Exception
feld.removeChild(figur);// dieselbe Exception
 
Zuletzt bearbeitet:
Welchen Browser benutzt Du denn? Man müsste es sich mal in Aktion ansehen können. Kannst Du es online stellen?
Der Code scheint Probleme mit der Browserkompatibilität zu haben: Im IE wird nicht Mal das Spielfeld richtig angezeigt und im FF funktioniert auch bei mir das Drag&Drop nicht.
 
PS: Ich war ganz auf das Schlagen fixiert, dass ich den Fall, dass man auf ein freies Feld zieht, nicht beachtet habe. Dies sollte diesen Fall berücksichtigen:
Code: 
            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                if (ev.target.classList.contains("feld")) {
                    var figur = ev.target.childNodes[0];
                    var feld = ev.target;
                } else {
                    var figur = ev.target;
                    var feld = ev.target.parentNode;
                }
                // nur wenn eine Figur im Feld ist: diese entfernen
                if (figur) feld.removeChild(figur);
                feld.appendChild(document.getElementById(data));
            }
 
PPS: Problem mit IE gelöst:
Code: 
            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;
                    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.appendChild(vlabel);
            }
In der vorletzten Zeile stand zeile.append(vlabel)
 
Super. Jetzt klappt alles! Vielen Dank dafür!
Bevor ich diesen Thread als gelöst markiere: Wohin portiere ich den Algorithmus der C#-Engine bzgl. der erlaubten Züge: Ausschließlich in die Funktion allowDrop(parameter ev). Ist diese Vermutung korrekt?
 
Das hängt davon ab, was Du genau vor hast. allowDrop wird während des Ziehens getriggert und Du hast unter event.target jeweils das Element, über dem sich die Figur gerade befindet. Die könntest Du markieren, z. B. durch einen roten oder grünen Rahmen. Als Ausgangspunkt für die Berechnung der möglichen Felder brauchst Du natürlich das Quellelement, das Du über getData("text") ermitteln kannst. Die Berechnung der möglichen Felder würde ich gleich beim dragstart machen und dann beim Element speichern, z. B. in einem data-Attribut, denn das ondrag triggert relativ häufig beim Ziehen. Und sicher willst Du auch das Abstellen bzw. Drop der Figur auf dem neuen unterbinden, wenn es nicht zulässig ist. Das müsstest Du dann in der Funktion drop() machen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück