[js] chce zatrzymac czas Opcje

[right6]

mam sobie funkcje zliczajaca czas od jej pierwszego wywolania

Kod

function czas( pauza )
{
    if( (ile_klikniec) < (x*y) )
    {  
        if( czas_startu == null )
        {  
            czas_startu = new Date()-1;
        }
    
        teraz = new Date();

        now = teraz - czas_startu;
        sek = now/1000;
        sek = Math.round( sek );
        
        document.getElementById('czas').innerHTML = "<span class=\"haslo\">"+(sek+sek_all)+"</span>";

        if( pauza == 1 )
        {
            alert(pauza);
            return 1;
        }
        else
        {
            setTimeout( "czas()", 100 );
        }
    }        
}

ale chce zrobic PAUZE, czyli klikam na przycisk i wyswietla alert, czas staje, klikam OK, i czas dalej leci. Sam alert nie zatrzymal przeladowania funkcji, to wsadzilem to w if(), niepomoglo, dalem return, niepomoglo. Nadal caly czas funkcja jest setTimeout( "czas()", 100 ); przeladowywana.

jak iwec ja zatrzymac na czas wyswietlenia elertu ?

Ten post edytował right6 24.04.2006, 15:41:59

[dr_bonzo]

Nie zajmowalem sie tym dawno: ale jednokrotne uruchomienie setTimeout chyba w nieskonczonosc uruchamia co zadany czas dana funkcje.
SetInterval (czy jakos podobnie, nie wiem czy istnieje ) robi to czego oczekujesz.

[right6]

znalazlem na google

Kod

Można tak skonstruować funkcję, że nie będzie ona zapętlona w nieskończoność, tylko na czas występowania jakiegoś warunku:

function funkcja1() {

//jakieś instrukcje

if(warunek)
  setTimeout("funkcja1()",50)
}

wiec w/w przezemnie kod powinien dzialac ...

a to SetInterval strasznie zmula kompa ze az wiesza przegladarke na 1,3 celeron M (laptop) z odswiezaniem co 1000

setTimeout niezauwazalnie

EDIT

znalazlem clearTimeout()
i jest OK

nadal mam pytanie czego SetInterval() tak zmula kompa

Ten post edytował right6 24.04.2006, 21:55:46

[dr_bonzo]

Widocznie sie pomylilem.

A ile razy zapuszczales tego intervala? Bo on po jednokrotnym uruchomieniu uruchamia dana funkcje co X czasu.

[siemakuba]

setTimeout() -> wykonuje zadany kod po uplynieciu zadanej liczby milisekund

setInterval() -> wykonuje zadany kod cyklicznie w odstepach rownych zadanej liczbie milisekund. (stad "zamulanie", podany kod przestanie sie wykonywac dopiero jak to przerwiesz, lub zezre ci procesor :P)

jezeli dobrze pamietam, obie te metody zwracaja identyfikator utworzonego timeout lub interval.

Kod

var myTimeout = setTimeout();
var myInterval  = setInterval();

obje te metody maja tez swoje metody przerywajace, ktorym podajesz jako paramter wczesniej utworzony identyfikator.

Kod

clearTimeout(myTimeout); // przerywa czekanie na wywolanie kodu
clearInterval(myInterval); // przerywa wywolywanie kodu

pozdr.

[right6]

Kod

<table class="tabela_gl" cellpadding="2" cellspacing="1" style="width:100%;margin-bottom:5px">

  <tr>
    <td class="kol1" style="width:85%;text-align:center">

<div id="container" style="text-align:center;margin-left:auto;margin-right:auto">

<script type="text/javascript">

var w1_klik=null, w2_klik=null, i1_klik=null, i2_klik=null, poziom=1;
tab=[];
i=1;
var ii=0, podwojne=null, czas_startu=null, ik=null, bylo=null;
klikniecia=new Array();
var x = 2;
var y = 2;
var ile_klikniec=null, licznik_klikniec=0;
var td_all="", tr_all="";
var calosc="", tr="";
var punkty=100;
sek_all = null;
var czas_przed=0;
var pary=null;
var id_st;
var pauza;

