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

kolko i krzyzyk w JS

0 głosów
807 wizyt
pytanie zadane 12 lutego 2018 w JavaScript, jQuery, AJAX przez Adam Polak Początkujący (370 p.)

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>

 

1 odpowiedź

0 głosów
odpowiedź 14 lutego 2018 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

Strasznie dziwny kod ja sobie na szybko napisałem to prawidłowo. Sora za prostotę i łopatologiczne rozwiązania ale miałem tylko 15 min na napisanie tego, natomiast to nawet lepiej ponieważ łatwiej zrozumiesz i sobie przerobisz według uznania. Takie pola robi się na tabeli. Jak czegoś nie rozumiesz to śmiało pytaj :) Tu masz kod:

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kółko i krzyżyk</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div hidden id="komunikat">
       <h1 id="tresc">Test</h1>
       <button id="przycisk">Zagraj jeszcze raz</button>
   </div>
    <table id="plansza">
        <tr>
            <th x="0" y="0"></th>
            <th x="1" y="0"></th>
            <th x="2" y="0"></th>
        </tr>
        <tr>
            <th x="0" y="1"></th>
            <th x="1" y="1"></th>
            <th x="2" y="1"></th>
        </tr>
        <tr>
            <th x="0" y="2"></th>
            <th x="1" y="2"></th>
            <th x="2" y="2"></th>
        </tr>
    </table>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS

