Udoskonalenie gry w wisielca

Question

Witam serdecznie.

Chciałem dodać do tej gry kategorię, aby wyświetlała się konkretna kategoria po wylosowaniu konkretnego hasła.
 

var kategoria = new Array(3);
kategoria[0] = "Sport";
kategoria[1] = "Przysłowia";
kategoria[2] = "Muzyka";
var tablica_z_haslami = new Array(5);
tablica_z_haslami[0] = "Polak nie kaktus";
tablica_z_haslami[1] = "Kobyła ma mały bok";
tablica_z_haslami[2] = "Wyjątek potwierdza regułę";
tablica_z_haslami[3] = "Dziadek do orzechów";
tablica_z_haslami[4] = "Bileciki do kontroli";

function losowanie()
{
var wylosowana_liczba = Math.round(Math.random() * tablica_z_haslami.length);
wylosowane_haslo = tablica_z_haslami[wylosowana_liczba];
if (wylosowana_liczba == '0' )
{
    document.getElementById("kategoria").innerHTML = kategoria[0];
}
}

losowanie();

Nie wiem co zrobić z instrukcją warunkową if, aby po wylosowaniu konkretnego hasła pojawiła się przypisana do niej kategoria. Można to jeszcze jakoś inaczej zrobić jak za pomocą if?

Comments

Tak na przyszłość to pamiętaj, aby kod na forum umieszczać w bloczku code. Ułatwia to czytanie kodu, koloruje składnię itd.

Answer 1

Nie wiem co zrobić z instrukcją warunkową if, aby po wylosowaniu konkretnego hasła pojawiła się przypisana do niej kategoria.

Dlatego nie należy lecieć od razu z kodem - nie najłatwiejszym sposobem byłoby utworzenie macierzy, w której jedna komórka to słowo, a druga - kategoria? Pewnie nie, ale myślę, że byłaby wystarczającym rozwiązaniem :)

Comments

Tzn, Jak mam to zrobić?

Answer 2

Hmm, zrób może obiekt lub JSONa, w którym umieścisz kategorie, np. jako tablicę, a jej elementy to będą pytania?

Na przykład (napisane trochę z głowy):

var kategorie = {
 sport : [ 'tu', 'umieszczaj', ' pytania', ' o sporcie' ],
 przyslowia : [ /**/ ],
 muzyka : [ 'Slawna grupa Rockowa' ] // jakies przykladowe pytanie
};

function losuj_kategorie()
{
   return Object.keys(kategorie)[Math.floor(Math.random()*Object.keys(kategorie).length)];
}

function losuj_pytanie(kat)
{
   return kategorie[ kat [ Math.floor(Math.random() * kat.length) ] ]; // nawiasy kwadratowe dla obiektu sa po to, aby odczytac klucz w sposob 'customowy'
}

function losowanie()
{
   var kategoria = losuj_kategorie(),
         pytanie = losuj_pytanie(kategoria);

    document.getElementById('kategoria').innerHTML = kategoria;
}

Zmienną pytanie możesz sobie też gdzieś wypisać na stronie.

Comments

Niestety ten kod nie działa

---

A co konkretnie nie działa?

---

Nie wyswietla sie kategoria,haslo i alfabet

Answer 3

Pozwolę sobie podpiąć się do tematu.

Ja z kolei chciałem dodać do wisielca możliwość gry dwuosobowej, tzn jedna osoba zamyka oczy, druga wpisuje hasło itd.

function dodaj()
{
document.getElementById("pole").innerHTML='<input type="text" id="noweHaslo" style="background:gray;"/><span id="ok" onclick="???" >OK</span>';
haslo=document.getElementById("noweHaslo").value;    
}

Przycisk dodaj wywołuje funkcję dodaj() w niej tworzone jest pole tekstowe na nowe hasło i "przycisk" OK.
Z pola tekstowego pobieram wartość i przypisuje zmiennej haslo.
Jaki onclick dać przyciskowi OK żeby wyjść z funkcji zabierając zmienną i rozpocząć wykonywanie skryptu od początku? location.reload() nie może być ponieważ tracę zmienną. Dziękuję.

Comments

document.getElementById("pole").innerHTML='<input type="text" id="noweHaslo" style="background:gray;"/><span id="ok" onclick="???" >OK</span>';

Tak się nie robi. Po pierwsze, do tworzenia elementów DOM służą odpowiedni metody, jak: document.createElement(), document.appendChild();

 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Po drugie, nie stosuj onclick, ani pochodnych atrybutów w tagach HTML, które reagują na zdarzenia. Do tego służy JavaScriptowy EventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

żeby wyjść z funkcji zabierając zmienną i rozpocząć wykonywanie skryptu od początku?

Nie bardzo rozumiem, Chcesz wykonać jakąś funkcję od nowa, po kliknięciu w OK? To zamknij te funkcje (czy też określony fragment kodu, zbiór funkcji) w jednej funkcji i wywołaj ją po kliknięciu w przycisk.

Answer 4

