Skip to content

Instantly share code, notes, and snippets.

@kodamirmo

kodamirmo/index.html

Last active June 16, 2016 15:43
Show Gist options
  • Save kodamirmo/0305afea376f4c9bb54a6b574b380d5e to your computer and use it in GitHub Desktop.
Save kodamirmo/0305afea376f4c9bb54a6b574b380d5e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tic tac toe</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/buttons.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body onload="starGame();">
<div class="container">
<h1><center>Tic Tac Toe</center></h1>
<a href="javascript:starGame();" class="button button-3d-highlight button-circle">Juego Nuevo</a>
<div class="tablero"><!--TABLERO-->
<div class="row"><!--PRIMERA FILA-->
<div class="col-md-4">
<div id="caja1" class="tama-cajas caja1-4-izq margen-dere margen-abajo">
<h2 id="boton1" class="top-h2" onclick="nextMove(this);"></h2>
</div>
</div>
<div class="col-md-4">
<div id="caja2" class="tama-cajas caja2-centro margen-abajo">
<h2 id="boton2" class="top-h2" onclick="nextMove(this);"></h2>
</div>
</div>
<div class="col-md-4">
<div id="caja3" class="tama-cajas caja3-der margen-abajo margen-izq">
<h2 id="boton3" class="top-h2" onclick="nextMove(this);"></h2>
</div>
</div>
</div>
<div class="row"><!--SEGUNDA FILA-->
<div class="col-md-4">
<div id="caja4" class="tama-cajas caja1-4-izq arriba margen-dere margen-abajo">
<h2 id="boton4" class="top-h2" onclick="nextMove(this);"></h2>
</div>
</div>
<div class="col-md-4">
<div id="caja5" class="tama-cajas caja5-8-centro arriba margen-abajo">
<h2 id="boton5" class="top-h2" onclick="nextMove(this);"></h2>
</div>
</div>
<div class="col-md-4">
<div id="caja6" class="tama-cajas caja6-9-der arriba margen-abajo margen-izq">
<h2 id="boton6" class="top-h2" onclick="nextMove(this);"></h2>
</div>
</div>
</div>
<div class="row"><!--TERCERA FILA-->
<div class="col-md-4">
<div id="caja7" class="tama-cajas caja1-4-izq arriba2 margen-dere">
<h2 id="boton7" class="top-h2" onclick="nextMove(this);"></h2>
</div>
</div>
<div class="col-md-4">
<div id="caja8" class="tama-cajas caja5-8-centro">
<h2 id="boton8" class="top-h2-8" onclick="nextMove(this);"></h2>
</div>
</div>
<div class="col-md-4">
<div id="caja9" class="tama-cajas caja6-9-der arriba2 margen-izq">
<h2 id="boton9" class="top-h2" onclick="nextMove(this);"></h2>
</div>
</div>
</div>
</div><!--FIN DEL TABLERO-->
<div class="row"><!--MARCADOR-->
<div class="col-md-6">
<h3 id="mensaje">El mensaje va aqui</h3>
</div>
</div>
</div>
<!--SCRIPTS-->
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
</body>
</html>
Raw
test.js
function clearTablero() {
for (var i = 1; i <= 9; i = i +1){
limpiarCaja(i); //Tambien aqui radica un problema porque no limpia mi caja
//$(".tablero").val(""); //Para que input se muestre limpio
}
}
function starGame() {
clearTablero();
document.turn = "X";
if (Math.random() < 0.5) {
document.turn = "O";
}
document.winner = null;
setMessage("Jugador con " + document.turn + " empieza");
}
function setMessage(msg){
document.getElementById("mensaje").innerText = msg;
}
//Aqui radica un problema pero no logro deterctarlo en !=null que hace que no me marque ganaste el juego
function nextMove(square) {
if (document.winner != null) {
setMessage(document.winner + "¡GANASTE EL JUEGO!");
} else if (square.innerText == "") {
square.innerText = document.turn;
switchTurn();
} else {
setMessage("Esta listo para usarse");
}
}
function switchTurn() {
if (checkForWinner(document.turn)) {
setMessage("¡FELICIDADES! " + document.turn + " Has ganado");
document.winner = document.turn;
} else if (document.turn == "X") {
document.turn = "O";
setMessage("Es turno del que tiene " + document.turn + " para tirar");
} else {
document.turn = "X";
setMessage("Es turno del que tiene " + document.turn + " para tirar");
}
}
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;
}
console.log('Check for winner ' + move + ' ' + result);
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 getBox(number) {
var temp = document.getElementById("caja" + number).innerText;
return temp.trim();
}
function limpiarCaja(number) {
document.getElementById("caja" + number),innerText = '';
}
/*
function clearBox(number) {
document.getElementById("caja" + number),innerText = "";
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment