Tictactoe

Typ des Spieles:


Spieler Blau:
Spieler Rot:

Spieler:

Tictactoe.css

    .spielBtn {
		width: 60px;
		height: 60px;
	}

	#feldSet {
		border: none;
	}
	input:invalid {
		border-color: #f00;
	}
            

Tictactoe.html

            	<!DOCTYPE html>
<html lang="de">
<head>
<title> TicTacToe </title>
<meta charset="utf-8">
</head>
<script src="TicTacToe.js"></script>
<link rel="stylesheet" href="TicTacToe.css">

<body>
	<div>
		<h1>TicTacToe</h1>
	</div>
	<div>
		<div>
			<button id="btn0" onclick="farbeWechseln(this)"  class="spielBtn" disabled></button>
			<button id="btn1" onclick="farbeWechseln(this)" class="spielBtn" disabled></button>
			<button id="btn2" onclick="farbeWechseln(this)"  class="spielBtn" disabled></button>
		</div>
		<div>
			<button id="btn3" onclick="farbeWechseln(this)" class="spielBtn" disabled></button>
			<button id="btn4" onclick="farbeWechseln(this)" class="spielBtn" disabled></button>
			<button id="btn5" onclick="farbeWechseln(this)" class="spielBtn" disabled></button>
		</div>
		<div>
				<button id="btn6" onclick="farbeWechseln(this)"  class="spielBtn" disabled></button>
				<button id="btn7" onclick="farbeWechseln(this)" class="spielBtn" disabled></button>
				<button id="btn8" onclick="farbeWechseln(this)"  class="spielBtn" disabled></button>
		</div>
	</div>
	<div>

	</div>
	<div>
	<form>
  		<h3 id="typAnzeige">Typ des Spieles:</h3>
  		<fieldset id="feldSet">
    		<input onclick="document.getElementById('spilerEins').disabled = false; document.getElementById('spilerZwei').disabled = false; document.getElementById('spiler').disabled = true;" type="radio" id="gegenSpieler" name="spielMethode" value="Mensch vs Mensch" >
   			<label for="gegenSpieler"> Mensch vs Mensch</label><br>
			<span style="margin-left:2em"><strong>Spieler Blau:</strong><input type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$"  id="spilerEins" placeholder="example@hallowelt.ch" disabled><br>
			<span style="margin-left:2em"><strong>Spieler Rot:</strong><input type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" id="spilerZwei" placeholder="example@hallowelt.ch" disabled><br>
    		<input onclick="document.getElementById('spilerEins').disabled = true; document.getElementById('spilerZwei').disabled = true; document.getElementById('spiler').disabled = false; " type="radio" id="gegenPC"   name="spielMethode" value="Mensch vs Computer">
    		<label for="gegenPC">Mensch vs Computer</label><br>
			<span style="margin-left:2em"><strong>Spieler:</strong><input type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$"  id="spiler" placeholder="example@hallowelt.ch" disabled><br>	
    		<input onclick="document.getElementById('spilerEins').disabled = true; document.getElementById('spilerZwei').disabled = true; document.getElementById('spiler').disabled = true; " type="radio" id="kiGegenKi"  name="spielMethode" value="Computer vs Computer">
    		<label for="kiGegenKi">Computer vs Computer</label> 
  		</fieldset>
	</form>
	</div>
		<div>
			<h2 id="resultOfGame"></h2>
		</div>
		<div>
			<button id="btnReset" onclick="resetSpiel()">reset</button>
			<button id="btnStart" onclick="startSpiel()">start</button>
		</div>
</body>
</html>

            

