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