document.write("<div id=\"plansza\">a</div>");

function plansza( x,y )
{
    td_all="", tr_all="";
    calosc="", tr="";

    while( tab.length<(x*y) )
    {
      tab.push(i);
      tab.push(i++);
    }
    A=tab;
    for( i=A.length; i; A.push( A.splice(~~( Math.random()*(i--) ), 1 ) ) );

    for( i2=0; i2<y; i2++ )
    {
        id=x*i2;

        td = "";
        td_all = "";
        for( i3=0; i3<x; i3++ )                                                                                                                                                
        {
            td = "<td style=\"background-color:blue;width:50px;height:50px\" onclick=klik(this.id) id=\""+id+"-t\"><div class=\"box\" onclick=klik(this.id) id=\""+id+"\"><img src=\"./obrazki/"+tab[id]+".gif\" style=\"display:block\" /></div>"+tab[id]+"</td>";
            td_all = td_all+td;
        
            id++;
        }
        tr = "<tr colspan=\""+x+"\">"+td_all+"</tr>";
        tr_all = tr_all+tr;
    }

    calosc = "<table style=\"text-align:center;margin-left:auto;margin-right:auto\">"+tr_all+"</table>";

    document.getElementById('plansza').innerHTML = calosc;
    
    document.getElementById('pary').innerHTML = x*y/2;
}

plansza( x, y );

function czas( pauza )
{
   if( (ile_klikniec) < (x*y) )
   {  
       if( czas_startu == null )
       {  
           czas_startu = new Date()-1;
       }
  
       teraz = new Date();

       now = teraz - czas_startu;
       sek = now/1000;
       sek = Math.round( sek );
      sek = sek+czas_przed;
      
      
       document.getElementById('czas').innerHTML = "<span class=\"haslo\">"+(sek+sek_all)+"</span>";
      

      document.getElementById('czas_').innerHTML = "sekunda";
      czas_przed = null;
                    
       if( pauza == 1 )
       {   window.clearTimeout(id_st);
           alert("pauza");
           czas_startu = null;

           czas_przed = sek+sek_all;

          
           alert(czas_przed);
       }
      
       id_st = setTimeout( "czas()", 1000 );
   }        
}      

function klik(id)
{  
    licznik_klikniec++;
    czas();

    var a = id.split("-");
      
    for( ii=0; ii<ile_klikniec; ii++ )
    {  
        if( klikniecia[ii] == a[0] )
        {
            bylo = 1;
            return false;
        }
    }
    
    if( !a[1] )
    {              
        podwojne = a[0];
        return false;
    }
    
    if( i1_klik == null && i2_klik == null )
    {
        document.getElementById('pauza').disabled=false;
    }
    
    if( podwojne == a[0] )
    {                  
        return false;
    }
    podwojne = null;
    
    if( i1_klik != null && i2_klik != null )
    {
        document.getElementById(i1_klik).style.display='none';
        document.getElementById(i2_klik).style.display='none';
        i1_klik = null;
        i2_klik = null;
        return false;
    }
                  
    if( w1_klik == null && w2_klik == null )
    {  
        w1_klik = document.getElementById(a[0]).innerHTML;
        i1_klik = a[0];
        document.getElementById(a[0]).style.display='block';                    
    }
    else
    {
        w2_klik = document.getElementById(a[0]).innerHTML;
        i2_klik = a[0];
        document.getElementById(a[0]).style.display='block';

        if( w1_klik == w2_klik  )
        {
            czas();
            document.getElementById(i1_klik+"-t").style.background='red';
            document.getElementById(i2_klik+"-t").style.background='red';
            
            //Dodawanie punktów za odsłonięcie pary
            punkty = punkty+10;
            document.getElementById('punkty').innerHTML = punkty;
            
            ik++;                
            klikniecia[ik] = i1_klik;
            ik++;
            klikniecia[ik] = i2_klik;
            
            w1_klik = null;
            w2_klik = null;
            i1_klik = null;
            i2_klik = null;
            
            ile_klikniec = klikniecia.length-1;
            pary = ((x*y)-ile_klikniec)/2
            
            document.getElementById('pary').innerHTML = pary;
            if( pary == 1 )
            {
                document.getElementById('pary_0').innerHTML = "Pozostała ci do znalezienia już tylko";
                document.getElementById('pary_').innerHTML = "para";
            }
            if( pary == 2 || pary == 3 || pary == 4 || pary == 22 || pary == 23 || pary == 24 || pary == 32 || pary == 33 || pary == 34 )
            {
                document.getElementById('pary_0').innerHTML = "Pozostały ci do znalezienia już tylko";
                document.getElementById('pary_').innerHTML = "pary";
            }
            if( pary > 4 )
            {
                document.getElementById('pary_0').innerHTML = "Pozostało ci do znalezienia już tylko";
                document.getElementById('pary_').innerHTML = "par";
            }

            if( (ile_klikniec) >= (x*y) )
            {
                poziom++;
        
                w1_klik=null, w2_klik=null, i1_klik=null, i2_klik=null;
                ile_klikniec = null;
                licznik_klikniec = null;
                tab=[];
                i=1;
                ii=0, podwojne=null, ik=null, bylo=null;
                klikniecia=new Array();
                czas_startu=null;
                sek_all = sek_all+sek;
                
                //Dodawanie punktów za następny poziom
                punkty = punkty+50;
                document.getElementById('punkty').innerHTML = punkty;
            }  
        }
        else
        {
            document.getElementById(i2_klik).style.display='block';
            w1_klik = null;
            w2_klik = null;
            
            //Odejmowanie punktów za błędne odkrycie
            punkty = punkty-5;
            document.getElementById('punkty').innerHTML = punkty;
        }
    }  
}
                    
