• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

skrypt javascript - gra w wisielca

VPS Starter Arubacloud
0 głosów
2,419 wizyt
pytanie zadane 12 czerwca 2016 w JavaScript przez jelonek2006 Początkujący (420 p.)

Witam, po kilkudziesięciu minutach ślęczenia nad skryptem postanowiłem tutaj szukać pomocy. Mianowicie obejrzałem 3 odcinek kursu JS Mirosława Zelenta i chciałem napisać swój własny skrypt z w/w grą. Skrypt jest już skończony, jednak gdy klikam w poszczególne literki to niby jest jakaś reakcja, tzn jest dźwięk, ale literki nie zmieniają koloru, nie zmienia się obrazek z szubienicą oraz pola z hasłem. Porównywałem mój kod linia w linię z kodem Mirosława i wszystko jest identyczne. Nawet ściągnąłem program WinMerge do porównywania tekstów i tam też wszystko jest identyczne, tylko że mój skrypt nie działa, a ten z kursu tak. Kod html i css oraz folder z obrazkami sprawdziłem i wszystko jest ok. Ktoś ma jakieś pomysły, w czym może tkwić problem?

 

var haslo = "Bez pracy nie ma kołaczy";
haslo = haslo.toUpperCase();

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

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

var haslo1 = "";

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

function wypisz_haslo()
{
	document.getElementById("plansza").innerHTML = haslo1;
}

window.onload = start;

var litery = new Array(35);

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;
	
	
	wypisz_haslo();
}

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;
	
	for(i=0; i<dlugosc; i++)
	{
		if (haslo.charAt(i) == litery[nr]) 
		{
			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 hasło: "+haslo+'<br /><br /><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
}

 

komentarz 13 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)
Sprawdź czy prawidłowo podpiąłeś JS i CSS do HTML. Zobacz, czy w konsoli nie ma błędów (uruchom ją po wejściu na stronę i obserwuj podczas gdy będziesz klikał w literki).

3 odpowiedzi

+2 głosów
odpowiedź 12 czerwca 2016 przez niezalogowany

Porównywałem mój kod linia w linię z kodem Mirosława i wszystko jest identyczne.

Nie ucz się tak programowania. :v 

 

Kodu nie analizowałem, ale skoro skrypt jest identyczny jak Zelanta, to może jest problem z plikiem css? Może tam zrobiłeś jakiś błąd?   

komentarz 12 czerwca 2016 przez jelonek2006 Początkujący (420 p.)
plik html i css też porównałem i nie ma żadnych błędów, naprawdę nie wiem o co tu chodzi
komentarz 12 czerwca 2016 przez niezalogowany
Na różnych przeglądarkach sprawdzałeś? Bo nie sądzę, że Mirosław mógł dać nie działający kod. Błąd pewnie leży po Twojej stronie.
komentarz 12 czerwca 2016 przez jelonek2006 Początkujący (420 p.)
właśnie chodzi o to że kod Mirosława działa, tylko mój nie, mimo że są identyczne, nawet podpiąłem Jego kod, zamiast swojego i wtedy działa, ale oba skrypty są kropka w kropkę takie same
komentarz 13 czerwca 2016 przez Ehlert Ekspert (212,630 p.)

Kolega Ci napisał, żebyś się na tym nie wzorował. W programowaniu nie chodzi o to, żeby zrobić milion zmiennych globalnych i kod działa. no

+1 głos
odpowiedź 13 czerwca 2016 przez jelonek2006 Początkujący (420 p.)
Zajrzałem do konsoli błędów i problem leży w ostatniej pętli, mianowicie tam, gdzie określa się styl literek. W konsoli widnieje taki komunikat: "wisielec.js:108 Uncaught TypeError: Cannot read property 'style' of null." Usunąłem te dwie sekcje ze stylem css i wtedy normalnie zmienia się tło i odkrywa hasło, no tylko że literki nie zmieniają koloru na zielony i czerwony. Skopiowałem tą część kodu od Mirosława i również pojawia się ten błąd. Ma ktoś jakieś pomysły o co może tu chodzić? Gdy zajrzałem do konsoli błędów w stronie do Mirosława to wszystko było ok.
komentarz 13 czerwca 2016 przez jelonek2006 Początkujący (420 p.)
Ehh dobra, poddaję się. Pewnie mam jakiegoś wirusa na komputerze czy cuś i dlatego tak się dzieje. Podmieniałem fragmenty kodu Mirka na mój i sprawdzałem w której części skrypt przestaje działać. Najpierw podmieniłem górną, a potem dolną połowę i okazało się że to w tej drugiej tkwi problem. Wtedy dzieliłem ją na coraz mniejsze, aż w końcu podmieniałem same linijki, aż zaczął działać. Potem podstawiałem po kolei spowrotem swój kod i wtedy działało idealnie, jakby nigdy nic (tak zapisywałem zmiany w programie). Później znowu dałem Mirka i swój, tylko że teraz zamieniałem większymi fragmentami i znowu nie działał. Tak jak wspominałem wcześniej, kod mój i Mirka jest identyczny, nawet program to potwierdził, więc niemożliwe żeby mój nie działał. Może po prostu mam jakiegoś wirusa czy coś.
komentarz 13 czerwca 2016 przez Magicone Nałogowiec (45,100 p.)
var element = "lit" + nr; 
document.getElementById(element) // error

po prostu element, do którego się odwołujesz nie istnieje… wrzuć paczkę z kodem do jakiegoś archiwum i zahostuj, żebym mógł pobrać i zobaczyć kod

komentarz 13 czerwca 2016 przez jelonek2006 Początkujący (420 p.)
Dobra, jednak mój błąd. Wszystko działa. Zbadałem element w przeglądarce i okazało się że miałem spację w ID, dlatego nie działało. Tyle zachodu bez jedną spację. Sory za zamieszanie i dzięki wszystkim za pomoc.
0 głosów
odpowiedź 13 czerwca 2016 przez prp35n Użytkownik (940 p.)
Coś co można zautomatyzować choćby i w pętli nie powinno się pisać ręcznie za każdym razem. Tak na szybko, lepiej zainicjuj tablicę litery w jednej linii. Funkcje są za długie, zwłaszcza ostatnia.

Podobne pytania

+1 głos
1 odpowiedź 614 wizyt
pytanie zadane 22 lipca 2016 w JavaScript przez Gromixson Początkujący (260 p.)
0 głosów
1 odpowiedź 297 wizyt
pytanie zadane 15 listopada 2015 w JavaScript przez Ditrix Mądrala (5,650 p.)
0 głosów
2 odpowiedzi 1,261 wizyt
pytanie zadane 23 marca 2016 w JavaScript przez Mr Popcorn Bywalec (2,340 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...