Autor:
Rafael Fuentealba
Competencia:
Desarrollo de Software (Nivel 1)
Asignatura:
Desarrollo de Aplicaciones Cliente Servidor
Palabras Claves:
Gato, html, CSS, JavaScript, Funciones, Validaciones
Descripción de la Actividad:
Elaborar un juego de libre disposición utilizando lenguaje web como HTML y JavaScript, con el objetivo de poner énfasis en la funcionalidad de estos mismos y aplicar el desarrollo de software de estructura sencilla.
Para la ocasión he realizado el juego conocido como "Gato" que posiblemente conozcas y con el cual hayas interactuado en algún momento. Este consiste en una matriz (cuadrado) que se subdivide en 9 casillas, generalmente del mismo tamaño, en donde debes de ir seleccionando una posición para tu figura correspondiente que puede ser "O" o "X".
La idea del juego es que completes un total de tres figuras iguales en la misma dirección, ya sea de forma horizontal, vertical o diagonal.
El sistema del juego va en turnos, lo que quiere decir que si tú escogiste una posición para tu figura en una determinada casilla, la siguiente figura la pondrá tu oponente en la casilla que él quiera. Quien complete primero sus tres figuras continuas en las direcciones ya mencionadas será el ganador.
Respecto al juego creado mediante el uso de las herramientas mencionadas se puede decir que es interactivo porque dos personas juegan a la vez dentro de la misma computadora. Además necesariamente requiere de una conexión a la internet puesto que es un página web como cualquier otra.
Por otro lado, te debo mencionar que aún cumplido esto anterior no te será posible ejecutar el juego en su totalidad porque existen archivos extras que debes tener en tu directorio de trabajo, y que corresponden a las imágenes que yo voy a usar dentro del código html. Para dar solución al problema sólo debes descargar desde tu navegador dos imágenes:
1.- La primera será una imagen que posea una figura de "X",como la de aquí abajo, y la cual deberás guardar en la misma carpeta o directorio donde dejes el archivo html. El nombre que debes colocar al guardar la imagen tiene que ser: "x.png" (x minúscula). Importante es el formato; tiene que ser una imagen png.
2.- La segunda será una imagen con la figura "O", la que deberás guardar en el misma carpeta o directorio donde se encuentre la imagen anterior y el archivo html. Al guardar tendrá que ser así: "0.png", con el mismo formato que la imagen de arriba.
Solución:
Diseñar el juego conocido como "Gato", donde interactuan dos jugadores (X y O)
CÓDIGO HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Juego del Gato</title>
<style>
.cuadro {
width:70px;
height:70px;
border:solid 10px;
float:left;
font-size:25px;
text-align:center;
}
#div_contenedor {
width:240px;
margin:auto;
}
</style>
<script>
var turno1 = "X";
var turno2 = "O";
var flag = 1;
var ban = false;
var casilla = [1,2,3,4,5,6,7,8,9];
function marcar(id){
var celda = document.getElementById(id);
if(flag%2!=0 && casilla[id]!=0){
celda.value = turno1;
document.getElementById("div_turno").innerHTML="Turno del jugador : "+turno2;celda.style.background="lightblue";
casilla[id] = 1;
}else if(flag%2==0 && casilla[id]!=1){
celda.value = turno2;
document.getElementById("div_turno").innerHTML="Turno del jugador : "+turno1;celda.style.background="lightgreen";
casilla[id] = 0;
}
flag++;
jugadorX();
jugadorO();
}
function jugadorX()
{
if(casilla[1]==1 && casilla[2]==1 && casilla[3]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[4]==1 && casilla[5]==1 && casilla[6]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[7]==1 && casilla[8]==1 && casilla[9]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[1]==1 && casilla[5]==1 && casilla[9]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[3]==1 && casilla[5]==1 && casilla[7]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[1]==1 && casilla[4]==1 && casilla[7]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[2]==1 && casilla[5]==1 && casilla[8]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[3]==1 && casilla[6]==1 && casilla[9]==1)
{
alert("Jugador " +turno1+ " Gana");
}
}
function jugadorO()
{
if(casilla[1]==0 && casilla[2]==0 && casilla[3]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[4]==0 && casilla[5]==0 && casilla[6]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[7]==0 && casilla[8]==0 && casilla[9]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[1]==0 && casilla[5]==0 && casilla[9]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[3]==0 && casilla[5]==0 && casilla[7]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[1]==0 && casilla[4]==0 && casilla[7]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[2]==0 && casilla[5]==0 && casilla[8]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[3]==0 && casilla[6]==0 && casilla[9]==0)
{
alert("Jugador " +turno2+ " Gana");
}
}
function reiniciaJuego()
{
location.reload();
}
</script>
</head>
<body bgcolor="yellow">
<h1 id="div_instructions">Instrucciones de juego:</h1>
<ul>
<li>Para iniciar el juego solo se admiten dos jugadores:</li>
<li>Cuando el primer jugador realice el primer click se iniciará el juego</li>
<li>Para poder ganar el jugador deberá completar de manera secuencial 3 cuadros con su figura correspondiente (X ó O)</li>
<li>Si el jugador realiza un movimiento y no ha logrado ganar la partida, se cede el turno al otro jugador</li>
<li>Una vez que un jugador complete las 3 figuras de forma secuencial, se mostrará un mensaje indicando esto</li>
<li>Si el tablero se ha completado sin haber un ganador, se enviará un mensaje indicando esta situación</li>
<li>Para volver a jugar solo debe hacer click sobre el botón <strong>"Reiniciar juego"</strong></li>
</ul>
<!-- Tablero -->
<div id="div_contenedor">
<input type="text" class="cuadro" id="1" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="2" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="3" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="4" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="5" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="6" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="7" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="8" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="9" readonly onclick="marcar(id)">
<div id="div_turno">Turno del jugador: X</div>
<button onclick="reiniciaJuego()">Reiniciar Juego</button>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Juego del Gato</title>
<style>
.cuadro {
width:70px;
height:70px;
border:solid 10px;
float:left;
font-size:25px;
text-align:center;
}
#div_contenedor {
width:240px;
margin:auto;
}
</style>
<script>
var turno1 = "X";
var turno2 = "O";
var flag = 1;
var ban = false;
var casilla = [1,2,3,4,5,6,7,8,9];
function marcar(id){
var celda = document.getElementById(id);
if(flag%2!=0 && casilla[id]!=0){
celda.value = turno1;
document.getElementById("div_turno").innerHTML="Turno del jugador : "+turno2;celda.style.background="lightblue";
casilla[id] = 1;
}else if(flag%2==0 && casilla[id]!=1){
celda.value = turno2;
document.getElementById("div_turno").innerHTML="Turno del jugador : "+turno1;celda.style.background="lightgreen";
casilla[id] = 0;
}
flag++;
jugadorX();
jugadorO();
}
function jugadorX()
{
if(casilla[1]==1 && casilla[2]==1 && casilla[3]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[4]==1 && casilla[5]==1 && casilla[6]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[7]==1 && casilla[8]==1 && casilla[9]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[1]==1 && casilla[5]==1 && casilla[9]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[3]==1 && casilla[5]==1 && casilla[7]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[1]==1 && casilla[4]==1 && casilla[7]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[2]==1 && casilla[5]==1 && casilla[8]==1)
{
alert("Jugador " +turno1+ " Gana");
}
else if(casilla[3]==1 && casilla[6]==1 && casilla[9]==1)
{
alert("Jugador " +turno1+ " Gana");
}
}
function jugadorO()
{
if(casilla[1]==0 && casilla[2]==0 && casilla[3]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[4]==0 && casilla[5]==0 && casilla[6]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[7]==0 && casilla[8]==0 && casilla[9]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[1]==0 && casilla[5]==0 && casilla[9]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[3]==0 && casilla[5]==0 && casilla[7]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[1]==0 && casilla[4]==0 && casilla[7]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[2]==0 && casilla[5]==0 && casilla[8]==0)
{
alert("Jugador " +turno2+ " Gana");
}
else if(casilla[3]==0 && casilla[6]==0 && casilla[9]==0)
{
alert("Jugador " +turno2+ " Gana");
}
}
function reiniciaJuego()
{
location.reload();
}
</script>
</head>
<body bgcolor="yellow">
<h1 id="div_instructions">Instrucciones de juego:</h1>
<ul>
<li>Para iniciar el juego solo se admiten dos jugadores:</li>
<li>Cuando el primer jugador realice el primer click se iniciará el juego</li>
<li>Para poder ganar el jugador deberá completar de manera secuencial 3 cuadros con su figura correspondiente (X ó O)</li>
<li>Si el jugador realiza un movimiento y no ha logrado ganar la partida, se cede el turno al otro jugador</li>
<li>Una vez que un jugador complete las 3 figuras de forma secuencial, se mostrará un mensaje indicando esto</li>
<li>Si el tablero se ha completado sin haber un ganador, se enviará un mensaje indicando esta situación</li>
<li>Para volver a jugar solo debe hacer click sobre el botón <strong>"Reiniciar juego"</strong></li>
</ul>
<!-- Tablero -->
<div id="div_contenedor">
<input type="text" class="cuadro" id="1" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="2" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="3" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="4" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="5" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="6" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="7" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="8" readonly onclick="marcar(id)">
<input type="text" class="cuadro" id="9" readonly onclick="marcar(id)">
<div id="div_turno">Turno del jugador: X</div>
<button onclick="reiniciaJuego()">Reiniciar Juego</button>
</div>
</body>
</html>
Reflexión:
Esta actividad me ha permitido desarrollar los conocimientos instruidos por el profesor en las horas de cátedra, y en específico me ha permitido avanzar para lograr concluir con la competencia de Desarrollo de Software. Esto porque se implementan herramientas que configuran la relación entre el ser humano y la máquina, que puede ser el programa o el archivo que se esté trabajando. Importante es lo último que menciono porque hoy en la actualidad la mayoría de las actividades, por no decir todas, se basan en la comunicación existente entre lo tecnológico y el hombre quien prácticamente utiliza al máximo las herramientas que se le disponen para trabajar en su entorno.
Así como esta actividad, hay algunas otras que me han instruido en el uso de nuevos lenguajes como los que he presentado aquí, siendo html o JavaScript. Estos métodos son realmente útiles para crear servicios que correspondan y satisfagan a las necesidades del usuario, y las cuales son cada día más exigentes debido a la enorme competencia entre quienes los proporcionan. Por ello es tan necesaria la práctica y la adaptación a los recursos que se nos proporcionan, aprovechándolos al máximo con la finalidad de crear algo nuevo que supere a lo ya establecido y que no nos deje en la obsolescencia.
No hay comentarios:
Publicar un comentario