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

GRA w JS, pomocy

Object Storage Arubacloud
0 głosów
137 wizyt
pytanie zadane 18 stycznia 2021 w JavaScript przez Adamek185wp Obywatel (1,280 p.)

Witam, tworze gre w JS ktora polega na odslanianiu obrazkow, wszystko w niej dziala oprocz jednej rzeczy. Gdy klikamy na ten sam obrazek dwukrotnie, zalicza nam punkt i znikaja obrazki. Nie mam pojecia jak zmodyfikowac warunek.

/* sam warunek if */
if(p==0)
	{
		Zakryj();
		odkryj(x);
		p=1;
		one=x;
	}
	else
	{
		odkryj(x);
		if(x.innerHTML==one.innerHTML){
			
			if(x.innerHTML==x.innerHTML){
				
			}
			else{
				x.style.visibility="hidden"; one.style.visibility="hidden";
				wynik=wynik+1;
				document.getElementById("wynik").innerHTML=wynik;
			}

		}
		else
		{
			setTimeout(function(){Zakryj()},1500);
		}
/* CALY KOD */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div {position:absolute;}
.mini {border:black 1px solid; height:97px; width:97px;}
.mini:hover {border:red 2px solid;}
img {height:97px;width:97px;}
#w{position:absolute;top:450px;left:50px;}
#wynik{position:absolute;top:450px;left:100px;}
</style>
<script>

var wynik=0;
    var TabId=['a1','a2','a3','a4','a5','a6','a7','a8','a9','a10','a11','a12','a13','a14','a15','a16','a17','a18','a19','a20'];
    var TabImg=['obrazek1','obrazek2','obrazek2','obrazek1','obrazek1','obrazek2','obrazek2','obrazek1','obrazek1','obrazek2','obrazek2','obrazek1','obrazek1','obrazek2','obrazek2','obrazek1','obrazek1','obrazek2','obrazek2','obrazek1'];
function Zakryj(){
    for(var i=0;i<20;i++){
        document.getElementById(TabId[i]).innerHTML="<img src='obrazek3.jpg'>";
    }
    }
function odkryj(x){
    for(var i=0;i<20;i++)
        if(x==document.getElementById(TabId[i])){
		
        x.innerHTML="<img src="+TabImg[i]+".jpg>";
		}
    
}
var p=0,one;
function graj(x)
{
	if(p==0)
	{
		Zakryj();
		odkryj(x);
		p=1;
		one=x;
	}
	else
	{
		odkryj(x);
		if(x.innerHTML==one.innerHTML){
			
			if(x.innerHTML==x.innerHTML){
				
			}
			else{
				x.style.visibility="hidden"; one.style.visibility="hidden";
				wynik=wynik+1;
				document.getElementById("wynik").innerHTML=wynik;
			}

		}
		else
		{
			setTimeout(function(){Zakryj()},1500);
		}
		
		
		
		p=0;
	}
}
var TabPos=[[50,50],[150,50],[50,150],[150,150],[250,50],[350,50],[250,150],[350,150],[450,50],[150,250],[450,150],[150,350],[50,250],[250,350],[50,350],[250,250],[350,350],[350,250],[450,350],[450,250]];
function mieszaj(){
    var i=0, x;
	var check=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
	Zakryj();
    while(i<20){
        x=Math.floor(Math.random()*20);
		if(check[x]==0)
		{
        document.getElementById(TabId[i]).style.left=TabPos[x][0]+'px';
        document.getElementById(TabId[i]).style.top=TabPos[x][1]+'px';
		document.getElementById(TabId[i]).style.visibility="visible";
        i++;
		check[x]=1;
		}
    }
	wynik=0;
	document.getElementById("wynik").innerHTML=wynik;
}
window.onload=mieszaj;
</script>
</head>
<body>
<form style="position:absolute;top:20px;left:100px;">
    <input type="button" value="Graj" onclick="mieszaj()">
</form>
<div id="a1" class="mini" style="left:50px; top:50px;" onclick="graj(this)" >
    <img src="obrazek1.jpg"></div>
<div id="a2" class="mini" style="left:150px; top:50px;" onclick="graj(this)" >
    <img src="obrazek2.jpg"></div>
<div id="a3" class="mini" style="left:50px; top:150px;" onclick="graj(this)" >
    <img src="obrazek2.jpg"></div>
<div id="a4" class="mini" style="left:150px; top:150px;" onclick="graj(this)" >
    <img src="obrazek1.jpg"></div>
<div id="a5" class="mini" style="left:250px; top:50px;" onclick="graj(this)">
    <img src="obrazek1.jpg"></div>
<div id="a6" class="mini" style="left:350px; top:50px;" onclick="graj(this)">
    <img src="obrazek2.jpg"></div>
<div id="a7" class="mini" style="left:250px; top:150px;" onclick="graj(this)">
    <img src="obrazek2.jpg"></div>
<div id="a8" class="mini" style="left:350px; top:150px;" onclick="graj(this)">
    <img src="obrazek1.jpg"></div>
<div id="a9" class="mini" style="left:450px; top:50px;" onclick="graj(this)">
    <img src="obrazek1.jpg"></div>
<div id="a10" class="mini" style="left:150px; top:250px;" onclick="graj(this)">
    <img src="obrazek2.jpg"></div>
<div id="a11" class="mini" style="left:450px; top:150px;" onclick="graj(this)">
    <img src="obrazek2.jpg"></div>
<div id="a12" class="mini" style="left:150px; top:350px;" onclick="graj(this)">
    <img src="obrazek1.jpg"></div>
<div id="a13" class="mini" style="left:50px; top:250px;" onclick="graj(this)">
    <img src="obrazek1.jpg"></div>
<div id="a14" class="mini" style="left:250px; top:350px;" onclick="graj(this)">
    <img src="obrazek2.jpg"></div>
<div id="a15" class="mini" style="left:50px; top:350px;" onclick="graj(this)">
    <img src="obrazek2.jpg"></div>
<div id="a16" class="mini" style="left:250px; top:250px;" onclick="graj(this)">
    <img src="obrazek1.jpg"></div>
<div id="a17" class="mini" style="left:350px; top:350px;" onclick="graj(this)">
    <img src="obrazek1.jpg"></div>
<div id="a18" class="mini" style="left:350px; top:250px;" onclick="graj(this)">
    <img src="obrazek2.jpg"></div>
<div id="a19" class="mini" style="left:450px; top:350px;" onclick="graj(this)">
    <img src="obrazek2.jpg"></div>
<div id="a20" class="mini" style="left:450px; top:250px;" onclick="graj(this)">
    <img src="obrazek1.jpg"></div>

<div id="ekran"></div>
<div id="w">Wynik: </div>
<div id="wynik">0</div>
</body>
</html>

 

2 odpowiedzi

+1 głos
odpowiedź 18 stycznia 2021 przez KopfSzmercen Bywalec (2,870 p.)
wybrane 18 stycznia 2021 przez Adamek185wp
 
Najlepsza

Tak na szybko parząc- musisz sprawdzić czy drugie kliknięcie dotyczy innego obrazka czy tego samego, którego dopiero kliknąłeś. Do tego możesz użyć id obrazka które na początku przydzieliłeś jest ono unikalne. Piszesz więc coś takiego.

if(x.innerHTML==one.innerHTML && x.id !== one.id){
            x.style.visibility="hidden"; one.style.visibility="hidden";
            wynik=wynik+1;
            document.getElementById("wynik").innerHTML=wynik;
        }

 Nie wiem po co używasz też pustego warunku if wcześniej.

O ile dobrze zrozumiałem co masz na myśli i będzie to działało tak jak chciałeś, polecam Ci obejrzeć jakiś tutorial z robienia tej samej gry, na pewno jest ich wiele. Zobaczysz inne podejścia innych i nauczysz się na pewno wielu dobrych praktyk co będzie szczególnie pomocne już po własnoręcznie zrobionej grze. 

komentarz 18 stycznia 2021 przez Adamek185wp Obywatel (1,280 p.)
tak o to mi chodziło, WIELKIE DZIĘKI! Pustego ifa zapomnialem usunac, chcialem stworzyc bardziej rozbudowany warunek, ale przeciez mozna to zrobic w jednym ifie tak jak w tym podeslanym kodzie. Jeszcze raz WIELKIE DZIĘKI!
0 głosów
odpowiedź 18 stycznia 2021 przez Adamek185wp Obywatel (1,280 p.)

probowalem uzyc cursor: no-drop; ale to byl chyba glupi pomysl, nie mam pojecia czemu tak to nie dziala jak bym chcial :/

Podobne pytania

0 głosów
2 odpowiedzi 444 wizyt
0 głosów
1 odpowiedź 235 wizyt
pytanie zadane 8 października 2017 w JavaScript przez shy_fox Gaduła (4,320 p.)
0 głosów
0 odpowiedzi 222 wizyt
pytanie zadane 28 października 2019 w JavaScript przez stoklosa Nowicjusz (120 p.)

92,576 zapytań

141,426 odpowiedzi

319,650 komentarzy

61,961 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...