• 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
868 wizyt
pytanie zadane 12 lutego 2018 w JavaScript, jQuery, AJAX przez Adam Polak Początkujący (410 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ź 54 wizyt
0 głosów
1 odpowiedź 72 wizyt
0 głosów
1 odpowiedź 169 wizyt
pytanie zadane 26 czerwca 2017 w JavaScript, jQuery, AJAX przez Puckovsky Nowicjusz (120 p.)
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

66,472 zapytań

113,245 odpowiedzi

239,781 komentarzy

46,608 pasjonatów

Przeglądających: 222
Pasjonatów: 10 Gości: 212

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.

...