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

Ocena gry napisanej w js (2048)

Object Storage Arubacloud
+1 głos
332 wizyt
pytanie zadane 29 marca 2017 w JavaScript przez DarQ Obywatel (1,030 p.)
edycja 31 marca 2017 przez DarQ

Witajcie! 

Uczę się od jakiegoś czasu programować w JavaScript.

Posiadam ogólną wiedzę na temat samego js i trochę o jquery (niewiele), mimo to postanowiłem spróbować napisać popularną grę 2048. Mam niestety problem i nie wiem jak zrobić animację, ale nie w tym rzecz :) Po skończonej pracy sprawdziłem sposób, którego użył twórca do stworzenia oryginału. Oczywiście jest na pewno dużo szybszy itd, ale co najważniejsze - jest nieco inny. Chciałbym zapytać Was o zdanie na temat mojego podejścia do problemu. Zdaję sobie sprawę, że kod mógłby być znacznie lżejszy, ale skupiłem się na tym, żeby to po prostu działało. Siadłem do komputera i powstało :) 

Uprzedzam, że mimo, iż chętnie posłucham jakichś rad odnośnie konkretnych metod, których użyłem, czy tego jakich błędów jakich popełniłem, to nie chciałbym, aby to się stało głównym tematem dyskusji. Chodzi mi o to, czy mój sposób na to był dobry, średni czy po prostu słaby i czy mielibyście jakiś inny pomysł jak to zrealizować :) 

Dzięki z góry za zajrzenie i zapoznanie się! :D

Link do jsfiddle - KLIK!

2 odpowiedzi

+4 głosów
odpowiedź 29 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
wybrane 31 marca 2017 przez DarQ
 
Najlepsza

