Skip to content

Instantly share code, notes, and snippets.

@giannispan

giannispan/css

Created July 14, 2016 05:15
Show Gist options
  • Save giannispan/30ac61712167dd573a0c36ffe2ade92b to your computer and use it in GitHub Desktop.
Save giannispan/30ac61712167dd573a0c36ffe2ade92b to your computer and use it in GitHub Desktop.
Download ZIP
tic tac toe
Raw
css
.Square {
width: 100px;
height: 100px;
text-align: center;
font-size: 42pt;
font-family: Verdana;
}
Raw
html
<html>
<head>
</head>
<body onload="chooseChar();">
<div class="container">
<h1>Tic-Tac-Toe!</h1>
Choose your character
<div id ="char"> </div>
<!-- <button id="popup" onclick="div_show()">Popup</button> -->
<input type="radio" id="char1" name="char" value="X" onClick="chooseChar(value)" checked="checked"> X
<input type="radio" id="char2" name="char" value="O" onClick="chooseChar(value)" > O
<div id="message"></div>
<table border="4">
<tr>
<td id="s1" class="Square" onclick="nextMove(this);"></td>
<td id="s2" class="Square" onclick="nextMove(this);"></td>
<td id="s3" class="Square" onclick="nextMove(this);"></td>
</tr>
<tr>
<td id="s4" class="Square" onclick="nextMove(this);"></td>
<td id="s5" class="Square" onclick="nextMove(this);"></td>
<td id="s6" class="Square" onclick="nextMove(this);"></td>
</tr>
<tr>
<td id="s7" class="Square" onclick="nextMove(this);"></td>
<td id="s8" class="Square" onclick="nextMove(this);"></td>
<td id="s9" class="Square" onclick="nextMove(this);"></td>
</tr>
</table>
<a href="javascript:startGame();">New game</a>
</div>
</body>
</html>
Raw
js
var human, computer, compMove;
function chooseChar() {
var char = document.getElementById('char').value;
if (document.getElementById('char1').checked) {
document.turn = document.getElementById('char1').value;
}
else {
document.turn = document.getElementById('char2').value;
}
startGame();
}
function startGame() {
//chooseChar();
//document.turn = null;
for (var i = 1; i <= 9; i = i + 1) {
clearBox(i);
}
// clearChar();
human = getChar();
if (human == "X") {
computer = "O";
}
else if (human == "O"){
computer = "X";
}
document.getElementById("message").innerText = "";
document.winner = null;
//compMove();
}
function setMessage(msg) {
document.getElementById("message").innerText = msg;
}
function nextMove(square) {
if (document.winner != null) {
setMessage(document.winner + " already won the game.");
} else if (square.innerText == "") {
square.innerText = document.turn;
switchTurn();
compMove();
} else {
setMessage("That square is already used.");
}
}
function switchTurn() {
if (checkForWinner(document.turn)) {
setMessage(document.turn + " Wins!");
document.winner = document.turn;
} else if (document.turn == "X") {
document.turn = "O";
setMessage("It's " + document.turn + "'s turn!");
} else {
document.turn = "X";
setMessage("It's " + document.turn + "'s turn!");
}
}
function checkForWinner(move) {
var result = false;
if (checkRow(1, 2, 3, move) ||
checkRow(4, 5, 6, move) ||
checkRow(7, 8, 9, move) ||
checkRow(1, 4, 7, move) ||
checkRow(2, 5, 8, move) ||
checkRow(3, 6, 9, move) ||
checkRow(1, 5, 9, move) ||
checkRow(3, 5, 7, move)) {
result = true;
}
return result;
}
function checkRow(a, b, c, move) {
var result = false;
if (getBox(a) == move && getBox(b) == move && getBox(c) == move) {
result = true;
}
return result;
}
function clearBox(number) {
document.getElementById("s" + number).innerText = "";
}
function clearChar(number) {
document.getElementById("char").innerText = "";
}
function getBox(number) {
return document.getElementById("s" + number).innerText;
}
function getChar(number) {
return document.turn;
}
var compMove = function () {
if (getBox(1) == "" && ((getBox(3) == human && getBox(2) == human) || (getBox(9) == human && getBox(5) == human) || (getBox(7) == human && getBox(4) == human))) {
document.getElementById("s1").innerText = computer;
switchTurn();
}
else{
if (getBox(2) == "" && ((getBox(1) == human && getBox(3) == human) || (getBox(8) == human && getBox(6) == human))) {
document.getElementById("s2").innerText = computer;
switchTurn();
}
else {
if (getBox(3) == "" && ((getBox(1) == human && getBox(2) == human) || (getBox(7) == human && getBox(5) == human) || (getBox(9) == human && getBox(6) == human))) {
document.getElementById("s3").innerText = computer;
switchTurn();
}
else {
if (getBox(9) == "" && ((getBox(7) == human && getBox(8) == human) || (getBox(1) == human && getBox(5) == human) || (getBox(3) == human && getBox(6) == human))) {
document.getElementById("s9").innerText = computer;
switchTurn();
}
else{
if (getBox(7) == "" && ((getBox(9) == human && getBox(8) == human) || (getBox(3) == human && getBox(5) == human) || (getBox(1) == human && getBox(4) == human))) {
document.getElementById("s7").innerText = computer;
switchTurn();
}
else{
if (getBox(8) == "" && ((getBox(9) == human && getBox(7) == human) || (getBox(2) == human && getBox(5) == human))) {
document.getElementById("s8").innerText = computer;
switchTurn();
}
else{
if (getBox(4) == "" && ((getBox(6) == human && getBox(5) == human) || (getBox(1) == human && getBox(7) == human))) {
document.getElementById("s4").innerText = computer;
switchTurn();
}
else{
if (getBox(6) == "" && ((getBox(3) == human && getBox(9) == human) || (getBox(5) == human && getBox(4) == human))) {
document.getElementById("s6").innerText = computer;
switchTurn();
}
else{
if (getBox(5) == "" && ((getBox(3) == human && getBox(7) == human) || (getBox(9) == human && getBox(1) == human) || (getBox(6) == human && getBox(4) == human) || (getBox(8) == human && getBox(2) == human))) {
document.getElementById("s5").innerText = computer;
switchTurn();
}
else{
if (getBox(5) == "") {
document.getElementById("s5").innerText = computer;
switchTurn();
}
else{
if (getBox(3) == "" && getBox(6) == "") {
document.getElementById("s3").innerText = computer;
switchTurn();
}
else{
if (getBox(1) == "") {
document.getElementById("s1").innerText = computer;
switchTurn();
}
else{
if (getBox(9) == "") {
document.getElementById("s9").innerText = computer;
switchTurn();
}
else{
if (getBox(8) == "") {
document.getElementById("s8").innerText = computer;
switchTurn();
}
else{
if (getBox(4) == "") {
document.getElementById("s4").innerText = computer;
switchTurn();
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
//////////////////////////////////////////////////
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment