Dibujo de un ahorcado usando Canvas
Clase 29 de 50 • Curso de Programación Básica 2014
Resumen
Ahorcado.js:
Index.html:
//Elijan de un array de palabras aleatorio(Tarea)
var palabra = "Accesibilidad";
var hombre, l;
//Declaración de la clase Ahorcado
var Ahorcado = function (con)
{
//this es las variables locales de la clase, accesibles en toda la clase
//this.contexto es el context de dibujo del canvas, que llega por parametro
//desde la variable con
this.contexto = con;
this.maximo = 5;
this.intentos = 0;
this.vivo = true;
this.dibujar();
}
Ahorcado.prototype.dibujar = function ()
{
var dibujo = this.contexto;
//Dibujando el poste
dibujo.beginPath();
dibujo.moveTo(150,100);
dibujo.lineTo(150,50);
dibujo.lineTo(400,50);
dibujo.lineTo(400,350);
dibujo.lineWidth = 15;
dibujo.strokeStyle = "#000";
dibujo.stroke();
dibujo.closePath();
if(this.intentos > 0)
{
// intentos = 1 --> rostro
dibujo.beginPath();
dibujo.arc(150, 140, 40, 0, Math.PI * 2, false);
dibujo.strokeStyle = "red";
dibujo.lineWidth = 5;
dibujo.stroke();
dibujo.closePath();
if(this.intentos > 1)
{
// intentos = 2 --> torso
dibujo.beginPath();
dibujo.moveTo(150,180);
dibujo.lineTo(150,250);
dibujo.strokeStyle = "red";
dibujo.lineWidth = 5;
dibujo.stroke();
dibujo.closePath();
if(this.intentos > 2)
{
// intentos = 3 --> brazos
dibujo.beginPath();
dibujo.moveTo(120,220);
dibujo.lineTo(150,180);
dibujo.lineTo(180,220);
dibujo.strokeStyle = "red";
dibujo.lineWidth = 5;
dibujo.stroke();
dibujo.closePath();
if(this.intentos > 3)
{
// intentos = 4 --> piernas
dibujo.beginPath();
dibujo.moveTo(120,290);
dibujo.lineTo(150,250);
dibujo.lineTo(180,290);
dibujo.strokeStyle = "red";
dibujo.lineWidth = 5;
dibujo.stroke();
dibujo.closePath();
if(this.intentos > 4)
{
// intentos = 5 --> ojos muertos
dibujo.beginPath();
//Ojo izquierdo
dibujo.moveTo(125,120);
dibujo.lineTo(145,145);
dibujo.moveTo(145,120);
dibujo.lineTo(125,145);
//Ojo derecho
dibujo.moveTo(155,120);
dibujo.lineTo(175,145);
dibujo.moveTo(175,120);
dibujo.lineTo(155,145);
dibujo.strokeStyle = "blue";
dibujo.lineWidth = 5;
dibujo.stroke();
dibujo.closePath();
}
}
}
}
}
}
Ahorcado.prototype.trazar = function ()
{
this.intentos++;
if(this.intentos >= this.maximo)
{
this.vivo = false;
alert("¡Estás muerto!");
}
this.dibujar();
}
function iniciar ()
{
l = document.getElementById("letra");
var b = document.getElementById("boton");
var canvas = document.getElementById("c");
canvas.width = 500;
canvas.height = 400;
var contexto = canvas.getContext("2d");
hombre = new Ahorcado(contexto);
//Convierte a mayúscula un texto
palabra = palabra.toUpperCase();
//Declaro un array con n espacios de acuerdo al largo de la plabara
espacio = new Array(palabra.length);
//Agregamos una función que se dispare al dar click al botón
b.addEventListener("click", agregarLetra);
mostrarPista(espacio);
//mostrarPista(palabra, espacio);
}
function agregarLetra()
{
var letra = l.value;
l.value = "";
mostrarPalabra(palabra, hombre, letra);
}
function mostrarPalabra(palabra, ahorcado, letra)
{
var encontrado = false;
var p;
letra = letra.toUpperCase();
for (p in palabra)
{
if (letra == palabra[p])
{
espacio[p] = letra;
encontrado = true;
}
}
mostrarPista(espacio);
// Si NO lo encontré
if(!encontrado)
{
ahorcado.trazar();
}
if(!ahorcado.vivo)
{
//Mostrar la palabra entera al morir(Tarea)
}
}
function mostrarPista(espacio)
{
var pista = document.getElementById("pista");
var texto = "";
var i;
var largo = espacio.length;
for(i = 0; i<largo; i++)
{
if(espacio[i] != undefined)
{
texto = texto + espacio[i] + " ";
}
else
{
texto += "_ ";
}
}
pista.innerText = texto;
}
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ahorcado</title>
<script type="text/javascript" src="ahorcado.js"></script>
</head>
<body>
<p>
Elige una letra:
<input type="text" id="letra" />
<input type="button" id="boton" value="Boom!!" />
</p>
<h2 id="pista">_ _ _</h2>
<canvas id="c"></canvas>
<script type="text/javascript">
iniciar();
</script>
</body>
</html>