Kółko i krzyży JS

mordus · Luty 12, 2018

Dzień Dobry,

Postanowiłem, że zacznę się uczyć HTML CSS I JS i jako pierwsze zadanie dałem sobie do napisania grę w kółko i krzyżyk. Oczywiście mój projekt jest prymitywny ale do pewnego stopnia działa i brakuje mi jeszcze jednej rzeczy, ale po kolei.

Pomysł wyjściowy był taki, że stworze 9 divow i w każdym będzie obraz cyfry odpowiadającej nr pojemnika (1, 2, 3 itd.). Pod obrazkiem będzie zwykły input i po wpisaniu 'o' lub 'x' obraz w divie będzie podmiany z cyfry na grafikę wcześniej wybranej wartości. Do tego momentu wszystko działa tak jak chciałem, ale problem mam z końcem gry mianowicie chcę, żeby w momencie gdy 3 divy koło siebie będą miały taką samą wartość gra się zatrzymywała i pojawiała się komunikat z odpowiednią informacją. Pomysł miałem taki, że każdy div będzie miał swoją zmienna (np. div 1 to będzie a1 div 4 b1 itd) której będę nadawał określoną wartość w momencie gdy będę wybierał czy ma tam być x czy o( dla x -1 dla o 1) i potem paroma if będe sprawdzał czy np div 1, 2 i 3 ( czyli zmienne a1, a2 i a3) są równe 3 lub -3. Problem w tym, że podmianę obrazka w divie robie dla kazdego osobna funkcja (podmiana1() podmiana2()(..)) więc nie wiem jak ten wcześniejszy pomysł zaimplementować, bo gdy wrzucę do funkcji podmiana1() zmienna a1 to i tak po wykonaniu funkcji przestanie ona istnieć wiec nie bede mial jak jej porównać do zmienej a2 z funkcji podmiana2()...

Mam nadzieje, że to co napisałem jest dość zrozumiałem i za każda podpowiedź jak mogę rozwiązać swój problem oraz lepiej wykonać cały projekt (nie liczę na gotowy fragment kodu ale wskazówki które pomogą mi samemu się z tym uporać) będę bardzo wdzięczny.

<body >

<div id="container">
<div id="raz" class="in"><div><img id="jeden"  src="1.png"></div><div><input type="text" id="pole1" /><input type="submit" value="Sprawdz" onclick="podmiana()" ></div></div>
<div id="dwa" class="in"><div><img id="dwa2"  src="2.png"></div><div><input type="text" id="pole2" /><input type="submit" value="Sprawdz" onclick="podmiana2()" ></div></div>
<div id="trzy" class="in"><div><img id="trzy3"  src="3.png"></div><div><input type="text" id="pole3" /><input type="submit" value="Sprawdz" onclick="podmiana3()" ></div></div>
<div style="clear:both;"></div>
<div id="cztery" class="in"><div><img id="cztery4"  src="4.png"></div><div><input type="text" id="pole4" /><input type="submit" value="Sprawdz" onclick="podmiana4()" ></div></div>
<div id="piec" class="in"><div><img id="piec5"  src="5.png"></div><div><input type="text" id="pole5" /><input type="submit" value="Sprawdz" onclick="podmiana5()" ></div></div>
<div id="szesc" class="in"><div><img id="szesc6"  src="6.png"></div><div><input type="text" id="pole6" /><input type="submit" value="Sprawdz" onclick="podmiana6()" ></div></div>
<div style="clear:both;"></div>

<div id="siedem" class="in"><div><img id="siedem7"  src="7.png"></div><div><input type="text" id="pole7" /><input type="submit" value="Sprawdz" onclick="podmiana7()" ></div></div>
<div id="osiem" class="in"><div><img id="osiem8"  src="8.png"></div><div><input type="text" id="pole8" /><input type="submit" value="Sprawdz" onclick="podmiana8()" ></div></div>
<div id="dziewiec" class="in"><div><img id="dziewiec9"  src="9.png"></div><div><input type="text" id="pole9" /><input type="submit" value="Sprawdz" onclick="podmiana9()" ></div></div>
<div style="clear:both;"></div>


function podmiana1(){
var sprawdz=document.getElementById("pole1").value;
if(sprawdz=="o" || sprawdz=="O")
 document.getElementById("jeden").src="O.png"; 

else if(sprawdz=="x" || sprawdz=="X")
 document.getElementById("jeden").src="X.png"; 
else
	document.getElementById("raz").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}
function podmiana2(){
var sprawdz=document.getElementById("pole2").value;
if(sprawdz=="o"|| sprawdz=="O"){
 document.getElementById("dwa2").src = "O.png"; 
}
else if(sprawdz=="x"|| sprawdz=="X")
 document.getElementById("dwa2").src = "X.png"; 
else
	document.getElementById("dwa").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}