Nie działa :( 

Uncaught ReferenceError: down is not defined
    at HTMLButtonElement.onclick (fiddle.jshell.net/:264)
fiddle.jshell.net/:264 Uncaught ReferenceError: down is not defined
    at HTMLButtonElement.onclick (fiddle.jshell.net/:264)
fiddle.jshell.net/:265 Uncaught ReferenceError: up is not defined
    at HTMLButtonElement.onclick (fiddle.jshell.net/:265)
fiddle.jshell.net/:266 Uncaught ReferenceError: left is not defined
    at HTMLButtonElement.onclick (fiddle.jshell.net/:266)
fiddle.jshell.net/:267 Uncaught ReferenceError: right is not defined
    at HTMLButtonElement.onclick (fiddle.jshell.net/:267)

Nei wiem jak działa, ale jeżeli działał u cb. To sam projekt jest spoko (jeżeli nie jest to n projekt FrontEndowy). Ale od strony jakości kodu: średnio).

  • Brak rozdzielania zadań, zbytnio nie wiem gdzie to startuje. (Nikt tym nie zarządza). Poczytaj o modules.
  • Powinno to stanowić jedną określoną całość zaczynającą się w jasnym punkcie kończąca się w konkretnym punkcie. Nie mogę tego znależć.
  • Ja bym to napisał Tak:
    • ​​​​​​​Scrable (moje ciało Applikacji) --> tu jest zarządzanie całą aplikacją.(Model)
    • App (przekaż do modelu, co ma zrobić. Moje scrable)
    • ConfigService (Z poziomu Scrable ładowanie konfiguracji projektu, budowa podstawowych obiektów np: item, htmlComponent);
    • GameControlerService - Z poziomu Scrable, reaguj na zdarzenia (Scrable przekazuje referencje do gameControlerService. (tu masz wszelkie move itd...)
    • RenderService ( buduje komponent htmlowy i wstrzeliwuje się w widok)
  • Binding w kodzie HTML (mieszanie logiki z widokiem), jest to bardzo zły pomysł po drugie utrudnia to możliwości na przenoszenie kodu. (addEventListener poczytaj).
function Item(give_place,give_value){
    this.place = give_place;
    this.value = give_value;
    this.append_item = function(give_place, give_value){
        var item_cell = $('.grid-item').eq(give_place);
        var put_to_html = '<div class="value value_'+give_value+'">'+give_value+'</div>';
        item_cell.append(put_to_html);
        
    }

 

  •  Jeżeli tworzysz obiekty, które stanowią najmniejszą logiczną postać jak item, nie powinen posiadać metody generującej html. Spójrz na to inaczej rzecz raczej nie potrafi tworzyć htmla? (tak jak piwo nie potrafi samo się napełniać a szkoda). Brakuje tu podziału dokładnie odzielające zadania dla kolejnych klas (np: render). Miesznie do tego jQuery zostawię bez komentarza. Do item powinen strzelać się kod, sam item nie powinen mieć dostępu do warstwy widoku. (Problem z przenośnością).

main_array = new Array(16);
 

  • Nie deklaruj globalnych.
  • A potem nagle rezygnujesz obiektowości na rzecz funkcji?
  for(var i=0;i<16;i++){
        if(main_array[i]==undefined){
            moves+=1;
        }
    }
if(moves>0){
        var random;
        do{
            random = Math.floor(Math.random() * 16);
            if(main_array[random]==undefined){
                main_array[random] = new Item(random,2);
                main_array[random].append_item(random,2);
                unique = true;
            }
            else{unique = false;}

        } while (unique==false);
    } else{
        alert("kunic!");
    }
  • To by mogło być osobną metodą (funkcją), staraj się rozdzielać na mniejsze zadania, tam gdzie masz if to przekaż referencje do metody isGameOver jest bardziej jasne o co ci chodzi niż moves>0, dla mnie na pierwszy rzut nie jest jasne co robi, widzę że skończą się ruchy to koniec.
$(document).ready(function(){
    random_new_item();
    random_new_item();
})
  • Spokojnie mgólbyś użyć document contentLoaded.
  • Dobry przykład:
function left(){
    move(12,-1,-4)
    random_new_item();
}
  • I to jest prawie dobry przykład wykorzystania funkcji. Tylko za bardzo nie wiem co to jest 12, -1 ,-4 warto b było je określić. Tym bardziej, ża są po wbijane stałe, czyli muszą być istotne.

Na pierwszy raz nie jest tak żle.

komentarz 31 marca 2017 przez DarQ Obywatel (1,030 p.)
Dzięki piękne za wyczerpującą odpowiedź.
 

Dziwna sprawa, że nie działa... uruchamiałem ten kod na dwóch komputerach - u siebie w live preview w Brackets'ie oraz u siebie i na laptopie na jsfiddle i nie było żadnego problemu, wszystko działało jak powinno...:(

Odnosząc się do większości chciałbym zaznaczyć, że projekt nie był (może nie potrzebnie) traktowany poważnie, stąd brak podziału na moduły, brak sensownego nazywania zmiennych czy brak komentarzy wyjaśniających co, gdzie i jak. Mam zamiar za jakiś czas, jak lepiej opanuję język, napisać tą grę znowu - tym razem z animacjami i żeby wyglądała tak, jak powinna, również jeśli chodzi o kod. Z tego też tytułu Twoje wskazówki są dla mnie bardzo cenne i jeszcze raz dziękuję, ta wiedza na pewno mi się przyda.

Co do metody w obiekcie item, która wstrzeliwuje "obiekt" do htmla - zgadzam się, wpadłem na to jakieś pół godziny po publikacji tego posta, że to nie ma sensu :) Zwłaszcza, że każdy kolejny obiekt będzie miał tą samą metodę, która wstrzeliwuje "sama siebie", co jest podwójnie bez sensu. Wystarczyła by jedna prosta funkcja i wywoływanie jej z argumentem item.

Co do nie tworzenia globalnych zmiennych - w takim razie powinienem stworzyć funkcję, która będzie zwracać tablicę i powinienem przekazywać wynik tej funkcji jako argument do innych funkcji, które będą działały na tej tablicy?

A co do rzeczy, które zrobiłem na skróty - głównie jest to wynik zbyt małej ilości wiedzy na temat odpowiednich rozwiązań, jak się trochę douczę to kod na pewno będzie zawierał bardziej odpowiednie rozwiązania.

Dziękuję i pozdrawiam!
komentarz 31 marca 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Obecna wersja już działa, musiałeś coś nachrzanić.

Co do nie tworzenia globalnych zmiennych - w takim razie powinienem stworzyć funkcję, która będzie zwracać tablicę i powinienem przekazywać wynik tej funkcji jako argument do innych funkcji, które będą działały na tej tablicy?

Parę linków na start:

http://kursjs.pl/kurs/moduly.php (Podstawy budowy modułów)

http://shebang.pl/artykuly/es6-bez-tajemnic-moduly/ (Nowe możliwości w es6)

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression (Co to jest IFFE)

http://www.merixstudio.pl/blog/chcesz-zachowac-porzadek-w-swoim-kodzie-javascript-zaprzyjaznij-sie-z-webpackiem/ (Przykładowe narzędzie do bundlowania kodu)

http://shebang.pl/artykuly/es6-babel-broccoli/ (kompilatory do korzystania z nowości w ES6)

Ogólnie shebang polecam, dużo wiedzy o zawansowanych rzeczach w JS.

Ok, po przeczytaniu tego mnie więcej będziesz wiedział co to ten kod oznacza ten poniżej:

App.js 

import {ItemService} from "Modules/Services/ItemService.js";
import {RenderService} from "Modules/Services/RenderService.js"
export class App {
constructor (){
this.itemService = new ItemService();
}

init (){
this.itemService.calculate();
this.renderService.render(this.itemService.getResult()); // Przelozylem wynik do całkiego innego modułu.
}
}
... Pominę początek importów.

export class itemService {
constructor(){
this.item = new Array();
this.result;
}
calculate(){
...cos tam sobie liczy;
this.result = result // Jakis wynik obliczeń
}
getResult (){
return this.result;
}
}

 

0 głosów
odpowiedź 26 października 2018 przez Michalqq Nowicjusz (160 p.)
Hej,

Również napisałem sobie taką gierkę stąd trafilem tutaj.

Twój kod wygląda ładniej niż mój, bo u mnie wszystko działa " na piechotę" - zrobiłem jak umiałem.

Znalazłem jednak błąd u Ciebie w logice gry. Klocki które się połączą nie powinny po połączeniu łączyć się w tym samym ruchu z kolejnymi klockami, co u Ciebie występuje, np. w poziomej lini stoi 8, 4, 4, 2 to przesuwając w lewo powinno wyjść 8, 8, 2, [ ]. a u Ciebie połączy się powstała 8 i wychodzi 16, 2, [ ], [ ],

Co do reszty to nie umiem ani pomóc ani się przyczepić na tę chwilę ;p Ja jednak wstawiałbym jakiś warunek sprawdzający gdy kostki się połączyły to koniec przesuwania danej linii.
komentarz 26 października 2018 przez kenjiro244 Dyskutant (8,600 p.)
Biorąc po uwagę że jest to post z marca 2017 roku to nie jestem pewien czy jest sens odświeżania tego postu
komentarz 28 października 2018 przez Michalqq Nowicjusz (160 p.)
Faktycznie, nie spojrzałem na datę

Podobne pytania

+3 głosów
0 odpowiedzi 224 wizyt
0 głosów
2 odpowiedzi 248 wizyt
pytanie zadane 26 października 2018 w JavaScript przez Michalqq Nowicjusz (160 p.)

92,576 zapytań

141,426 odpowiedzi

319,652 komentarzy

61,961 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...