/* Niby hidden zawsze ukrywa ale lepiej się upewnić. */
#komunikat[hidden]
{
    display: none;
}
/* Wyśrodkowanie wszystkiego */
#komunikat,
#tresc,
#przycisk
{
    text-align: center;
    display: block;
    margin: auto;
}
/*Ostylkowanie planszy według uznania */
#plansza
{
    /*position relative ponieważ będę przykrywać planszę przez pseudoklasę before na position absolute */
    position: relative;
    /*Żeby obeamowania się łączyły */
    border-collapse: collapse;
    /*Wyśrodkowanie */
    margin: auto;
    margin-top: 100px;
}
/* Blkowanie planszy gdy nikt nie ma ruchu */
#plansza:not([ruch])::before
{
    padding-top: 40%;
    box-sizing: border-box;
    font-size: 20px;
    color: white;
    text-align: center;
    content: "Gra zawieszkona";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
/*Stylowanie komórki (pojedyńczego pola) */
th
{
    border: 1px solid black;
    font-size: 30px;
    width: 80px;
    height: 80px;
}
/*Stylkowanie pustego pola po najechaniu myszką */
th:not([pole]):hover
{
    background-color: #0f0;
    cursor: pointer;
}
/* Stylkowanie pełnego pola po nahechaniu myszką */
th[pole]:hover
{
    background-color: #f00;
    cursor: not-allowed;
}
/* Wypełnienie pola obstaionego x i po najechaniu myszka gdy mamy ruch x */
#plansza[ruch=x] th:not([pole]):hover::before,
th[pole=x]::before
{
    content: "X";
}
/* To samo tylko że z o */
#plansza[ruch=o] th:not([pole]):hover::before,
th[pole=o]::before
{
    content: "o";
}

JS

//Przygotowywujemy sobie zmienną na planszę
var tablica;
var plansza;
var ruch_numer;
//Tworzymy zdarzenie które uruchomi sie jak strona zostanie załadowana
window.addEventListener("load", function(){
    //Po kliknięciu przycisku zaczynamy grę na nowo
    document.getElementById("przycisk").addEventListener("click", function(){
        document.getElementById("komunikat").setAttribute("hidden", "");
        nowa_gra("x");
    });
    //Przypisujemy sobie nasza zmienną do planszy żabyśmy nie musieli ciągle jej wyszukiwać
    plansza = document.getElementById("plansza");
    //dodajemy do plansz zdarzenie wywoływane przez kliknięcie myszki
    plansza.addEventListener("click", function(zdarzenie){
        //Element zdarzenie.target zawiera wskaźnik na polę na którym nastąpiło kliknięcie
        //Sprawdzamy czy user napewno klinką w pole a nie np. trafił na siatę, czy gdzieś obok.
        if(zdarzenie.target.nodeName != "TH" || zdarzenie.target.hasAttribute("pole"))
            return false;
        zdarzenie.target.setAttribute("pole", plansza.getAttribute("ruch"));
        var ruch = 1;
        if(plansza.getAttribute("ruch") == "x")
        {
            ruch = -1;
            plansza.setAttribute("ruch", "o");
        }
        else
            plansza.setAttribute("ruch", "x");
        //Dodaje kolejny ruch
        ruch_numer++;
        //Oznaczam pole w tablicy
        tablica[parseInt(zdarzenie.target.getAttribute("x"))][parseInt(zdarzenie.target.getAttribute("y"))] = ruch;
        switch(czy_koniec())
        {
            //najpopularniejsza opcja wiec na poczatek sprawdzamy i jak jest to przerywamy sprawdzanie
            case false: break;
            //Już wiemy że koniec więc blokujemy interfejs odbierając ruch
            case -1:
                wyswietl_komunikat("Wygrał krzyzyk");
                break;
            case 1:
                wyswietl_komunikat("Wygrało kólko");
                break;
            case -2:
                wyswietl_komunikat("Remis");
                break;
        }
    });
    nowa_gra("x");
});
//Funkcja do wyświetlania komunikatu na koniec gry
function wyswietl_komunikat(tresc)
{
    document.getElementById("tresc").innerHTML = tresc;
    plansza.removeAttribute("ruch");
    document.getElementById("komunikat").removeAttribute("hidden");
};
//Podajemy kto zaczyna x - krzyzyk, o - kolko
function nowa_gra(zaczyna)
{
    //Resetuje liczbę ruchów
    ruch_numer = 0;
    //Tworzymy tabelę jednowymiarową
    tablica = new Array(3);
    //Dodajemy drugi wymiar tworząc w każdym wierszi tabeli kolejną tabelę
    for(var i = 0; i < tablica.length;i++)
    {
        tablica[i] = new Array(tablica.length);
        for(var x = 0; x < tablica.length; x++)
        tablica[i][x] = 0;
    }
    //Sprawdzamy czy są atrybuty pola, jesli tak to je usuwamy 
    var zapelnione_pola = plansza.querySelectorAll("th[pole]");
    for(var i = 0; i < zapelnione_pola.length; i++)
        zapelnione_pola[i].removeAttribute("pole");
    plansza.setAttribute("ruch", zaczyna);
};
function czy_koniec()
{
    /*
        -1 - krzyzk
        1 - kolko,
        -2 - remis
        false/0 - jeszcze nie koniec
    */
    //Sprawdzam czy nie ma wygranej po prostej
    for(var i = 0; i < 3; i++)
    {
        //Sprawdzam w poziomie
        if(Math.abs(tablica[0][i] + tablica[1][i] + tablica[2][i]) == 3)
            return tablica[0][i];
        //Sprawdzam w pionie
        if(Math.abs(tablica[i][0] + tablica[i][1] + tablica[i][2]) == 3)
            return tablica[i][0];
    }
    //Sprawdzam skosy
    if(Math.abs(tablica[0][0] + tablica[1][1] + tablica[2][2]) == 3)
        return tablica[0][0];
    if(Math.abs(tablica[0][2] + tablica[1][1] + tablica[2][0]) == 3)
        return tablica[0][2];
    //Sprawdzam czy plansza nie jest zapelniona jak jest i nie ma nadal wygranej to remis
    if(ruch_numer >= 9)
        return -2;
   return false;
}

 

Podobne pytania

0 głosów
1 odpowiedź 53 wizyt
0 głosów
1 odpowiedź 71 wizyt
0 głosów
1 odpowiedź 167 wizyt
pytanie zadane 26 czerwca 2017 w JavaScript, jQuery, AJAX przez Puckovsky Nowicjusz (120 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

65,755 zapytań

112,393 odpowiedzi

237,318 komentarzy

46,700 pasjonatów

Przeglądających: 126
Pasjonatów: 1 Gości: 125

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...