</script>

</div>

    </td>
    <td class="kol1" style="width:15%">
    
      <div><span class="zw2">Poziom:</span><span class="zw2b" id="level">1</span></div>
      
        <hr />
      
      <div><span class="zw1">Twój czas:</span></div>
      <div id="czas"><span class="haslo">0</span></div>
      <div><span id="czas_" class="zw2">sekund.</span></div>
      
        <hr />
  
      <div><span id="czas_" class="zw2">Punkty:</span></div>      
      <div><span id="punkty" class="haslo">100</span></div>
      
      
        <hr />
            
      <input id="pauza" type="submit" value="Pauza" onclick="czas(1)" />
  
    
    </td>
  </tr>
</table>

<hr />

<div style="text-align:left">
  <span class="tytul_tematu">
    <a href="./../index.php">Start</a> &raquo;
  </span>
</div>

uruchomcie sobie w/w kod pod firefoxem, i mi powiedzcie czego po jednokrotynm kliknieciu na jakis kwadracik, i daniu "Pauza" zatrzymuje czas. Ale od razu po odswiezeniu jak od razu klikne na dwa pola, i dam PAUZA, to czas leci dalej ...

pod IE, czy Opera jest OK, niezaleznie ile klikniec wykonam. Ja zwariuje chyba

[siemakuba]

to co przychodzi na myśl, to dołozenie do tego jakiegoś click-lock.

Przy kliknięciu uruchamiasz licznik i dajesz w kliknietym elemencie np:

Kod

myElement.clickable = false;

przy kazdym kliknieciu sprawdasz te wartosc:

Kod

if (typeof(myElement.clickable) == 'undefined' || myElement.clickable == true)
{
    // uruchamiasz licznik
    myElement.clickable = false;
}
else
{
    return false;
}

faktycznie, zachowuje sie tak jak napisales pod FF (nie sprawdzalem gdzie indziej). Mysle ze dzieje sie tak ze kazde klikniecie uruchamia nowy licznik i potem klikanie w pause troche sie gubi, bo pauzuje faktycznie tylko jeden z wielu uruchomionych licznikow.

wydaje mi sie ze powyzsze rozwiazanie pomoze.
pozdr.

[right6]

dalem to

Kod

  
    id.clickable = false;    
    
    if (typeof(id.clickable) == 'undefined' || id.clickable == true)
    {
        // uruchamiasz licznik
        id.clickable = false;
    }
    else
    {
        return false;
    }

