Jogo da Forca com Imagem dica

Nilww · Setembro 25, 2013

Brothers,

Encontrei este jogo da forca, mas ele parece incompleto, pois o bonequinho enforcado não funciona de acordo com os erros cometidos.

Outra coisa é que eu queria sempre mostrar uma imagem (como dica) de acordo com a palavra selecionada.

Como sou iniciante em javascript, gostaria de uma ajuda para incluir estas duas soluções nesse código:

<script>
Array.prototype.random = function() {
/*Retorna um valor randômico de um array*/
    return this[Math.floor((Math.random()*this.length))];
}
 
Array.prototype.chrArrayToString = function(sep) {
    var a = new String();
var len = this.length;
    for (var i = 0; i < len; i++) {        
        a += this[i] 
if (i+1<len) a += sep;
    }
    return a;    
}
 
Array.prototype.search = function(s,q){
/*Multi-dimensional array search in javascript*/
var len = this.length;
if (q) {
s=s.toString();
for(var i=0; i<len; i++){
if(this[i].constructor == Array) if(this[i].search(s,q)) return true;
if(this[i].toString().indexOf(s) != -1) return true;
}
}
else {
for(var i=0; i<len; i++){
if(this[i].constructor == Array) if(this[i].search(s,q)) return true;
if(this[i]===s) return true;
}
}
return false;
}
 
String.prototype.replaceAt=function() {
  var rlen=(arguments[2]==null?1:arguments[2]);
  return this.substring(0,arguments[0])+arguments[1]+this.substring(arguments[0]+rlen);
}
 
String.prototype.formatCurrency = function(c) {
    var t = this; if(c == undefined) c = 2;
    var p, d = (t=t.split("."))[1].substr(0, c);
    for(p = (t=t[0]).length; (p-=3) > 1;) {
        t = t.substr(0,p) + "." + t.substr(p);
    }
    return t+","+d+Array(c+1-d.length).join(0);
}
 
String.prototype.tiraacento = function (word){
var palavra = this.toLowerCase();
palavra = palavra.replace(/[áàâãª]/g,'a');
palavra = palavra.replace(/[ÁÀÂÃ]/g,"A");
palavra = palavra.replace(/[éèê]/g,"e");
palavra = palavra.replace(/[ÉÈÊ]/g,"E");
palavra = palavra.replace(/[íìî]/g,"i");
palavra = palavra.replace(/[óòôõº]/g,"o");
palavra = palavra.replace(/[ÓÒÔÕ]/g,"O");
palavra = palavra.replace(/[úùû]/g,"u");
palavra = palavra.replace(/[ÚÙÛ]/g,"U");
return palavra;
}
 
/* Construtor da classe */
function forca() {}
 
function executa(e){
    /* Correção para eventos quebrados da Microsoft */
    if(typeof(e)=='undefined')var e=window.event;
    source=e.target?e.target:e.srcElement;
    /* Correção para o bug do Konqueror/Safari */
    if(source.nodeType==3)source=source.parentNode ;
 
/* Obtém a letra digitada */
var letra=source.value.tiraacento();
 
/* validação de entrada */
var validentry=/[A-Za-zÀ-ú]/
source.value="";
if(!validentry.test(letra)) return false
 
/* Se a letra ainda não está na lista de tentativas, adicione-a */
if(!this.letrastentadas.search(letra)) {
this.letrastentadas.push(letra);
this.tries.innerHTML = "Letras tentadas: " + this.letrastentadas.chrArrayToString(',');
}
if (this.palavraminuscula.indexOf(letra) != -1){ 
/* Achei a letra na palavra ! */
this.mostraletras(letra);
}else{ 
this.divmessages.innerHTML = 'A palavra não contém a letra ' + letra;
this.verificaerros(letra);
}
}
 
