Jump to content
Sign in to follow this  
mordus

Kółko i krzyży JS

Recommended Posts

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!";
	
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...