na samym poczatku funkcji klik()

i niestety nadal to samo (
ale zauwazylem ze jak klikne dwa el. na poczatku to czas stanie, ale jak pauze nacisne 3 razy !

EDIT:
tera sobei pomyslelem ze w miejscu "// uruchamiasz licznik"
dam "czas()", a ponizsze wywolanie tej funkcji usune

ale i to nie pomoglo, jak bylo tak i jest

EDIT2

fakycznie i teraz pod ie, tez tak samo.

i kolejne spostrzezenie. Jak klikne na poczatku na el o innych numerach aby zatrzymac wystarczy nacisnac 2x pauze, jak o takich samych numerach, to juz 3 razy pauze.

Ten post edytował right6 27.04.2006, 07:47:25

[siemakuba]

hm, spojrzalem na funckje klik() i pierwsze co rzucilo mi sie w oczy, to to ze to jest wartosc atrybutu id. Powinienes ustawiac wartosc clickable dla obiektu.

Kod

var eID = document.getElementById(id);
eID.clickable = false;

sam nie wiem, widze ze o JS masz pojecie, wiec byc moze masz to zrobione OK, ale kodu nie widze. Daj znak-sygnal jak to wyglada.

aha, rozumiem tez ze zamiast

Kod

// uruchamiasz licznik

faktycznie uruchamiasz licznik?

pozdr.

[right6]

poczatek funkcji kilk()

Kod

var eID = document.getElementById(id);
eID.clickable = false;
  
  
   if (typeof(eID.clickable) == 'undefined' || eID.clickable == true)
   {
      czas();
       eID.clickable = false;
   }
   else
   {
       return false;
   }

i teraz wogole sie nie da kliknac ..., po kliknieciu nic sie nie dzieje.

o JS niebardzo mam pojecie
zaczolem sie tym bawic niedawno, tyle wiem co z kursow.

masz tutaj style do w/w kodu

Kod

div.box
{
   float:left;
   margin: 1px;
   width: 50px;
   height: 50px;
   border: #000 solid 1px;
   background: #efefef;
   text-align: center;
   cursor: pointer;
   display: none;
}
div.box:hover
{
   border: #000080 solid 1px;
   background: #cdcdcd;
}

zebys sobie to mogl lepiej zobaczyc jak to wyglada, i co sie dzieje po kliknieciu.

P.S.
o klikniecie dwa razy w ten sam kwadracik mi nie chodzi.
tylko o klikniecie jakis dwoch innych dowolnych kwadracikow

P.S.
a to clickable to co ono ma robic ? bo nigdzie na googlach nic w PL nie znalazlem wiec moze dobrze myslisz, tylko ja to zle stosuje.

[siemakuba]

po kolei:

o klikniecie dwa razy w ten sam kwadracik mi nie chodzi.
tylko o klikniecie jakis dwoch innych dowolnych kwadracikow

hm, okej, wiec mea culpa, inaczej zrozumialem

a to clickable to co ono ma robic ? bo nigdzie na googlach nic w PL nie znalazlem

:) to nie jest jakas wartosc ktora ma element "z definicji". Ja sobie wymyslilem taka wlasciwosc dla niego, coby oznaczac czy zostal juz klikniety czy nie.