Tictactoe.js

            	function startSpiel() {
		// Es wird mitels verzweigung die Speilart ermittelt
		if (document.getElementById('gegenSpieler').checked) {
			document.getElementById("resultOfGame").textContent = "";
			var spielerEinsMail = document.getElementById('spilerEins').value;
			var speilerZweiMail = document.getElementById('spilerZwei').value;
			// validirung der verschiden fehlerfälle bei der Email adresse
			if (validateEmail(speilerZweiMail) == false & validateEmail(spielerEinsMail) == false) {
				document.getElementById("resultOfGame").textContent = "Bitte geben Sie beide eine Gültige adresse ein!";
				document.getElementById("spilerEins").style.borderColor = "red";
				document.getElementById("resultOfGame").style.color = "red";
			} else if (validateEmail(speilerZweiMail) == false) {
				document.getElementById("resultOfGame").textContent = "Spieler 2 Bitte geben eine Gültige adresse ein!";
				document.getElementById("spilerZwei").style.borderColor = "red";
				document.getElementById("resultOfGame").style.color = "red";
			} else if (validateEmail(spielerEinsMail) == false) {
				document.getElementById("resultOfGame").textContent = "Spieler 1 Bitte geben eine Gültige adresse ein!";
				document.getElementById("spilerZwei").style.borderColor = "red";
				document.getElementById("spilerEins").style.borderColor = "red";
				document.getElementById("resultOfGame").style.color = "red";
			} else if (spielerEinsMail == speilerZweiMail) {
				document.getElementById("resultOfGame").textContent = "Bittte geben Sie zwei unterschidliche Adressen ein!";
				document.getElementById("spilerZwei").style.borderColor = "red";
				document.getElementById("spilerEins").style.borderColor = "red";
			} else if (document.getElementById("feldSet").disabled == true) {
				document.getElementById("resultOfGame").textContent = "Spiel hat bereits gestartet";
				document.getElementById("resultOfGame").style.color = "red";
			} else {
				// start des Speiles
				statusChangeButton(false);
				desableSpielWahl();
			}
		} else if (document.getElementById('gegenPC').checked | document.getElementById('kiGegenKi').checked) {
			document.getElementById("resultOfGame").textContent = "Diese Speilart wird noch entwicklet";
			document.getElementById("resultOfGame").style.color = "red";
		} else {
			document.getElementById("resultOfGame").textContent = "Bitte wählen Sie erst eine Spielart";
			document.getElementById("resultOfGame").style.color = "red";
		}

	}

	// varibalen für funktion
	var spielerEinsArray = [];
	var spielerZweiArray = [];
	var player = 1;
	var runde = 0;
	var SpilerEins = 0;
	var SpielerZwei = 0;
	var spielerMail = "";
	// diese fubnktion ist das haubt spiel mittel checkifwinn wird dann der gewinner
	// ermitellt
	function farbeWechseln(btn) {

		var elemente = document.getElementById(btn.id);
		var versuch = btn.id.slice(-1);
		// fehlermeldung entfernen
		document.getElementById("resultOfGame").textContent = "";

		if (spielerZweiArray.length >= 8 && spielerEinsArray.length >= 7) {
			document.getElementById("resultOfGame").textContent = "Unentschiden!";
			document.getElementById("resultOfGame").style.color = "red";
		}
		// es wird geprüft ob der knopf schon gedrückt wurde
		else if (btn.style.backgroundColor == "") {
			// verzweigung für spieler wechsel
			if (player == 0) {
				elemente.style.backgroundColor = "red";
				player -= 1;
				spielerEinsArray[runde] = versuch;
				runde++;
				SpilerEins = checkIfWinn(spielerEinsArray, SpilerEins);
				spielerMail = document.getElementById('spilerZwei').value;
				if (SpilerEins == 3) {
					document.getElementById("resultOfGame").textContent = "Spiler " + spielerMail + " hat gewonnen!";
					document.getElementById("resultOfGame").style.color = "black";
					statusChangeButton(true);
				}
			} else {
				elemente.style.backgroundColor = "blue";
				player = 0;
				spielerZweiArray[runde] = versuch;
				SpielerZwei = checkIfWinn(spielerZweiArray, SpielerZwei);
				runde++;
				spielerMail = document.getElementById('spilerEins').value;
				if (SpielerZwei == 3) {
					document.getElementById("resultOfGame").textContent = "Spiler " + spielerMail + " hat gewonnen!";
					document.getElementById("resultOfGame").style.color = "black";
					statusChangeButton(true);
				}
			}
		} else {
			document.getElementById("resultOfGame").textContent = "Klicke eine noch nicht gewählten knopf!";
			document.getElementById("resultOfGame").style.color = "red";
		}

	}

	// Funktion die alle button den gelichen status gibt
	function statusChangeButton(statuse) {
		for (var i = 0; i < 9; i++) {
			document.getElementById("btn" + i).disabled = statuse;
		}
	}

	// regex validirung durch pattern
	function validateEmail(email) {
		var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return re.test(email);
	}

	// i ist das gewinnArray liste position, j ist die position in der user liste, k
	// ist die position des gwinnarray listen elements
	function checkIfWinn(list, spieler) {
		var gewinnArray = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]
		list = list.sort();
		list = list.filter(Boolean)
		for (var i = 0; i < gewinnArray.length; i++) {
			spieler = 0;
			for (var j = 0; j <= 5; j++) {
				for (var k = 0; k < gewinnArray[i].length; k++) {
					if (list[j] == gewinnArray[i][k]) {
						spieler++;
						if (spieler == 3) {
							return spieler;
						}
					}
				}

			}
		}
	}

	// reset funktion
	function resetSpiel() {
		document.getElementById('gegenSpieler').checked = false;
		document.getElementById('gegenPC').checked = false;
		document.getElementById('kiGegenKi').checked = false;
		document.getElementById('spilerEins').disabled = true;
		document.getElementById('spilerZwei').disabled = true;
		document.getElementById('spiler').disabled = true;
		document.getElementById("spilerEins").value = "";
		document.getElementById("spilerZwei").value = "";
		document.getElementById("spiler").value = "";
		window.location.reload();
	}
// abwählen des feldset wenn das Spiel gestartet wurde
function desableSpielWahl() {
document.getElementById("feldSet").disabled = true;
}