Mam coś takiego. Losuje mi kategorie i hasło, tylko nie zależnie. A chciałbym aby hasło wylosowało się po wylosowaniu kategorii żeby było zależne od kategorii

var kategoria = new Array(3);
kategoria[0] = "Sport";
kategoria[1] = "Przysłowia";
kategoria[2] = "Muzyka"; 
var tablica_z_haslami = new Array(5);
tablica_z_haslami[0] = "Polak nie kaktus";
tablica_z_haslami[1] = "Kobyła ma mały bok";
tablica_z_haslami[2] = "Wyjątek potwierdza regułę";
tablica_z_haslami[3] = "Dziadek do orzechów";
tablica_z_haslami[4] = "Bileciki do kontroli";

function losowanie_kategorii()
{
	var wylosowana_kategoria = Math.round(Math.random() * kategoria.length);
wylosowana_kat = kategoria[wylosowana_kategoria];
}

function losowanie_hasel()
{
var wylosowana_liczba = Math.round(Math.random() * tablica_z_haslami.length);
wylosowane_haslo = tablica_z_haslami[wylosowana_liczba];
}

losowanie_kategorii();
losowanie_hasel(); 


var haslo = wylosowane_haslo;


function wypisz_haslo()
{
	document.getElementById("plansza").innerHTML = haslo1;
}
function wypisz_kategorie()
{
	document.getElementById("wyl_kategoria").innerHTML = wylosowana_kat;
}
window.onload = start;

var litery = new Array(35); // tablica

litery[0] = "A";
litery[1] = "Ą";
litery[2] = "B";
litery[3] = "C";
litery[4] = "Ć";
litery[5] = "D";
litery[6] = "E";
litery[7] = "Ę";
litery[8] = "F";
litery[9] = "G";
litery[10] = "H";
litery[11] = "I";
litery[12] = "J";
litery[13] = "K";
litery[14] = "L";
litery[15] = "Ł";
litery[16] = "M";
litery[17] = "N";
litery[18] = "Ń";
litery[19] = "O";
litery[20] = "Ó";
litery[21] = "P";
litery[22] = "Q";
litery[23] = "R";
litery[24] = "S";
litery[25] = "Ś";
litery[26] = "T";
litery[27] = "U";
litery[28] = "V";
litery[29] = "W";
litery[30] = "X";
litery[31] = "Y";
litery[32] = "Z";
litery[33] = "Ź";
litery[34] = "Ż";

function start()
{
	var tresc_diva ="";
	
	for(i = 0; i <= 34; i++)
	{
		var element = "lit" + i;
		tresc_diva = tresc_diva + '<div class="litera" onclick="sprawdz('+i+')" id="'+element+'">'+litery[i]+'</div>';
		if ((i + 1) % 7 == 0) tresc_diva = tresc_diva + '<div style="clear:both;"></div>';
	}
	
	document.getElementById("alfabet").innerHTML = tresc_diva;
	document.getElementById("kategoria").innerHTML = "Kategoria:";
	
	wypisz_haslo();	
	wypisz_kategorie();
}
}

 

Comments

Zamiast:

var kategoria = new Array(3);
kategoria[0] = "Sport";
kategoria[1] = "Przysłowia";
kategoria[2] = "Muzyka"; 

Zapisz po prostu:

var kategoria = [ "Sport", "Przysłowia", "Muzyka" ];

krótszy zapis, prawda :)? Analogicznie dla pozostałych tablic.

Nie poprawiłeś funkcji losujących kategorie i pytania, o czym wspomniałem pod Twoją poprzednią odpowiedzią.

Poza tym, zamiast 

window.onload = start;

, cały skrypt przenieś na koniec <body> i po prostu funkcję start() umieść w IIFE.

---

Jak mam poprawić tę funkcję? Bo dalem aby zwracalo wartosci ale znow nie dziala

---

Pokaż kod tego co poprawiłeś.

Co konkretnie nie działa? Jakieś błędy w konsoli? Co znajduje się w zmiennych, które potem wypisujesz na stronie? Bo "nie działa" to zbyt ogólna informacja.

Answer 5

Tutaj w tym kodzie natomiast nie wyświetla się hasło(czyli wykreskowane litery hasła). Prawdopodobnie błąd jest w tej linijce : 

var haslo1 = "";

for(var i = 0; i < dlugosc; i++)
{
	if(haslo.charAt(i) == " ") haslo1 = haslo1 + " "; // zamiast haslo[i]
	else haslo1 = haslo1 + "-";
}

Ponieważ haslo1 jak i szybciej haslo jest puste.
Proszę o pomoc.



var kategorie = {
 sport : [ 'Polski skoczek narciarski', 'Obecnie najlepszy polski pilkarz', 'Najszybszy kierowca F1' ],
 przyslowia : [ "Polak nie kaktus", "Kobyła ma mały bok", "Wyjątek potwierdza regułę", "Dziadek do orzechów","Bileciki do kontroli" ],
 muzyka : [ 'Slawna grupa Rockowa', 'Nazwa zespołu podobna do rodzaju nadwozia samochodu' ]
};