function podmiana3(){
var sprawdz=document.getElementById("pole3").value;
if(sprawdz=="o"|| sprawdz=="O"){
 document.getElementById("trzy3").src = "O.png"; 
}
else if(sprawdz=="x"|| sprawdz=="X")
 document.getElementById("trzy3").src = "X.png"; 
else
	document.getElementById("trzy").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}

function podmiana4(){
var sprawdz=document.getElementById("pole4").value;
if(sprawdz=="o"|| sprawdz=="O"){
 document.getElementById("cztery4").src = "O.png"; 
}
else if(sprawdz=="x"|| sprawdz=="X")
 document.getElementById("cztery4").src = "X.png"; 
else
	document.getElementById("cztery").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}

function podmiana5(){
var sprawdz=document.getElementById("pole5").value;
if(sprawdz=="o"|| sprawdz=="O"){
 document.getElementById("piec5").src = "O.png"; 
}
else if(sprawdz=="x"|| sprawdz=="X")
 document.getElementById("piec5").src = "X.png"; 
else
	document.getElementById("piec").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}

function podmiana6(){
var sprawdz=document.getElementById("pole6").value;
if(sprawdz=="o"|| sprawdz=="O"){
 document.getElementById("szesc6").src = "O.png"; 
}
else if(sprawdz=="x"|| sprawdz=="X")
 document.getElementById("szesc6").src = "X.png"; 
else
	document.getElementById("szesc").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}

function podmiana7(){
var sprawdz=document.getElementById("pole7").value;
if(sprawdz=="o"|| sprawdz=="O"){
 document.getElementById("siedem7").src = "O.png"; 
}
else if(sprawdz=="x"|| sprawdz=="X")
 document.getElementById("siedem7").src = "X.png"; 
else
	document.getElementById("siedem").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}

function podmiana8(){
var sprawdz=document.getElementById("pole8").value;
if(sprawdz=="o"|| sprawdz=="O"){
 document.getElementById("osiem8").src = "O.png"; 
}
else if(sprawdz=="x"|| sprawdz=="X")
 document.getElementById("isiem8").src = "X.png"; 
else
	document.getElementById("osiem").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}

function podmiana9(){
var sprawdz=document.getElementById("pole9").value;
if(sprawdz=="o"|| sprawdz=="O"){
 document.getElementById("dziewiec9").src = "O.png"; 
}
else if(sprawdz=="x"|| sprawdz=="X")
 document.getElementById("dziewiec9").src = "X.png"; 
else
	document.getElementById("dziewiec").innerHTML="To jest kolko i krzyzyk, zdecyduj sie na jedno!";
	
}

zsm1g92 · Luty 13, 2018

Po pierwsze: funkcja podmianaX, czy coś w tym stylu, powinna zastępować wszystkie pozostałe podmiany.

Po drugie: Daniel Shiffman (polecam The Coding Train na YT), bo ja się boję JS'a, twierdzi, że let jest lepsze niż var.

Po trzecie wreszcie:

Cytuj

[...] zmienna a1 to i tak po wykonaniu funkcji przestanie ona istnieć [...]

ponownie Daniel Shiffman... twierdzi, że JS pozwala na programowanie obiektowe - proszę się zapoznać z pojęciami pola i metody, a w dłuższym terminie ze wszystkim, co jest związane z OOP...

Ostatnio mnie tutaj okrzyczano (i słusznie...), więc proszę poczekać na kolejne odpowiedzi.

wies.niak · Luty 13, 2018

Generalnie ten kod jest słaby na tylu poziomach, że nawet nie wiadomo od czego zacząć. ALE! rozumiem, że to początek i bardziej chodzi o zrobienie, żeby działało, niż żeby miało to ręce i nogi. Tak czy siak polecam złapać jakąś książkę albo kurs JS i się doszkolić troszkę, przytulić jakiś framework typu angular.

Co do kodu, to @zsm1g92 słusznie napisał, że funkcja podmianaX powinna być jedna. Wystarczy, że w parametrze przekażesz, jakiego pola dotyczy. Myślę, że też w tej funkcji można zrobić sprawdzanie wygranej, po wykonaniu podmiany (przy czym wtedy warto zmienić nazwę na bardziej pasującą, a samą podmianę wydzielić do innej funkcji). Musiałbyś też zestandaryzować id tagów img, bo "osiem8" jest dość chude.

Gdybyś cały kod JS zapakował w obiekt, mógłbyś w tym obiekcie trzymać tablicę ze stanem gry i za jej pomocą łatwo sprawdzać wygraną. W obecnej sytuacji pozostaje Ci zmienna globalna (co jest słabe). Możesz też odwoływać się to pól po nazwach - konwencję nazw masz. Od biedy możesz w div zapisywać atrybuty z wartościami.

Zaloguj się

Zarchiwizowany

Kółko i krzyży JS

Polecane posty

mordus

Link do komentarza

Udostępnij na innych stronach

zsm1g92

Link do komentarza

Udostępnij na innych stronach

wies.niak

Link do komentarza

Udostępnij na innych stronach

Kto przegląda 0 użytkowników

CD-Action

Przeglądaj

Aktywność