function verificaerros(letra){
/* se tem 0 erros ou a letra ainda não está na lista de letras erradas */
if (this.errors ==0 || !this.erradasletras.search(letra)){
this.erradasletras.push(letra);
this.erros++;
}
 
this.diverros.innerHTML = this.erros + ' erro(s)';
 
/* número máximo de error artingido, reiniciar o jogo ? */
if (this.erros>5){
this.divmessages.innerHTML = 'Fim de jogo!<br /> A palavra era ' + this.palavraselecionada;
var denovo = confirm("Quer jogar de novo?");
if (denovo==true) this.init();
}
}
 
function mostraletras(caractere){
/* em board], temos um array do tamanho da palavra oculta.
Se não foi achado ainda, board[caractere] =0
Após achar, board[caractere] =1
Depois de achado e exibido, board[caractere] =2
*/
for (var x=this.t-1; x>=0;x--){
if (this.palavraminuscula.charAt(x) == caractere) this.board[x]=1;
}
this.mostrapalavra();
}
 
function mostrapalavra(){
for (var x=0; x<this.t;x++){
if (this.board[x] & 1){
var ch = this.selecionadaarray[x];
this.wordoculta=this.wordoculta.replaceAt(x, ch);
this.board[x] = 2;
}
}
this.telaoculta.innerHTML = this.wordoculta;
 
if (this.wordoculta==this.palavraselecionada){
this.telaoculta.innerHTML = "Parabéns, você acertou! A palavra é: " + this.palavraselecionada;
var denovo = confirm("Quer jogar de novo?");
if (denovo==true) this.init()
}
}
 
function iniciar(){
this.erros=0;
this.wordoculta=new String;
this.erradasletras=new Array;
this.letrastentadas=new Array;
this.board=new Array;
this.selecionadaarray=new Array;
 
var palavras = new Array('Walter', 'Aline', 'Cecília', 'Rodrigo', 'Cidades', 'Coração', 'Freud', 'Jônatas', 
'Rafael', 'Aprígio', 'javascript','venkman','mozilla','php','manga','mosquito', 'Nina', 'Lewis','Einstein');
 
this.size = document.getElementById('tamanho');
this.divmessages = document.getElementById('messages');
this.diverros=document.getElementById('erros');
this.telaoculta=document.getElementById('palavraoculta');
this.tries=document.getElementById('tentativas');
 
this.palavraselecionada = palavras.random();
this.palavraminuscula = this.palavraselecionada.tiraacento();
this.t=this.palavraselecionada.length;
 
this.wordoculta=this.palavraminuscula.replace(/[A-Za-zÀ-ú]/g,'_');
for (var z=0;z<this.t;z++){
  this.board[z]=0;
  this.selecionadaarray[z] = this.palavraselecionada.charAt(z);
}
this.telaoculta.innerHTML = this.wordoculta;
this.divmessages.innerHTML = 'Novo jogo iniciado';
this.diverros.innerHTML = 'Nenhum erro até o momento';
this.size.innerHTML = 'A palavra tem ' + this.t + ' letras';
this.tries.innerHTML = "Letras tentadas:";
}
 
forca.prototype.executa=executa
forca.prototype.verificaerros=verificaerros
forca.prototype.mostraletras=mostraletras
forca.prototype.mostrapalavra=mostrapalavra
forca.prototype.init=iniciar
 
function executaforca(e){
fo.executa(e);
}
 
function reinicio(){
document.getElementById('entrada').focus();
fo.init();
}
 
window.onload = init
 
function init(){
document.getElementById('entrada').focus();
fo = new forca();
fo.init();
var inputentry=document.getElementById('entrada');
inputentry.onkeyup=executaforca;
var novo=document.getElementById('new');
novo.onclick=reinicio
}
</script>
 