var haslo = '';
 
function losuj_kategorie()
{
   return Object.keys(kategorie)[Math.floor(Math.random()*Object.keys(kategorie).length)];
}
 
function losuj_pytanie(kat)
{
   var pytanie = kategorie[ kat [ Math.floor(Math.random() * kat.length) ] ]; // nawiasy kwadratowe dla obiektu sa po to, aby odczytac klucz w sposob 'customowy'
   console.log('pyt? : ', kategorie[kat][Math.floor(Math.random() * kategorie[kat].length)]  );
   
   haslo = pytanie;
   
   return pytanie;
}

haslo = haslo.toUpperCase(); // robi duże litery (lower case) < małe litery

var dlugosc = haslo.length;
var ile_skuch = 0;

var yes = new Audio("yes.wav");
var no = new Audio("no.wav");

var haslo1 = "";

for(var i = 0; i < dlugosc; i++)
{
	if(haslo.charAt(i) == " ") haslo1 = haslo1 + " "; // zamiast haslo[i]
	else haslo1 = haslo1 + "-";
}

function wypisz_haslo()
{
	document.getElementById("plansza").innerHTML = haslo1;
}
function wypisz_kategorie(kat)
{
	document.getElementById("wyl_kategoria").innerHTML = kat;
}
window.onload = start;

var litery = new Array(35); // tablica

litery[0] = "A";
litery[1] = "Ą";
litery[2] = "B";
litery[3] = "C";
litery[4] = "Ć";
litery[5] = "D";
litery[6] = "E";
litery[7] = "Ę";
litery[8] = "F";
litery[9] = "G";
litery[10] = "H";
litery[11] = "I";
litery[12] = "J";
litery[13] = "K";
litery[14] = "L";
litery[15] = "Ł";
litery[16] = "M";
litery[17] = "N";
litery[18] = "Ń";
litery[19] = "O";
litery[20] = "Ó";
litery[21] = "P";
litery[22] = "Q";
litery[23] = "R";
litery[24] = "S";
litery[25] = "Ś";
litery[26] = "T";
litery[27] = "U";
litery[28] = "V";
litery[29] = "W";
litery[30] = "X";
litery[31] = "Y";
litery[32] = "Z";
litery[33] = "Ź";
litery[34] = "Ż";

function start()
{
	var tresc_diva ="";
	
	var kategoria = losuj_kategorie(),
         pytanie = losuj_pytanie(kategoria);
		 
	for(var i = 0; i <= 34; i++)
	{
		var element = "lit" + i;
		tresc_diva = tresc_diva + '<div class="litera" onclick="sprawdz('+i+')" id="'+element+'">'+litery[i]+'</div>';
		if ((i + 1) % 7 == 0) tresc_diva = tresc_diva + '<div style="clear:both;"></div>';
	}
		
	document.getElementById("alfabet").innerHTML = tresc_diva;
	document.getElementById("kategoria").innerHTML = "Kategoria:";
	
	console.log('kategoria: ', kategoria);
	wypisz_haslo();	
	wypisz_kategorie(kategoria);
}

String.prototype.ustawZnak = function(miejsce, znak)
{
	if(miejsce > this.length - 1) return this.toString();
	else return this.substr(0, miejsce) + znak + this.substr(miejsce + 1)
	
}

function sprawdz(nr)
{
	
	var trafiona = false; // flaga
	
	for(var i = 0; i < dlugosc; i++)
	{
		if (haslo.charAt(i) == litery[nr])
		{
			// alert(i); <- to jest test 
			haslo1 = haslo1.ustawZnak(i, litery[nr]);
			trafiona = true;	
		}
	}	
	
	if (trafiona == true)
	{
		yes.play();
		var element = "lit" + nr;
		document.getElementById(element).style.background = "#003300";
		document.getElementById(element).style.color = "#00C000";
		document.getElementById(element).style.border = "3px solid #00C000";
		document.getElementById(element).style.cursor = "default";
		
		wypisz_haslo();
	}
	else
	{
		no.play();
		var element = "lit" + nr;
		document.getElementById(element).style.background = "#330000";
		document.getElementById(element).style.color = "#C00000";
		document.getElementById(element).style.border = "3px solid #C00000";
		document.getElementById(element).style.cursor = "default";
		document.getElementById(element).setAttribute("onclick",";");
		
		
		//skucha
		ile_skuch++;
		var obraz = "img/s" + ile_skuch + ".jpg";
		document.getElementById("szubienica").innerHTML = '<img src ="'+obraz+'" alt="" />';
	}
	
	// wygrana
	if(haslo == haslo1)
		document.getElementById("alfabet").innerHTML = "Tak jest! Podano prawidłowe hasło:"+haslo+'<br/><br/><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>'
	
	// przegrana
	if(ile_skuch >=9)
		document.getElementById("alfabet").innerHTML = "Przegrana. Prawidłowe haslo: "+haslo+'<br/><br/><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>'