Zapisywanie ustawień w przeglądarce; fasada dla localStorage lub sessionStorage

Moja gra The Ship Game nie wymaga back-endu w postaci serwera bazą danych. Jak zapisać dane bez bazy danych? Można postawić na to co daje nam współczesna przeglądarka i jej JavaScriptowe obiekty localStorage oraz sessionStorage.

Gdy popatrzymy na interfejs obiektów typu Storage, czyli localStorage i sessionStorage to on wygląda on następująco.

Notacja z typami według TypeScriptu

  • length: number – właściwość tylko do odczytu. Zwraca ilość danych przechowywanych w Storage.
  • clear(): void – czyści cały Storage z danych.
  • key(index: number): string – Zwraca i-ty klucz z Storage.
  • getItem(keyName: string): string – Wyciąga wartość pod kluczem keyName.
  • setItem(keyName: string, keyValue: string): void – Zapisuje wartość keyValue pod kluczem keyName.

Fajny interfejs do zapisywania stringów do bazy. A co z obiektami? Jakbym chciał zapisać takie coś:

Czytaj resztę...

TsLint – utrzymywanie kodu w jednym stylu i zapobieganie bólowi głowy

TsLint to TypeScriptowa wersja JsLinta…

Linty to programy które sprawdzają twój kod pod względem:

  • Czytelności
  • Łatwość utrzymania
  • Błędy funkcjonalne

TsLint w projekcie TheShipGame jest uruchamiany przez WebPacka:

{
    test: /\.tsx?$/,
    enforce: "pre",
    loader: 'tslint-loader'
}

test oznacza, że jest dopasowany do rozszerzeń .ts oraz .tsx. .ts to rozszerzenie standardowe dla TypeScript, natomiast .tsx oznacza podobnie do .jsx pliki korzystające z rozszerzonej składni używanej np. przez bibliotekę React.

Czytaj resztę...

Jak być na bieżąco z zależnościami w środowisku Node.js

Ilość zależności w projekcie The Ship Game wynosi 51 różnych wpisów w pliku package.json. Trzeba pamiętać że każdy z tych zależności posiada, także swoje – tworząc ‚niekończące’ się drzewo zależności.

Jak żyć?

Z pomocą przychodzi npm-check-updates. Instalacja wygląda tak:

    npm install -g npm-check-updates

A użycie nie może być prostsze. Komenda ncu poszuka pliku package.json i zwróci możliwe pakiety do aktualizacji. Przed kontynuacją z tematem tego posta trzeba wyjaśnić jak zapisywana jest wersja w środowisku Node.js oraz jak działają zakresy wersji.

Czytaj resztę...

The Ship Game – (pixel) Grafika

Gry składają się z trzech filarów: grafika, dźwięk oraz rozgrywka.

W tym poście poruszę temat pierwszy grafikę.

Zdolności plastycznych nie mam, a grafika w grze musi być.

Postawiłem na jedyny styl używany w grach który:

  • Rozumiem
  • Mogę go samodzielnie tworzyć
  • Wygląda jako-tako

Jak tworzyć taką grafikę?

Można użyć edytorów graficznych takich jak:

  • Gimp
  • Paint.net
  • Photoshop

Ale żaden z nich nie został stworzony z myślą o pixel artcie. Jednym z takich edytorów jest Aseprite.

Czytaj resztę...

The Ship Game – Założenia

Na konkurs Daj się poznać 2017 ruszam na podbój razem z swoją grą.

Normalny korpo człowiek ustaliłby na początku scope czyli zakres tego co ma posiadać produkt. To co musi posiadać, to co może i to co fajnie mieć.

Ja natomiast mówię nie takiemu podejściu. Tworzenie projektu ma być po pierwsze i najwyższe dobra zabawą. Ustalanie priorytetów jest ważne aby projekt się udał w ustalonym czasie. Nie zakładam ukończenia tej gry w regulaminowym czasie 10 tygodni.

Czytaj resztę...

Dobre praktyki programowania odbierają smak życia

Pamiętasz jak napisałeś pierwszy Hello World? Ja jestem młody i pamiętam. Myślałem, że mogę góry przenosić tworzyć kolejne systemy operacyjne, tworzyć gry konkurujące z Quake 3 lub nawet lepiej. Byłem potężny, mogłem ‚próbować’ stworzyć wszystko. Następnie odwiedza się parę blogasków programistycznych i innych stron poświęconych programowaniu, i dowiaduje się, że istnieje coś takiego jak:

Czytaj resztę...
Back To Top