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

Kółko i Krzyżyk - JS ES5 - [Code Review]

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
–1 głos
949 wizyt
pytanie zadane 22 lipca 2017 w Nasze projekty przez Kamil Łydka Stary wyjadacz (13,600 p.)
Hej. Chciałbym pochwalić się swoją małą aplikacją napisaną w JavaScript. Celowo kod jest napisany w samym ES5. Jednocześnie chciałbym prosić wszystkich bardziej doświadczonych o ocenę kodu i wypunktowanie mi moich błędów. Apka jest dla dwóch osób, nie ma możliwości grania z komputerem, a to dlatego że chciałem skupić się na samym języku, a nie poświęcać czasu logice.

Moje repozytorium znajdziecie tutaj: https://github.com/PanLydka/tic-tac-toe-ES5

Z kolei wersję live można przetestować tutaj: https://panlydka.github.io/tic-tac-toe-ES5/

 

Będę bardzo wdzięczny za każdą uwagę i na pewno wszystkie poprawki wniosę. Bardzo możliwe, że potem stworzę nowe repo z tym samym kodem, ale przepisanym na ES6. :)
komentarz 22 lipca 2017 przez kubaapk Nałogowiec (44,270 p.)
'Teraz rusza się...' nie do końca dobrze działa, sprawdź sobie.
komentarz 22 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)
Chodzi o animację? No tak, jak ktoś szybko przeklika wszystkie pola, to w pewnym momencie może się nie wyświetlić, ale nie widzę tu problemu, bo jakby ktoś miał grać normalnie, to wszystko działałoby okej.

W dodatku nie mam pomysłu jak mógłbym to zrobić inaczej, żeby uniknąć takiego zawirowania. :)
komentarz 22 lipca 2017 przez kubaapk Nałogowiec (44,270 p.)
Jeśli kliknę start to jest napisane, że ruch ma gracz O, wykonuję ruch i znowu jest napisane, że jest ruch dla O, a dodaje się X. Jeśli zagram po raz drugi, to informacje odnośnie tury są odwrócone, tj. przy ruchu X wcześniej jest informacja, że ruch ma O. :)
komentarz 22 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)
Wczoraj coś poprawiałem i musiałem popsuć i umknęło to mojej uwadze, za jakieś 3h to poprawię, serio nie zauważyłem. Dzięki

2 odpowiedzi

+2 głosów
odpowiedź 22 lipca 2017 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 25 lipca 2017 przez Kamil Łydka
 
Najlepsza
komentarz 22 lipca 2017 przez ScriptyChris Mędrzec (190,190 p.)
edycja 22 lipca 2017 przez ScriptyChris

https://github.com/PanLydka/tic-tac-toe-ES5/blob/master/src/js/board/game.js#L3

Pobrałeś elementy, z których potem nie korzystasz za pośrednictwem pola this.fields. Ale na takiej zasadzie możesz właśnie pobrać na początku działania aplikacji wszystkie elementy, których będziesz potrzebować i w funkcjach odnosić się do nich przez this/self.

https://github.com/PanLydka/tic-tac-toe-ES5/blob/master/src/js/main.js#L4

Czemu tak? Robisz coś potem ze zmienną game? Nie wystarczy po prostu new Game()?

Właściwie, to nawet wystarczyło by zapisać tak:

// document.getElementById("start").addEventListener("click", new Game());

Nie przekazujesz tam żadnych parametrów, ani tym bardziej obiektu zdarzenia, więc możesz od razu na kliknięciu odpalić grę.

+1 głos
odpowiedź 22 lipca 2017 przez niezalogowany

Zamiast tego spagetti

var lastAction = this.actions[this.currentPlayer][self.actions[self.currentPlayer].length-1];
this.actions[this.currentPlayer].splice((this.actions[this.currentPlayer].length-1), 1);

Proponuję użyć pop


Czemu winOptions są stringami?

this.winOptions = [
  ["1", "2", "3"], ["4", "5", "6"], ["7", "8", "9"],
  ["1", "4", "7"], ["2", "5", "8"], ["3", "6", "9"],
  ["1", "5", "9"], ["3", "5", "7"]
];

Po co w devDependencies

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "coffeelint": "^1.16.0",
    "cssnano": "^3.10.0",
    "gulp": "^3.9.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-livereload": "^3.8.1",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0",
    "gulp-webpack": "^1.5.0",
    "sass": "^1.0.0-beta.2",
    "webpack-watch-livereload-plugin": "0.0.1"
  },
  • babel-core,
  • babel-loader,
  • babel-preset-es2015,
  • coffelint,
  • cssnano,
  • sass,
  • webpack-watch-livereload-plugin

?

komentarz 22 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)
winOptions są stringami, dlatego że this.actions.x oraz this.actions.o również przechowują stringi, a potem w funkcji status() porównuje te stringi. Nie muszę dodawać dodatkowej operacji polegającej na rzutowaniu typu.
komentarz 22 lipca 2017 przez niezalogowany
A czemu this.actions są stringami?
komentarz 22 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Hmm. Szczerze nie wiem do końca. 

// funkcja fieldPick()

console.log(numberField);
// dostaję wartość typu int 

this.actions[this.currentPlayer].push(numberField);
console.log(this.actions[this.currentPlayer]);
// i dostaję już wartości w stringach :/ 

 

Podobne pytania

0 głosów
1 odpowiedź 1,968 wizyt
–1 głos
1 odpowiedź 3,995 wizyt
+1 głos
4 odpowiedzi 816 wizyt
pytanie zadane 2 sierpnia 2016 w JavaScript przez Mawii0 Nowicjusz (170 p.)

93,191 zapytań

142,206 odpowiedzi

322,042 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 3053p. - dia-Chann
  2. 2998p. - Łukasz Piwowar
  3. 2993p. - Łukasz Eckert
  4. 2970p. - CC PL
  5. 2930p. - Tomasz Bielak
  6. 2907p. - Łukasz Siedlecki
  7. 2890p. - rucin93
  8. 2584p. - Adrian Wieprzkowicz
  9. 2536p. - Mikbac
  10. 2485p. - Marcin Putra
  11. 2418p. - Michal Drewniak
  12. 2239p. - Michał Telesz
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1650p. - Mariusz Fornal
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...