Juego de Gato Usando HTML, JavaScript y CSS

Hola chavos en esta ocasión les traigo algo que realize en mis tiempos de ocio durante mi trabajo, es un juego simple de Gato o TicTacToe.

Este post tiene algo de relevancia ya que he usado algunas características que les pueden ser útiles:

  • CSS
    • hover
      • reaccionar cuando el cursor pasa por encima de un objeto
    • shadow
      • crear objetos en HTML con sombra
    • position
      • Colocar un objeto justo en el centro de la pantalla
  • JavaScript
    • Interactuar con objetos de Html cambiándoles algunos atributos como class, value, etc.
  • HTML
    • Interactuar con funciones de JavaScript

Bueno chavos sin mas por el momento les dejo mi código:

//TicTacToe.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>TicTacToe</title>
<link rel="stylesheet" type="text/css" href="TicTacToeCSS.css" />
<script type="text/javascript" src="TicTacToe.js">
</script>
</head>
<body>
 <div id="body">
  <button id="b11" class="buttons" name="b1" onclick="actions(this)"></button>
  <button id="b12" class="buttons" name="b2" onclick="actions(this)"></button>
  <button id="b13" class="buttons" name="b3" onclick="actions(this)"></button>
  <button id="b21" class="buttons" name="b4" onclick="actions(this)"></button>
  <button id="b22" class="buttons" name="b5" onclick="actions(this)"></button>
  <button id="b23" class="buttons" name="b6" onclick="actions(this)"></button>
  <button id="b31" class="buttons" name="b7" onclick="actions(this)"></button>
  <button id="b32" class="buttons" name="b8" onclick="actions(this)"></button>
  <button id="b33" class="buttons" name="b9" onclick="actions(this)"></button>
 </div>
</body>
</html>

//TicTacToe.js

var con=1;
var b1="b1",b2="b2",b3="b3",b4="b4",b5="b5",b6="b6",b7="b7",b8="b8",b9="b9";
function actions(boton){
 if(boton.className=="buttons"){
//  alert(boton.name);
  boton.className="clicked";
  var text;
  if(con%2==0){
   text="X";
  }else{
   text="O";
  }
  boton.value=text;
//  alert(boton.value);
  boton.appendChild(document.createTextNode(text));
  con++;
  asignation(text,boton);
 }else{
//  alert("Yei!!!");
//  alert(boton.value);
 }
}
function asignation(text,boton){
 if(b1==boton.name){
  b1=text;
 }
 else if(b2==boton.name){
  b2=text;
 }
 else if(b3==boton.name){
  b3=text;
 }
 else if(b4==boton.name){
  b4=text;
 }
 else if(b5==boton.name){
  b5=text;
 }
 else if(b6==boton.name){
  b6=text;
 }
 else if(b7==boton.name){
  b7=text;
 }
 else if(b8==boton.name){
  b8=text;
 }
 else if(b9==boton.name){
  b9=text;
 }
 validation(text);
}
function validation(text){
 if((b1==b2 && b2==b3)||(b1==b5 && b5==b9)||(b3==b5 && b5==b7)||(b4==b5 && b5==b6)||(b7==b8 && b8==b9)||(b1==b4 && b4==b7)||(b2==b5 && b5==b8)||(b3==b6 && b6==b9)){
  var con=confirm(text+" has won!!!\nDo you wanna play again?");
  if(con==true){
   window.location.reload();
  }
 }
}

//TicTacToe.css

@CHARSET "ISO-8859-1";
#body{
 position:absolute;
 width: 550px;
 height: 550px;
 left: 50%;
 top: 50%;
 margin-left: -275px;
 margin-top: -275px;

 -moz-box-shadow: 2px 2px 3px 3px black;
 -webkik-box-shadow:2px 2px 3px 3px black;
 box-shadow: 2px 2px 3px 3px;
}
button{
 width: 150px;
 height: 150px;
 border: none;
 position: absolute;
 font-size: 100px;
 color:white;
}
.clicked{
 background-color: gray;
}
.buttons{
 background-color: blue;
}
.buttons:HOVER {
 background-color: red;
}
#b11{
 top:25px;
 left:25px;
}
#b12{
 top:25px;
 left:200px;
}
#b13{
 top:25px;
 left:375px;
}
#b21{
 top:200px;
 left:25px;
}
#b22{
 top:200px;
 left:200px;
}
#b23{
 top:200px;
 left:375px;
}
#b31{
 top:375px;
 left:25px;
}
#b32{
 top:375px;
 left:200px;
}
#b33{
 top:375px;
 left:375px;
}

Bueno chavos, los dejo por el momento, espero les haya servido este pequeño post, nos vemos y cualquier duda o pregunta dejenmelo en la sección designada. Adiós ^_^/



Comments

Post a Comment

Popular posts from this blog

AfterEffects - Quitar el Fondo de un Video Forma 1: KeyLight

Image
Antes que nada hola a todos ^_^.....en este tutorial les enseñare a quitar el fondo de un video y ya sea poner una imagen u otro video atras del video sin fondo. Existen 3 maneras de hacerlo: ChromaKey(Obsoleto) KeyLight RotoBrush En este tutorial me enfocare en el KeyLight, el cual es la evolucion(por así decirlo) del Chroma Key, esta herramienta ha ganado un Oscar gracias a su potencia y facilidad de usar. Para este tutorial necesitaremos: Adobe After Effects Instalado(yo utilizo el Ae CS6) Un video con FONDO VERDE(No es tan importante el color de fondo de los videos, de preferencia tiene que ser un color distinto a cualquier color de lo que queremos conservar, para asi conservar intacta la parte que queremos dejar, yo recomiendo cualquier color chillón) Un video o imagen que queremos poner de fondo nuevo Ya que tengamos esto, seguimos los siguientes pasos: Abrimos nuestro AfterEffects Una Vez abierto añadimos los 2 videos o el video y la imagen, para este ejem...
Read more

Crear un nuevo Libro de Excel con VBA ES

Image
Hola a todos, hoy les voy a enseñar como crear un nuevo libro de excel con VBA; ustedes lo pueden crear desde Excel o PowerPoint u otro programa de Office, solo necesitan tener la referencia necesaria. Ok antes que nada sie stamos en excel no necesitamos ninguna referencia ya que estas se agregan automáticamente, pero si no lo estamos necesitamos añadir la referencia de la siguiente manera: Click en Herramientas->Referencias Encuentren y seleccionen la librería: Microsoft Excel 14.0 Object Library Click en Ok Ahora crearemos el nuevo Libro, Yo lo voy a crear desde excel y bueno antes de empezar necesitamos tener nuestro ambiente de programación, si no saben como llegar a este paso solo denle click aquí para que vean en el post previo como llegar a esta parte, Ahora empecemos: Click derecho en This Document->Insertar->Modulo Ahora escribamos el siguiente código: Sub createNewWorkbook()     Dim newBook As Workbook   ...
Read more