<style>
input.hid{ display:none; }
body{ background-color:#fff; font-family:Verdana,Arial,Helvetica; color:blue; font-weight:bold;}
#palavraoculta{ letter-spacing:5px; }
input.entry{ border:1px solid #666666; background-color: #ffffff; }
</style>
 
<head>
<title>Forca</title>
</head>
<center>
<br><br><br>
<body>
<div id="tamanho"></div>
<div id="erros"></div>
<div id="palavraoculta"></div>
<br />
<form>
<input id="hid" class="hid"></input>
<input id="entrada" type="text" class="entry" size="1" maxlength="1"></input>
<div id="messages"></div>
<div id="tentativas"></div><br />
<input type="button" value="Tentar Outra Palavra" id="new"></input>
</form>
<pre>
   ____
   |  |
   |  O
    | /|\
    | / \
|
</pre>
 
</body>
</center>
</html>

Webdre · Setembro 30, 2013

Alterei seu código segue o modelo aqui, adicionei uma imagem e criei os 7 modelos dela sendo o 0(zero) o modelo sem o boneco.

Na linha de código de verificação de erro, usando getElementById alterei o src da imagem.

Você pode utilizar algo semelhante para as imagens de dica que mencionou em seu post.

function verificaerros(letra){
	/* se tem 0 erros ou a letra ainda não está na lista de letras erradas */
	if (this.errors ==0 || !this.erradasletras.search(letra)){
		this.erradasletras.push(letra);
		this.erros++;
	}
	
	document.getElementById('imgforca').src="forca"+this.erros+".png"; //aqui<<
	this.diverros.innerHTML = this.erros + ' erro(s)';
	 
	/* número máximo de error artingido, reiniciar o jogo ? */
	if (this.erros>5){
	this.divmessages.innerHTML = 'Fim de jogo!<br /> A palavra era ' + this.palavraselecionada;
	var denovo = confirm("Quer jogar de novo?");
	if (denovo==true) this.init();
	}
}

Ver modelo

Qualquer duvida, manda um email para aula@webdre.com.br

Nilww · Setembro 30, 2013

Cara! Sus dicas me inspiraram a completar a solução!

Valeu mesmo!

Veja aí como ficou o código definitivo:

<!doctype html>
<html lang="pt-br">

<head>
<meta charset="utf-8" />
<title>Jogo - Forca</title>

<script>
Array.prototype.random = function() {
/*Retorna um valor randômico de um array*/
return this[Math.floor((Math.random()*this.length))];
}

Array.prototype.chrArrayToString = function(sep) {
var a = new String();
var len = this.length;
for (var i = 0; i < len; i++) {
a += this
if (i+1<len) a += sep;
}
return a;
}

Array.prototype.search = function(s,q){
/*Multi-dimensional array search in javascript*/
var len = this.length;
if (q) {
s=s.toString();
for(var i=0; i<len; i++){
if(this.constructor == Array) if(this.search(s,q)) return true;
if(this.toString().indexOf(s) != -1) return true;
}
}
else {
for(var i=0; i<len; i++){
if(this.constructor == Array) if(this.search(s,q)) return true;
if(this===s) return true;
}
}
return false;
}

String.prototype.replaceAt=function() {
var rlen=(arguments[2]==null?1:arguments[2]);
return this.substring(0,arguments[0])+arguments[1]+this.substring(arguments[0]+rlen);
}

String.prototype.formatCurrency = function© {
var t = this; if(c == undefined) c = 2;
var p, d = (t=t.split("."))[1].substr(0, c);
for(p = (t=t[0]).length; (p-=3) > 1;) {
t = t.substr(0,p) + "." + t.substr(p);
}
return t+","+d+Array(c+1-d.length).join(0);
}

String.prototype.tiraacento = function (word){
var palavra = this.toLowerCase();
palavra = palavra.replace(/[áàâãª]/g,'a');
palavra = palavra.replace(/[ÁÀÂÃ]/g,"A");
palavra = palavra.replace(/[éèê]/g,"e");
palavra = palavra.replace(/[ÉÈÊ]/g,"E");
palavra = palavra.replace(/[íìî]/g,"i");
palavra = palavra.replace(/[óòôõº]/g,"o");
palavra = palavra.replace(/[ÓÒÔÕ]/g,"O");
palavra = palavra.replace(/[úùû]/g,"u");
palavra = palavra.replace(/[ÚÙÛ]/g,"U");
return palavra;
}

/* Construtor da classe */
function forca() {}

function executa(e){
/* Correção para eventos quebrados da Microsoft */
if(typeof(e)=='undefined')var e=window.event;
source=e.target?e.target:e.srcElement;
/* Correção para o bug do Konqueror/Safari */
if(source.nodeType==3)source=source.parentNode ;

/* Obtém a letra digitada */
var letra=source.value.tiraacento();

/* validação de entrada */
var validentry=/[A-Za-zÀ-ú]/
source.value="";
if(!validentry.test(letra)) return false

/* Se a letra ainda não está na lista de tentativas, adicione-a */
if(!this.letrastentadas.search(letra)) {
this.letrastentadas.push(letra);
this.tries.innerHTML = "Letras tentadas: " + this.letrastentadas.chrArrayToString(',');
}
if (this.palavraminuscula.indexOf(letra) != -1){
/* Achei a letra na palavra ! */
this.mostraletras(letra);
}else{
this.divmessages.innerHTML = 'A palavra não contém a letra ' + letra;
this.verificaerros(letra);
}
}

function verificaerros(letra){
/* se tem 0 erros ou a letra ainda não está na lista de letras erradas */
if (this.errors ==0 || !this.erradasletras.search(letra)){
this.erradasletras.push(letra);
this.erros++;
}
switch (this.erros)
{
case 1:
var parteforca = "______<br>|        |<br>|        O<br>|<br>|<br>|<br>--";
document.getElementById('desenhaforca').innerHTML=parteforca; //☹ Carinha
break;
case 2:
var parteforca = "______<br>|        |<br>|        O<br>|        |<br>|<br>|<br>--";
document.getElementById('desenhaforca').innerHTML=parteforca;
break;
case 3:
var parteforca = "______<br>|        |<br>|        O<br>|      /|<br>|<br>|<br>--";
document.getElementById('desenhaforca').innerHTML=parteforca;
break;
case 4:
var parteforca = "______<br>|        |<br>|        O<br>|      /|\\<br>|<br>|<br>--";
document.getElementById('desenhaforca').innerHTML=parteforca;
break;
case 5:
var parteforca = "______<br>|        |<br>|        O<br>|      /|\\<br>|      /<br>|<br>--";
document.getElementById('desenhaforca').innerHTML=parteforca;
break;
case 6:
var parteforca = "______<br>|        |<br>|        O<br>|      /|\\<br>|       /\\<br>|<br>--";
document.getElementById('desenhaforca').innerHTML=parteforca;
break;
}

this.diverros.innerHTML = this.erros + ' erro(s)';

/* número máximo de error artingido, reiniciar o jogo ? */
if (this.erros>5){
this.divmessages.innerHTML = 'Fim de jogo!<br> A palavra era ' + this.palavraselecionada;
var denovo = confirm("Quer jogar de novo?");
if (denovo==true) this.init();
}
}

function mostraletras(caractere){
for (var x=this.t-1; x>=0;x--){
if (this.palavraminuscula.charAt(x) == caractere) this.board[x]=1;
}
this.mostrapalavra();
}

function mostrapalavra(){
for (var x=0; x<this.t;x++){
if (this.board[x] & 1){
var ch = this.selecionadaarray[x];
this.wordoculta=this.wordoculta.replaceAt(x, ch);
this.board[x] = 2;
}
}
this.telaoculta.innerHTML = this.wordoculta;

if (this.wordoculta==this.palavraselecionada){
this.telaoculta.innerHTML = "Parabéns, você acertou! A palavra é: " + this.palavraselecionada;
var denovo = confirm("Quer jogar de novo?");
if (denovo==true) this.init()
}
}

function iniciar(){
this.erros=0;
this.wordoculta=new String;
this.erradasletras=new Array;
this.letrastentadas=new Array;
this.board=new Array;
this.selecionadaarray=new Array;

var palavras = new Array('Carro', 'Pato', 'Webdre');

this.size = document.getElementById('tamanho');
this.divmessages = document.getElementById('messages');
this.diverros=document.getElementById('erros');
this.telaoculta=document.getElementById('palavraoculta');
this.tries=document.getElementById('tentativas');

this.palavraselecionada = palavras.random();
this.palavraminuscula = this.palavraselecionada.tiraacento();
this.t=this.palavraselecionada.length;

this.wordoculta=this.palavraminuscula.replace(/[A-Za-zÀ-ú]/g,'_');
for (var z=0;z<this.t;z++){
this.board[z]=0;
this.selecionadaarray[z] = this.palavraselecionada.charAt(z);
}
this.telaoculta.innerHTML = this.wordoculta;
this.divmessages.innerHTML = 'Novo jogo iniciado';
this.diverros.innerHTML = 'Nenhum erro até o momento';
this.size.innerHTML = 'A palavra tem ' + this.t + ' letras';
this.tries.innerHTML = "Letras tentadas:";
document.getElementById('imagemdica').src=this.palavraselecionada+".jpg"; //Carrega a imagem de dica
//document.getElementById('escrita').innerHTML = this.palavraselecionada; //acrescenta a palavra explícita na página
}

forca.prototype.executa=executa
forca.prototype.verificaerros=verificaerros
forca.prototype.mostraletras=mostraletras
forca.prototype.mostrapalavra=mostrapalavra
forca.prototype.init=iniciar

function executaforca(e){
fo.executa(e);
}

function reinicio(){
document.getElementById('entrada').focus();
fo.init();
}

window.onload = init

function init(){
document.getElementById('entrada').focus();
fo = new forca();
fo.init();
var inputentry=document.getElementById('entrada');
inputentry.onkeyup=executaforca;
var novo=document.getElementById('new');
novo.onclick=reinicio
}
</script>

<style>
input.hid{ display:none; }
body{ background-color:#fff; font-family:Verdana,Arial,Helvetica; color:brown; font-weight:bold;}
#palavraoculta{ letter-spacing:5px; }
input.entry{ border:1px solid #666666; background-color: #ffffff; }
</style>

<body>
<br><br><br><br>
<table align='center' width='700' height='400' style="TABLE-LAYOUT: fixed;" bgcolor='lightgray' style="border: 2px solid blue;">
<tr><td colspan='2' align='center'>JOGO DA FORCA<br>Digite as letras no teclado e tente acertar a escrita da palavra, em inglês:</td></tr>
<tr><td rowspan='5' width='80' bgcolor='yellow'><b id='desenhaforca'>______<br>|        |<br>|<br>|<br>|<br>|<br>--</b></td><td align='center'><div id="tamanho"></div></td></tr>
<tr><td align='center' width='120' height='120'><img id="imagemdica" width='100' height='100'></td></tr>
<form>
<input id="hid" class="hid"></input>
<tr><td align='center' height='60'><div id="messages"></div></td></tr>
<tr><td align='center' bgcolor='yellow'><input id="entrada" type="text" class="entry" size="1" maxlength="1"></input></td></tr>
<tr><td align='center' bgcolor='yellow' height='65'><div id="palavraoculta"></div></div></td></tr>
<tr><td align='center'><div id="erros"></div></td><td height='60'><div id="tentativas"></div></div></div></td></tr>
<tr><td colspan='2' align='center'><input type="button" value="Tentar Outra Palavra" id="new"></input></td></tr>
</table>
</form>
</body>
</html>

Entrar

Arquivado

Jogo da Forca com Imagem dica

Recommended Posts

Nilww 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Webdre 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nilww 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante