[jQuery] Snake, Wężyk z prostą grafą. |
[jQuery] Snake, Wężyk z prostą grafą. |
18.07.2008, 21:17:51
Post
#1
|
|
Grupa: Zarejestrowani Postów: 603 Pomógł: 131 Dołączył: 24.07.2007 Skąd: Górny Śląsk Ostrzeżenie: (0%) |
W ramach ćwiczenia się w js i jQuery(wersja: 1.2.3) postanowiłem popełnić Snake'a, który w praktyce wygląda tak: SNAKE
Info: -sterowanie na klawiszach W,S,A,D -jestem świadom, że odznaczenie inputa sprawia, że gra nie działa. Kody: jQuery:
css: Kod <style type="text/css"> /* <![CDATA[ */ div{ height:20px; width:20px; } div.pole{ background:#217F25; } div.glowa{ background:yellow; } div.ogon{ background:red; } div.owoc{ background:blue; } table.waz,#gameover { margin:20px auto; padding:0; } #gameover{ width:100px; } td,tr{ padding:0; margin:0; border:0; } /* ]]> */ </style> Trochę mi ten kod przycięło do lewej, no ale tak działa forum na tabulacje;) Ładniejszy w źródle strony:) Ten post edytował lord_t 18.07.2008, 21:19:39 -------------------- |
|
|
21.07.2008, 23:55:04
Post
#2
|
|
Grupa: Zarejestrowani Postów: 1 873 Pomógł: 152 Dołączył: 9.04.2006 Skąd: Berlin Ostrzeżenie: (0%) |
zamiast
$('#czytnik').keypress daj $('document').keypress i powinno działac ;P -------------------- |
|
|
22.07.2008, 11:31:37
Post
#3
|
|
Grupa: Zarejestrowani Postów: 603 Pomógł: 131 Dołączył: 24.07.2007 Skąd: Górny Śląsk Ostrzeżenie: (0%) |
$(document).key... pomogło, thx.
Jak zrobię kolejną wersję to tam już ową zmianę zamieszczę. PS. Ja już myślę, że tu jakaś opinia o skypcie a tu psińco;p No ale dzięki:) -------------------- |
|
|
7.08.2008, 18:47:23
Post
#4
|
|
Grupa: Zarejestrowani Postów: 392 Pomógł: 7 Dołączył: 11.05.2008 Ostrzeżenie: (0%) |
Gierka nawet całkiem całkiem, ale według mnie:
- powinienneś dopracować grafikę - Na końcu gry wyświetla się GAME OVER i tyle. Brakuje mi tu punktacji -------------------- Jeśli Ci pomogłem wciśnij Jeśli mi pomożesz wcisnę
|
|
|
7.08.2008, 21:07:57
Post
#5
|
|
Grupa: Zarejestrowani Postów: 1 657 Pomógł: 125 Dołączył: 29.04.2006 Ostrzeżenie: (0%) |
Jest ok, ale nic specjalnego. Można powiedzieć, że sam silnik jest gotowy, ale to trzeba jakoś dokończyć, ładnie "opakować"
Na przykład dobrze by było zrobić, że jeśli input jest odznaczony (czyli jeśli nie jest bodajże focus), to stopuje grę -------------------- |
|
|
11.08.2008, 16:25:39
Post
#6
|
|
Grupa: Zarejestrowani Postów: 17 Pomógł: 0 Dołączył: 11.07.2008 Skąd: СССР Ostrzeżenie: (0%) |
Gra bardzo fajna, oceniam na 8/10. Zamiast kolorowych kwadracików można by zastosować prostą grafikę z przezroczystym tłem (tułów poziomy/pionowy, skręt głowy węża w różne strony, ogon itp.).
#EDIT: Literówka. Ten post edytował Михаил_з_СССР 11.08.2008, 16:27:32 -------------------- |
|
|
11.08.2008, 17:27:41
Post
#7
|
|
Grupa: Przyjaciele php.pl Postów: 1 789 Pomógł: 41 Dołączył: 30.10.2003 Skąd: Wrocław Ostrzeżenie: (0%) |
Widzę kilka literówek w kodzie, np. ths.niemozliwy zamiast this.niemozliwy - to samo z ths.kierunek.
Ogólnie wężyk spoko Wkurza tylko to focusowanie na pole tekstowe. |
|
|
11.08.2008, 17:50:01
Post
#8
|
|
Grupa: Zarejestrowani Postów: 6 476 Pomógł: 1306 Dołączył: 6.08.2006 Skąd: Kraków Ostrzeżenie: (0%) |
@tiraeth: autor wcześniej zrobił
Kod var ths=this; Nie wiem w jakim celu, ale IMHO to nie literówka
|
|
|
11.08.2008, 19:19:05
Post
#9
|
|
Grupa: Zarejestrowani Postów: 654 Pomógł: 17 Dołączył: 19.03.2006 Skąd: z kosmosu ;) Ostrzeżenie: (0%) |
Kodu nie oceniam (nie mam czasu przeglądać), ale efekt mi się podoba - na pewno sam bym lepszego nie uzyskał
Co do grafiki też fajna, chociaż nie wiem czy ktoś będzie w to grać (trochę nie praktyczne) ale mi się podoba 8/10 - nic nie jest idealne, w kodzie wiedzę same polskie nazwy chociaż tylko zerknęłem na niego, nie sprawdzałem Pozdrawiam, WebNuLL(Babcia@Stefa) Ten post edytował Babcia@Stefa 11.08.2008, 19:20:28 -------------------- Środowisko testowe (desktop) - Gedit, lighttpd, sftp, rsync, xfce4-terminal, chromium, firefox4 | System: Gentoo ~x86
O'Neill - serwer WWW @ lighttpd, links, nano, rsyncd, sftpd | System: Debian |
|
|
11.08.2008, 23:21:24
Post
#10
|
|
Grupa: Zarejestrowani Postów: 603 Pomógł: 131 Dołączył: 24.07.2007 Skąd: Górny Śląsk Ostrzeżenie: (0%) |
Najpierw trochę odpowiem:
@tiraeth: to nie literówka;) ale fakt, że w wielu miejscach ths można było zastąpić this (co też zrobiłem). W jednym miejscu nie można ( $(document).keypress(function(e){...}), ponieważ tam this odwołuje się do document. @Babcia@Stefa: a od kiedy angielskie nazewnictwo są wyznacznikiem dobrego kodu? Nazwy metod są po ang, bo wydaja mi się krótsze niż pol. odpowiedniki. Jeśli lepiej i łatwiej czyta Ci się kody pisane całkowicie po ang. to możesz sobie przetłumaczyć ten kod. Wersja 1.1 Zmiany: -wyrzucenie 'czytnika' (thx dla bima2) -punktacja Kod jQuery (wkleiłem jako php tylko dlatego, żeby były TABy;) )
Kod css
-------------------- |
|
|
12.08.2008, 07:51:42
Post
#11
|
|
Grupa: Zarejestrowani Postów: 2 592 Pomógł: 445 Dołączył: 12.03.2007 Ostrzeżenie: (0%) |
Sterowanie w Operze wreszcie działa, aż się skusiłem zagrać
Kod KONIEC GRY Zdobyte punkty: 283 Dobra robota -------------------- |
|
|
13.08.2008, 11:47:18
Post
#12
|
|
Grupa: Zarejestrowani Postów: 18 Pomógł: 0 Dołączył: 10.08.2008 Ostrzeżenie: (0%) |
Straciłem na tej grze około 10 min świetna sprawa :-) gra się przyjemnie :-) Kodu niestety nie ocenie bo na JS nie znam
|
|
|
4.02.2010, 19:27:44
Post
#13
|
|
Grupa: Zarejestrowani Postów: 603 Pomógł: 131 Dołączył: 24.07.2007 Skąd: Górny Śląsk Ostrzeżenie: (0%) |
Wersja 1.2
Wersja 1.3 Wersja 1.4 Zmiany (1.2): -sterowanie przeniesione z W,S,A,D na strzałki, -wąż i owoce w postaci graficznej Zmiany (1.3): -buforowanie wszystkich pól -zwiększenie hermetycznosci Zmiany (1.4): -usunięcie niejawnego eval() z setTimeout() -uproszczenie związane z klasą css
Ten post edytował lord_t 5.02.2010, 12:09:41 -------------------- |
|
|
4.02.2010, 20:55:38
Post
#14
|
|
Grupa: Zarejestrowani Postów: 1 332 Pomógł: 294 Dołączył: 12.10.2008 Skąd: Olkusz Ostrzeżenie: (0%) |
ogólnie dobrze napisana aplikacja - na głębsze przejżenie kodu nie mam czasu i tylko ogólne uwagi
Najpierw trochę odpowiem: @tiraeth: to nie literówka;) ale fakt, że w wielu miejscach ths można było zastąpić this (co też zrobiłem). W jednym miejscu nie można ( $(document).keypress(function(e){...}), ponieważ tam this odwołuje się do document. tak, zmienne prywatne i zasięg - tu ok, ale skoro już takie obtymalizacje i mała "hermetyzacja" kodu to dlaczego używasz eval?? - w ostatniej wersji też jest: Cytat Kod setTimeout(this.nazwa+".timeLoop()",this.szybkosc); i w powyższym właśnie jest eval - a wszystko obchodzisz odwołując się do zmiennej globalnej window.Waz... podczas gdy zwróć uwagę i wklej w pasku adresu poniższy kod i zauważ, że też będzie działał: Kod java script:var a={b:function(){alert('ggg')},c:function(){setTimeout(this.b,1000);}};a.c();void(0); i jeszcze jedna mała uwaga - trochu nie mam czasu analizować kod ale tak na szybko patrząc na metody to chyba nie buforujesz uchwytu do elementów do których się da tylko za każdym razem ich szukasz w DOM?? np. w tej metodzie (tak na szybko nie zauważyłem buforowania uchwytów a i nie zwróciłem głębiej uwagi na logikę gry czy akurat tu da się zbuforować uchwyty): Kod this.putHead=function(i,j) { $('#'+i+'_'+j).addClass('glowa'+this.kierunek); this.checkCol(i,j); this.i=i; this.j=j; } a i nie wiem z jakiego edytora korzystasz więc czy te kreski, że to zmienne prywatne to nie wnikam... ale od razu napiszę jedną uwagę - zmienna prywatna może mieć tą samą nazwę (identyczną) jakby co jak zmienna publiczna i też definiując zmienne w argumentach funkcji danych zmiennych prywatnych nie trzeba definiować (chyba, że sprawdzasz czy jest podany argument) - i tu taki mały teścik: Kod java script:function test(){var a=2;this.a=3;this.a1=function(){return a;};this.a2=function(){return this.a;}};b=new test();alert(b.a1());alert(b.a2());void(0) ps. javascript w tych kodach ma być razem jak będziesz wklejał do paska adresu EDIT. ps. zaktualizuj sobie link do gry w temacie z Twoją ofertą do gry gdyż tam nie działa link Ten post edytował zegarek84 4.02.2010, 21:00:37 -------------------- Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
|
|
|
5.02.2010, 01:49:25
Post
#15
|
|
Grupa: Zarejestrowani Postów: 603 Pomógł: 131 Dołączył: 24.07.2007 Skąd: Górny Śląsk Ostrzeżenie: (0%) |
Dzięki za konstruktywny komentarz - Twoje rady uwzględniłem, a teraz kilka słów polemiki odnośnie eval(): Przedstawiony przez Ciebie kod nie działa w przypadku, gdy klasę tworzysz przy użyciu function(){}. Chętnie dowiem się jak to zrobić bez eval, może masz jakiś pomysł
Updejtowany kod w poście powyżej (+ link do wersji 1.3). -------------------- |
|
|
5.02.2010, 10:47:50
Post
#16
|
|
Grupa: Zarejestrowani Postów: 1 332 Pomógł: 294 Dołączył: 12.10.2008 Skąd: Olkusz Ostrzeżenie: (0%) |
teraz jadę w pociągu i deczo się "znieczuliłem " ale udało się - tzn lekkich problemów nastręczyła mi metoda timeLoop (okazuje się, że przy kompilacji do pamięci interpretera zachodziła mała rozbieżność - nie wiem czemu a że jestem deczko znieczulony to nie będę dokładniej szukał - w każdym bądź razie tam musiałem też this zastąpić nie tylko w setTimeout)...
a i nie chce mi się analizować (teraz znowu się drzemne ;p), ale chyba dało by się jeszcze kilka uchwytów do DOM zbuforować... a i nie musiałeś co chwila pisać var - jeśli masz pod rząd to mogłeś oddzielać przecinkiem... działający kod z setTimeout bez eval pod mozillą i operą: ________ EDIT usunąłem tego html'a bo rozwalał stronę a jest podane już rozwiązanie u lord_t PS. down nie czepiałem się kodu ;p - tylko pisałem, że tak można - podobnie jak z eval - już nie chodzi o to, że wszyscy piszą, iż jest niebezpieczny, chodziło o to, że przede wszystkim bardzo ogranicza gdyż: - kod musi być zinterpretowany po raz kolejny i jego interpretacja jest znacznie wolniejsza... - odwoływać się można w nim tylko do zmiennych globalnych będących w obiekcie window - co nie sprzyja hermetyzacji kodu podobnie z buforowaniem chodziło mi tez o to, że to jest wtedy szybsze - w sumie tu nie było potrzeby ale... pozdro Ten post edytował zegarek84 5.02.2010, 12:43:59 -------------------- Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
|
|
|
5.02.2010, 12:18:01
Post
#17
|
|
Grupa: Zarejestrowani Postów: 603 Pomógł: 131 Dołączył: 24.07.2007 Skąd: Górny Śląsk Ostrzeżenie: (0%) |
eval: bingo!
Uważam, że nie ma sensu już nic buforować - pozostały tylko odwołania na początku (budowanie planszy- wcale nie musi iść jakoś ekstra szybko) i na końcu (nie ma sensu - dwa jednorazowo wywoływane odwołania). var nie skrócę, bo nie lubię jak mi się ktoś czepia formatowania kodu;] A ponadto tak jest przejrzyściej. P.S. Kod poprawiłem dwa moje posty wstecz. Wersja online. -------------------- |
|
|
5.02.2010, 12:37:02
Post
#18
|
|
Grupa: Zarejestrowani Postów: 1 333 Pomógł: 137 Dołączył: 25.03.2008 Skąd: jesteś?? Ostrzeżenie: (0%) |
318, nie było już za bardzo gdzie się zmieścić, powiększ mapę.
Może możliwość stawiania jakiś kamieni na środku, jakiś edytorem mapy, takie marzenia, ogólnie 9/10 - SUPER! -------------------- Mój blog - o wszystkim i niczym ale zazwyczaj związane z informatyką! ;-)
Githube Usługi spawalnicze i monterskie | Park linowy Lublin i Okunince |
|
|
21.02.2010, 17:50:47
Post
#19
|
|
Grupa: Zarejestrowani Postów: 603 Pomógł: 131 Dołączył: 24.07.2007 Skąd: Górny Śląsk Ostrzeżenie: (0%) |
Wersja 1.5
Zmiany (1.5): -grafika (w pełnym tego słowa znaczeniu) -pauza (spacja) -Snake() zwraca uchwyt do gry -preload obrazów(owoce, części węża) -restartowanie (bez odświeżania strony) P.S. Byłbym wdzięczny na sprawdzenie wyglądu w IE7 i ewentualnie jakiś zrzut ekranu w przypadku błędu. P.S.2. @ShadowD: jeśli rozwinę to pomyślę nad tymi przeszkodami:)
Ten post edytował lord_t 21.02.2010, 17:53:00 -------------------- |
|
|
21.02.2010, 17:58:39
Post
#20
|
|
Grupa: Zarejestrowani Postów: 2 885 Pomógł: 463 Dołączył: 3.10.2009 Skąd: Wrocław Ostrzeżenie: (0%) |
Kozackie! Tylko brakuje mi liczenia punktów za zebrane owoce. Ale i tak jestem pod wrażeniem.
-------------------- Nie pomagam na pw, tylko forum.
|
|
|
Wersja Lo-Fi | Aktualny czas: 25.04.2024 - 16:28 |