kann man tic tac toe allein mit HTML und CSS programmieren?

6 Antworten

Hier die JS Version
<html>


<head>

<style>

.gameField{
width: 100px;
height: 100px;
background-color: #aaa;
margin: 10px;
}
.a{
background-color: #a88;
}
.b{
background-color: #8a8;
}

</style>

<script>

'use strict';

var state = [0,0,0,0,0,0,0,0,0];

var asTurn = true;

function play(i){
console.log(i, state);
if(state[i] == 0){
state[i] = asTurn?1:2;
document.getElementsByClassName("gameField")[i].classList.add(asTurn?'a':'b');
var win;
if(win = checkWin()){
alert("Player "+win+" Wins!");
state = [0,0,0,0,0,0,0,0,0];
for(var button of document.getElementsByClassName("gameField")){
button.classList.remove('a');
button.classList.remove('b');
}
}
asTurn = !asTurn;
}
}

function checkWin(){
var win = 0;
for(var i=0; i<3; i++){
if(state[i*3] == state[i*3+1] && state[i*3] == state[i*3+2]) return state[i*3];
}
for(var i=0; i<3; i++){
if(state[i] == state[3+i] && state[i] == state[6+i]) return state[i];
}
if(state[0] == state[5] && state[4] == state[8]) return state[0];
if(state[2] == state[5] && state[4] == state[6]) return state[2];
}

</script>

</head>

<body>

<div class="game">

<div class="row">
<input type="button" onclick="play(0)" class="gameField" />
<input type="button" onclick="play(1)" class="gameField" />
<input type="button" onclick="play(2)" class="gameField" />
</div>
<div class="row">
<input type="button" onclick="play(3)" class="gameField" />
<input type="button" onclick="play(4)" class="gameField" />
<input type="button" onclick="play(5)" class="gameField" />
</div>
<div class="row">
<input type="button" onclick="play(6)" class="gameField" />
<input type="button" onclick="play(7)" class="gameField" />
<input type="button" onclick="play(8)" class="gameField" />
</div>

</div>

</body>

</html>

Diese Version ist nicht unbedingt schön und kann auch noch nicht erkennen, wenn das Feld voll ist, ist aber deutlich schöner als die CSS-Version

1

Jein.

De facto kann man mit html und css nicht programmieren, es sind auch keine Programmiersprachen, wie man es bei gf.net so oft von Fragestellern liest.
Rein praktisch könnte man aber wohl Tick-Tack-Toe machen, hier meine Idee via sass. Mit dem label-checkbox-Klick könnte man jedem Feld zwei Checkboxen geben, eine für den Kreis und eine für das Kreuz (das Reinzeichnen kann man dann später mit css machen). Jedes Feld bekommt zwei Variablne mit dem Boolean "false". Wird eines beiden Symbole aktiviert, ändert sich über den Tilde-Selektor der Variablenwert zu "true". Würden z.B. die Variablen feld-1-cross, feld-2-cross und feld-3-cross dann auf true stehen, hat ein Spieler gewonnen und du überdeckst das Spielfeld mit einer "Kreuz gewinnt" Botschaft.

Du solltest die Variablen mit einem @each erzeugen, die Gewinnabfrage kannst du mit dem @if Statement abfragen.

Ich empfehle dir, auch beim html eine Engine (z.B. pug) zu benutzen, weil es andernfalls eine ziemliche Fummelei werden könnte.

Wie hier aber schon gesagt wurde, mit JavaScript ist es eleganter.

Weder HTML noch css ist eine richtige Programmiersprache sonder Lediglich zum Anzeigen einer Oberfläche. Um ein Tic Tac Toe zu programmieren brauchst du Java Script, PHP oder eine andere Webserver Programmiersprache

Was möchtest Du wissen?