Skip to content

Instantly share code, notes, and snippets.

@eduardo22i

eduardo22i/Tic-Tac-Toe Game

Last active August 29, 2015 14:12
Show Gist options
  • Save eduardo22i/2d47a2e4e5901a676cc5 to your computer and use it in GitHub Desktop.
Save eduardo22i/2d47a2e4e5901a676cc5 to your computer and use it in GitHub Desktop.
Download ZIP
A HTML/Javascript Tic-Tac-Toe game.
Raw
Tic-Tac-Toe Game
<html>
<head>
<title>Tic-Tac-Toe</title>
<style>
body {
font-family: sans-serif;
color: #535353;
}
.cell {
width: 100px;
height: 100px;
margin: 10px;
float: left;
border: #535353 1px solid;
text-align: center;
line-height: 100px;
font-size: 28px;
}
.cell:hover {
cursor: pointer;
}
hr {
clear: both;
}
</style>
</head>
<body>
<div id="game"></div>
<script>
var col = 3;
var row = 3;
var player = "x";
var enemy = "0";
var gameEnded = false;
function createGame () {
var game = document.getElementById("game");
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
var cell = document.createElement('div');
cell.id = "c"+i + "." + j;
cell.className = "cell";
cell.onclick = function () {
if (!gameEnded) {
if (this.innerHTML == "") {
this.innerHTML = player;
if (checkState ()) {
alert("Win");
gameEnded = true;
return true;
}
enemyMove ();
if (checkState ()) {
alert("Loose :( ");
gameEnded = true;
return true;
}
}
}
};
game.appendChild(cell);
}
}
game.style.width = (col*100 + col*20 + col*2 )+ "px";
game.style.margin = "auto";
}
function enemyMove () {
//Attack
//Horizontal case
var targetPosition = {x:0 , y:0};
var targetCellType;
var foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == enemy &&
document.getElementById("c"+i+"."+(j+1)) &&
document.getElementById("c"+i+"."+(j+1)).innerHTML == enemy
) {
foundTargetBasedOnPlayer = true;
targetCellType = "horz";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "horz") {
if (row > targetPosition.y +2 ) {
var cell = document.getElementById("c"+targetPosition.x+"."+(targetPosition.y+2) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else {
var cell = document.getElementById("c"+targetPosition.x+"."+(targetPosition.y-1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//horizontal Jump
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == enemy &&
document.getElementById("c"+i+"."+(j+2)) &&
document.getElementById("c"+i+"."+(j+2)).innerHTML == enemy
) {
foundTargetBasedOnPlayer = true;
targetCellType = "jHorz";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "jHorz") {
if (row > targetPosition.y +2 ) {
var cell = document.getElementById("c"+targetPosition.x+"."+(targetPosition.y+1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else {
var cell = document.getElementById("c"+targetPosition.x+"."+(targetPosition.y-1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Vertial case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == enemy &&
document.getElementById("c"+(i+1)+"."+j) &&
document.getElementById("c"+(i+1)+"."+j).innerHTML == enemy
) {
foundTargetBasedOnPlayer = true;
targetCellType = "vert";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "vert") {
if (col > targetPosition.x +2 ) {
var cell = document.getElementById("c"+(targetPosition.x+2)+"."+targetPosition.y );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+targetPosition.y);
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Vertial Jump case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == enemy &&
document.getElementById("c"+(i+2)+"."+j) &&
document.getElementById("c"+(i+2)+"."+j).innerHTML == enemy
) {
foundTargetBasedOnPlayer = true;
targetCellType = "jVert";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "jVert") {
if (col > targetPosition.x +2 ) {
var cell = document.getElementById("c"+(targetPosition.x+1)+"."+targetPosition.y );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+targetPosition.y);
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Diagonal 1 case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == enemy &&
document.getElementById("c"+(i+1)+"."+(j+1)) &&
document.getElementById("c"+(i+1)+"."+(j+1)).innerHTML == enemy
) {
foundTargetBasedOnPlayer = true;
targetCellType = "diag1";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "diag1") {
if (col > targetPosition.x +2 && row > targetPosition.y+2 ) {
var cell = document.getElementById("c"+(targetPosition.x+2)+"."+(targetPosition.y+2) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else if ((targetPosition.x -1) >= 0 && (targetPosition.y-1) >= 0) {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+(targetPosition.y-1));
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Diagonal Jump 1 case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == enemy &&
document.getElementById("c"+(i+2)+"."+(j+2)) &&
document.getElementById("c"+(i+2)+"."+(j+2)).innerHTML == enemy
) {
foundTargetBasedOnPlayer = true;
targetCellType = "diag1";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "diag1") {
if (col > targetPosition.x +1 && row > targetPosition.y+1 ) {
var cell = document.getElementById("c"+(targetPosition.x+1)+"."+(targetPosition.y+1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else if ((targetPosition.x -1) >= 0 && (targetPosition.y-1) >= 0) {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+(targetPosition.y-1));
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Diagonal 2 case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var j = 0; j < col; j++) {
for (var i = 0; i < row; i++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == enemy &&
document.getElementById("c"+(i-1)+"."+(j+1)) &&
document.getElementById("c"+(i-1)+"."+(j+1)).innerHTML == enemy
) {
foundTargetBasedOnPlayer = true;
targetCellType = "diag2";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "diag2") {
if (targetPosition.x - 2 >= 0 && row > targetPosition.y +2) {
var cell = document.getElementById("c"+(targetPosition.x-2)+"."+(targetPosition.y+2) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else if ((targetPosition.x +1) < row && (targetPosition.y-1) >= 0 ) {
var cell = document.getElementById("c"+(targetPosition.x+1)+"."+(targetPosition.y-1));
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Diagonal Jump 2 case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var j = 0; j < col; j++) {
for (var i = 0; i < row; i++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == enemy &&
document.getElementById("c"+(i-2)+"."+(j+2)) &&
document.getElementById("c"+(i-2)+"."+(j+2)).innerHTML == enemy
) {
foundTargetBasedOnPlayer = true;
targetCellType = "diag2";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "diag2") {
if (targetPosition.x - 1 >= 0 && row > targetPosition.y +1) {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+(targetPosition.y+1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else if ((targetPosition.x +1) < row && (targetPosition.y-1) >= 0 ) {
var cell = document.getElementById("c"+(targetPosition.x+1)+"."+(targetPosition.y-1));
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Defend
//Horizontal case
var targetPosition = {x:0 , y:0};
var targetCellType;
var foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == player &&
document.getElementById("c"+i+"."+(j+1)) &&
document.getElementById("c"+i+"."+(j+1)).innerHTML == player
) {
foundTargetBasedOnPlayer = true;
targetCellType = "horz";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "horz") {
if (row > targetPosition.y +2 ) {
var cell = document.getElementById("c"+targetPosition.x+"."+(targetPosition.y+2) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else {
var cell = document.getElementById("c"+targetPosition.x+"."+(targetPosition.y-1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//horizontal Jump
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == player &&
document.getElementById("c"+i+"."+(j+2)) &&
document.getElementById("c"+i+"."+(j+2)).innerHTML == player
) {
foundTargetBasedOnPlayer = true;
targetCellType = "jHorz";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "jHorz") {
if (row > targetPosition.y +2 ) {
var cell = document.getElementById("c"+targetPosition.x+"."+(targetPosition.y+1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else {
var cell = document.getElementById("c"+targetPosition.x+"."+(targetPosition.y-1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Vertial case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == player &&
document.getElementById("c"+(i+1)+"."+j) &&
document.getElementById("c"+(i+1)+"."+j).innerHTML == player
) {
foundTargetBasedOnPlayer = true;
targetCellType = "vert";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "vert") {
if (col > targetPosition.x +2 ) {
var cell = document.getElementById("c"+(targetPosition.x+2)+"."+targetPosition.y );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+targetPosition.y);
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Vertial Jump case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == player &&
document.getElementById("c"+(i+2)+"."+j) &&
document.getElementById("c"+(i+2)+"."+j).innerHTML == player
) {
foundTargetBasedOnPlayer = true;
targetCellType = "jVert";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "jVert") {
if (col > targetPosition.x +2 ) {
var cell = document.getElementById("c"+(targetPosition.x+1)+"."+targetPosition.y );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+targetPosition.y);
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Diagonal 1 case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == player &&
document.getElementById("c"+(i+1)+"."+(j+1)) &&
document.getElementById("c"+(i+1)+"."+(j+1)).innerHTML == player
) {
foundTargetBasedOnPlayer = true;
targetCellType = "diag1";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "diag1") {
if (col > targetPosition.x +2 && row > targetPosition.y+2 ) {
var cell = document.getElementById("c"+(targetPosition.x+2)+"."+(targetPosition.y+2) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else if ((targetPosition.x -1) >= 0 && (targetPosition.y-1) >= 0) {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+(targetPosition.y-1));
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Diagonal Jump 1 case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == player &&
document.getElementById("c"+(i+2)+"."+(j+2)) &&
document.getElementById("c"+(i+2)+"."+(j+2)).innerHTML == player
) {
foundTargetBasedOnPlayer = true;
targetCellType = "diag1";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "diag1") {
if (col > targetPosition.x +1 && row > targetPosition.y+1 ) {
var cell = document.getElementById("c"+(targetPosition.x+1)+"."+(targetPosition.y+1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else if ((targetPosition.x -1) >= 0 && (targetPosition.y-1) >= 0) {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+(targetPosition.y-1));
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Diagonal 2 case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var j = 0; j < col; j++) {
for (var i = 0; i < row; i++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == player &&
document.getElementById("c"+(i-1)+"."+(j+1)) &&
document.getElementById("c"+(i-1)+"."+(j+1)).innerHTML == player
) {
foundTargetBasedOnPlayer = true;
targetCellType = "diag2";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "diag2") {
if (targetPosition.x - 2 >= 0 && row > targetPosition.y +2) {
var cell = document.getElementById("c"+(targetPosition.x-2)+"."+(targetPosition.y+2) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else if ((targetPosition.x +1) < row && (targetPosition.y-1) >= 0 ) {
var cell = document.getElementById("c"+(targetPosition.x+1)+"."+(targetPosition.y-1));
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//Diagonal Jump 2 case
targetPosition = {x:0 , y:0};
targetCellType;
foundTargetBasedOnPlayer = false;
for (var j = 0; j < col; j++) {
for (var i = 0; i < row; i++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML == player &&
document.getElementById("c"+(i-2)+"."+(j+2)) &&
document.getElementById("c"+(i-2)+"."+(j+2)).innerHTML == player
) {
foundTargetBasedOnPlayer = true;
targetCellType = "diag2";
targetPosition.x = i;
targetPosition.y = j;
}
}
}
if (foundTargetBasedOnPlayer) {
if (targetCellType == "diag2") {
if (targetPosition.x - 1 >= 0 && row > targetPosition.y +1) {
var cell = document.getElementById("c"+(targetPosition.x-1)+"."+(targetPosition.y+1) );
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
} else if ((targetPosition.x +1) < row && (targetPosition.y-1) >= 0 ) {
var cell = document.getElementById("c"+(targetPosition.x+1)+"."+(targetPosition.y-1));
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
return true ;
}
}
}
}
//random move
var endLoop = false;
var cont = 0;
do {
var eCol = Math.floor(Math.random()*3);
var eRow = Math.floor(Math.random()*3);
var cell = document.getElementById("c"+eCol+"."+eRow);
if (cell.innerHTML == "") {
cell.innerHTML = enemy;
endLoop = true;
}
cont++;
if (cont>= (col*row) ) {
endLoop = true;
}
} while (!endLoop);
}
function checkState () {
var winningColor = "#dedddd";
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML != "" &&
document.getElementById("c"+i+"."+(j+1)) &&
document.getElementById("c"+i+"."+(j+1)).innerHTML == cell.innerHTML &&
document.getElementById("c"+i+"."+(j+2)) &&
document.getElementById("c"+i+"."+(j+2)).innerHTML == cell.innerHTML
) {
cell.style.background = winningColor;
document.getElementById("c"+i+"."+(j+1)).style.background = winningColor;
document.getElementById("c"+i+"."+(j+1)).style.background = winningColor;
return true;
}
}
}
for (var j = 0; j < col; j++) {
for (var i = 0; i < row; i++) {
var cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML != "" &&
document.getElementById("c"+(i+1)+"."+j) &&
document.getElementById("c"+(i+1)+"."+j).innerHTML == cell.innerHTML &&
document.getElementById("c"+(i+2)+"."+j) &&
document.getElementById("c"+(i+2)+"."+j).innerHTML == cell.innerHTML
) {
cell.style.background = winningColor;
document.getElementById("c"+(i+1)+"."+j).style.background = winningColor;
document.getElementById("c"+(i+2)+"."+j).style.background = winningColor;
return true;
}
}
}
for (var j = 0; j < col; j++) {
for (var i = 0; i < row; i++) {
var cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML != "" &&
document.getElementById("c"+(i+1)+"."+(j+1)) &&
document.getElementById("c"+(i+1)+"."+(j+1)).innerHTML == cell.innerHTML &&
document.getElementById("c"+(i+2)+"."+(j+2)) &&
document.getElementById("c"+(i+2)+"."+(j+2)).innerHTML == cell.innerHTML
) {
cell.style.background = winningColor;
document.getElementById("c"+(i+1)+"."+(j+1)).style.background = winningColor;
document.getElementById("c"+(i+2)+"."+(j+2)).style.background = winningColor;
return true;
}
}
}
for (var j = 0; j < col; j++) {
for (var i = 0; i < row; i++) {
cell = document.getElementById("c"+i+"."+j);
if ( cell.innerHTML != "" &&
document.getElementById("c"+(i-1)+"."+(j+1)) &&
document.getElementById("c"+(i-1)+"."+(j+1)).innerHTML == cell.innerHTML &&
document.getElementById("c"+(i-2)+"."+(j+2)) &&
document.getElementById("c"+(i-2)+"."+(j+2)).innerHTML == cell.innerHTML
) {
cell.style.background = winningColor;
document.getElementById("c"+(i-1)+"."+(j+1)).style.background = winningColor;
document.getElementById("c"+(i-2)+"."+(j+2)).style.background = winningColor;
return true;
}
}
}
return false;
}
createGame ();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment