Criando um jogo da forca em 80 linhas com javascript puro [ nada de framework! ;-) ]

Esse artigo é básicamente para mostrar como é fácil desenvolver coisas legais em javascript, em apenas algumas linhas de código, sem depender de frameworks, basta colocar a caixóla para funcionar.

Então vamos ao código, simples e fácil! 😉

Diagrama de nossa ‘classe’:

function Forca(params){

var root = this,elemento = params.Elemento || document.body;
this.Palavras = params.Palavras || []; // vetor de palavras
this.Palavra = “”;  // palavra corrente
this.Erros = 0; // número de errros
this.Boneco = “”; // desenho do boneco

this.Teclado = function(){ // metodo responsável por montar o teclado.
var teclado = document.getElementById(“forca_teclado”);
if(!teclado){
teclado = document.createElement(“div”);
teclado.setAttribute(“id”,”forca_teclado”);
teclado.setAttribute(“class”,”teclado”);
for(var i = 65; i < 91; i++){
var tecla = document.createElement(“div”);
tecla.setAttribute(“class”,”tecla”);
tecla.innerHTML = String.fromCharCode(i);
tecla.setAttribute(“title”,String.fromCharCode(i));
if(tecla.addEventListener )
tecla.addEventListener(‘click’,function(){ root.Validar(this); },false);
else
tecla.attachEvent(‘onclick’,function(e){ root.Validar(event.srcElement);  });
teclado.appendChild(tecla);
}
elemento.appendChild(teclado);
}
}
this.Sorteio = function(){ //Método responsável pelo sorteio de uma nova palavra.
var novoIndice = Math.ceil(Math.random()*params.Palavras.length-1)
root.Palavra = params.Palavras[novoIndice];
var painel = document.getElementById(“forca_painel”);
if(!painel){
painel = document.createElement(“div”);
painel.setAttribute(“id”,”forca_painel”);
painel.setAttribute(“class”,”painel”);
elemento.appendChild(painel)
}
painel.innerHTML = “”;
for(var i = 0; i < root.Palavra.length;i++){
var letra = document.createElement(“div”);
letra.setAttribute(“id”,root.Palavra.substr(i,1));
letra.setAttribute(“class”,”letra”);
letra.innerHTML = “”;//root.Palavra.substr(i,1);
painel.appendChild(letra);
}
}
this.Validar = function(letra){   // Método responsável por validar e desenhar o boneco.
var desenho = document.getElementById(“forca_desenho”);
if(!desenho){
desenho = document.createElement(“div”);
desenho.setAttribute(“id”,”forca_desenho”);
elemento.appendChild(desenho);
}
var boneco;
if(root.Palavra.indexOf(letra.title) == -1){
this.Erros++;
switch(this.Erros){
case 1: root.Boneco += “\n   o”; break;
case 2: root.Boneco += “\n  \/”; break;
case 3: root.Boneco += “|”; break;
case 4: root.Boneco += “\\”; break;
case 5: root.Boneco += “\n  /”; break;
case 6: root.Boneco += ” \\\n <button onclick=’window.location.reload(true);’ style=’padding:0px;width:85px;border:1px solid black;’>GAME OVER</button>”; break;
}
desenho.innerHTML = ” <pre> “+root.Boneco+” </pre> “;
}
else
{
var indices = [];
for(var i = 0; i < root.Palavra.length;i++)
if(root.Palavra.substr(i,1) == letra.title) indices.push(i);
painel = document.getElementById(“forca_painel”).getElementsByTagName(“div”);
for(var i = 0; i < indices.length; i++)
painel[indices[i]].innerHTML =  letra.title;
}
}
this.Comecar = function(){ // Método responsável por iniciar tudo, criado só para deixar a chamada mais organizada!  😉
root.Teclado();
root.Sorteio();
}
}

A chamada do jogo ficará assim:

var parametros = { Elemento:/*algum elemento (div,e etc…)*/, Palavras:[/* um vetor de palavras, exemplo: “BRASIL”,”PADRE” */] }

var forca = new Forca(parametros);
forca.Comecar();

literalmente simples assim…

Para ver o jogo funcionando, acesse : http://migre.me/5ld1V

Anúncios

Systems Analyst / .Net Developer

Marcado com: , , , , , , , , , , , , , , , , , , ,
Publicado em Artigos
6 comentários em “Criando um jogo da forca em 80 linhas com javascript puro [ nada de framework! ;-) ]
  1. thamiresantos disse:

    Show , achei o que precisava 😀

  2. Show de bola! Sem usar nenhum framework fica mais complicado mesmo. Mas pra quem manja é tranquilo! 🙂

    Rodolfo Jorge Nemer Nogueira
    UFPR – Música – Curitiba / Paraná

  3. Nil disse:

    Mano, o link “Para ver o jogo funcionando” não está funcionando. Você pode postar o código inteiro e operante pra gente ver?!
    Valeu!

  4. Nil disse:

    Tu tem as manha de mostrar aí no código como eu incluo a carga de uma figura relacionada a palavra oculta pra servir como dica?

    Valeu!

  5. SHARON disse:

    Alguém tem o jogo da forca em java no netbeans ?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: