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>
18

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.

Ich mache einfach mal noch eine Antwort.

Grundsätzlich gilt, dass alles was Interaktion benötigt effizienter mit JS zu lösen ist. Dies basiert darauf, dass man mit HTML und CSS das Problem immer nur umgeht, da diese keine Programmabläufe darstellen können und z.B. keine alternativen Abläufe bieten können.

Ich würde dir empfehlen mit HTML und CSS mit Seitendesigns zu beginnen und dann sich JS anzusehen. Hierbei gilt, was in CSS geht ist oft gut, doch sobald du mit dem Nutzer mehr als nur "du hast da gerade draufgeklickt" interagieren willst wird JS immer besser.

38

jQuery ist wesentlich einfacher als JS. Ist nur meine persönliche Meinung

0
3

Soll ich erst HTML und CSS vertiefen oder auch schonmal mit JS anfangen? und wie kann ich meine Anfängerkenntnisse verbessern? in den Büchern sind immer nur leichte übungen dabei und die "Projekte" in den Büchern sehen auch dementsprechend aus ^^

0
18
@zenbonsakura

Also ich würde mich zuerst an das pure JS halten. Ich würde mit einfach ein Projekt einer kompletten Seite suchen. Dabei braucht man meist kein JS. Dann kann man mit JS beginnen, was meist von selbst kommt.

1

Wie Tic Tac Toe mit Java Hamster programmieren ( imperatives Programm )?

Hi, ich würde gerne Programmieren lernen und habe mir dazu den Java Hamster Simulator runtergeladen. Ich habe auch schon viel gelernt ( Variablen, Befehle, usw. ), aber ich weiss nicht, wie ich das Wissen einsetzen kann, um ein Tic Tac Toe - Spiel zu programmieren?

Ich würde am liebsten gegen einen Computer spielen, aber zu zweit wäre es auch toll.

Hat jemand ein paar Lösungsvorschläge oder - ansätze, damit ich mir so ein Spiel programmieren kann?

Mein Problem: Ich weiss schon sehr viel über Java Hamster, aber weiss nicht, wie ich mein Wissen in ein Tic Tac Toe Spiel vereinen kann...

Danke

...zur Frage

JavaScript Tic Tac Toe AI Programmierung?

Guten Abend Community,

ich möchte gerne ein Tic-Tac-Toe Game mit einem AI (BOT) programmieren. Der bisher programmierte Code funktioniert nur für Player vs Player. Habe schon ein bisschen rumgespielt, aber noch keine wirkliche richtige Lösung für den AI gefunden.

In dem folgenden Link, könnt Ihr mein JavaScript Code finden. (Ich weiß, kein guter Programmierstil, jedoch geht es mir momentan in erster Linie um die Funktionalität.

Könnt mir aber gegebenfalls Verbesserungsvorschläge schreiben! :)

https://pastebin.com/e3LbFp1k

Den folgenden Code habe ich einfach mal ausprobiert, jedoch funktioniert er nicht, da ich eine Endlosfunktion geschrieben habe.

function button(btn) {
    click_count++;         
    setX(btn);
    bot();
    checkForWin();
}

function setX(btn){
    button.value = "X";
    symbol = "O";
}

function bot() {
    var random_pick = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8]
    bot = random_pick[Math.floor(Math.random()*random_pick.length)]
    if (bot.value != "X" || "O") {
        bot.value = "O";
        click_count++;
        symbol = "X";
        button();
    }else{
        bot();
    }
}   

Vielleicht kann mir ja jemand weiterhelfen, wie ich weitermachen soll... Sitze zur Zeit etwas fest.

...zur Frage

Was möchtest Du wissen?