czy to jest to co chcesz osiagnac?
1. ktos klika na kwadracik
2. uruchamia sie licznik
3. w czasie kiedy licznik tyka nie mozna kliknac innego kwadracika
4. nacisniecie pause powoduje zatrzymanie licznika - co dalej? (czy to odblokowuje mozliwosc klikania w inne?, czy mozna "odpausowac" tykanie licznika?

[right6]

to jest zaczatek gry memory.
Klikasz sobie na kwadracik go odslaniasz, pokazuje Ci sie obrazek, klikasz na nastepny pokazuje Ci sie drugi, jak sa takie same zostaje odsloniete, jak nie "chowaja sie". I tak az doslonisz wszystkie. Na potrzeby testowe zamiast obrazkow umiescilem liczby, i ponadto sa one zawsze widoczne aby wiadomo bylo co sie klika, i czego mozna sie spodziewac. Docelowo beda to obrazkim ktore kliknieciem bedziemy odlasniac

otwieramy stronke, i czas stoi na 0.

klikamy w dowolny kwadracik i od tego momentu zaczyna sie odliczanie sekund. Moze go zatrzymac znalezienie wszytskich par, albo klikniecie w PAUZE. No i tutaj juz utknolem, bo nie staje.

Zalozenie mam takie ze pauze mozna by wcisnac w dowolnym momencie. (ew. tylko w tedy nie mozna jak jakas karta jed odslonieta, ale to teraz niewazne).

a potem jak sie uda zatrzymac czas, no to go (albo drugim kliknieciem, albo drugim przyciskiem, albo kliknieciem na OK w alercie, albo kliknieciem na jaksi kwadrat, cos sie wymysli) odblokowac, ale najpierw trzeba zablokowac

Wielkie dzieki za zainteresowanie

Ten post edytował right6 27.04.2006, 13:54:44

[siemakuba]

witam ponownie, przyznam ze zaciekawiles mnie przeznaczniem skryptu i postanowilem sie z nim zmierzyc :)

wynik mozesz zobczyc tu: Memory Game :)
js: memory.js

pare rzeczy mozna tam jeszcze zoptymalizowac i poprawic na pewno, moze w wolnym czasie ;)

testowałem pod FF 1.5.0.2, IE 6, Opera 8.5

Style sa troche "różne", za pozno zauwazylem ze robilem to na DOCTYPE HTML 4.1 Transitional. Normalnie pracuje na Strict i do niego jestem przyzwyczajony.. no, ale to szczegoly. wieczorem postaram sie dolozyc tu omowienie skryptu, zeby bylo wiadomo co i skad sie bierze.

pozdr.

[right6]

tylko nadal nie wiem co w moim skrycpie jest nie tak (


P.S.
a wystarczy zaznaczenie zrobic i wszytskie literki widac

Ten post edytował right6 28.04.2006, 20:02:23

[siemakuba]

hej,
zmien ten kawalek:

Kod

function klik(id)
{  
   licznik_klikniec++;
   czas();
   // (...)
}

na:

Kod

function klik(id)
{  
   licznik_klikniec++;
  
   if(id_st == null)
   {    czas();
   }
   // (...)
}

i na poczatku deklaracje zmiennej id_st:

Kod

// bylo
var id_st;
// zmien na:
var id_st = null;

w ten sposob licznik zostanie uruchomiony przy pierwszym kliknieciu i kolejne klikniecie nie bedzie uruchamialo licznika ponownie.

P.S. pomysl nad rozwiazaniem tego za pomoca setInterval - to wydaje sie byc bardziej naturalne dla jakiegokolwiek odlicznia

a wystarczy zaznaczenie zrobic i wszytskie literki widac

P.S. wiem ze wystarczy zaznaczyc :) nie w tym rzecz, masz pogladowy kod, ktory pokazuje jak przebiega dzialanie takie skryptu (kiedy co jest wywolywane). Przeanalizuj, dostusuj do swojego kodu :)

powodzenia! :)

pozdr.

[right6]

dzieki siemakuba

jestes wielki.

jeszcze wczoraj zanim napisales ostatniego posta, siadlem na kodem. Wywalilem ze swojego ta funkcje czas, i zrobilem tak ja Ty masz w kodzie, ze nie odejmuje czasu, tylko dodaje do zmiennej +1 co 1s.

jakaz byla moja euforia jak ladnie zadzialalo

jeszce pra rzeczy zmienilem i jest OK tak jak chcialem, a i kod stal sie prostrzy

jeszce raz wielkie dzieki.
jak by cos kiedys masz u mnie piwo

[siemakuba]

jestes wielki.

ee, metr osiemdziesiąt z kawałkiem :)

jak by cos kiedys masz u mnie piwo

hehe, wiele go nie pijam, ale przy okazji chętnie :)

fajno, że mogłem pomóc i działa jak powinno.