Tic Tac Toe Spiel Was ist der Fehler?
Ich bin gerade dabei ein Tic Tac Toe Spiel zu pogrammieren. Dabei bin ich soweit gekommen, dass wenn ich auf ein Feld klicke ein Kreuz erscheint. Dann habe ich eine Funktion aufgestellt die, die eine zufällige Zahl von 1-9 auswirft. Dann habe ich für jeden möglichen Wert des X-Wertes eine if anweisung erstellt wo zum Beispiel drin steht if(x = 3 && Feld[3] = false). Als ich das fertiggestellt hatte ging nichts mehr. Was ist der Fehler?
Hier ein Codepen Link:
https://codepen.io/JokingJoker/pen/wvMwRMe
Das ganze habe ich mit jquery gemacht.
Bitte seid nicht zu hart bin noch Anfänger.
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:darkcyan;
}
h1{
font-size: 60px;
color: white;
text-align: center;
}
p{
font-size: 30px;
color: white;
text-align: center;
}
#responsive_Breite{
max-width: 600px;
display:flex;
flex-wrap:wrap;
width:60vw;
height:60vw;
border:2px solid black;
margin:0 auto;
}
.playerbox{
width:60vw;
max-width:600px;
margin:0 auto;
font-size:22px;
color:white;
text-align:center;
}
.Feld{
display:block;
width:calc(100% / 3);
font-size:300%;
height:calc(100% / 3);
border:2px solid black;
font-weight:900;
font-size:18vw;
text-align:center;
line-height:18vw;
}
.player1:before{
content:'X';
color: red;
}
.player2:before{
content:'O';
color:blue;
}
#player2{
display:none;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<h1>Tic Tac Toe</h1>
<div id="responsive_Breite">
<div id="feld-1" class="Feld"></div>
<div id="feld-2" class="Feld"></div>
<div id="feld-3" class="Feld"></div>
<div id="feld-4" class="Feld"></div>
<div id="feld-5" class="Feld"></div>
<div id="feld-6" class="Feld"></div>
<div id="feld-7" class="Feld"></div>
<div id="feld-8" class="Feld"></div>
<div id="feld-9" class="Feld"></div>
</div>
<div class="playerbox">
<div id="player">Spieler
<div id="helpbox">1</div> ist dran!</div>
</div>
</div>
<script>
var ele=document.querySelectorAll('.Feld');
ele.forEach(function(el) {
el.addEventListener('click',function(){
start(el);
})
});
function start(th){
var help=document.getElementById("helpbox");
if(help.innerHTML==1){
f=2;
var gegner_schon_gesetzt=th.classList.contains('player2');
}else{
f=1;
var gegner_schon_gesetzt=th.classList.contains('player1');
}
if(gegner_schon_gesetzt==true){
alert('Das Feld ist vom Gegner Besetzt \n nimm ein leeres');
}else if(gegner_schon_gesetzt==false){
th.classList.add('player'+help.innerHTML);
help.innerHTML=f;
}
}
</script>