Jestem nowicjuszem w programowaniu HTML5 / Canvas / Game, ale majstrowałem przy nim po przeczytaniu kilku książek. MYŚLĘ, że mam dość dobre pojęcie o tym, jak wszystko się układa. To pytanie zadaje kilka mniejszych pytań, ale ogólnie jest to pytanie „podejście strukturalne”. Nie oczekuję gadatliwych odpowiedzi, ale miejmy nadzieję, że tu i ówdzie małe wskazówki :) Oto link do nie przewijającego się, a obecnie raczej nudnego Super Mario World.

Super Mario World Test

UWAGA: Kontrolki to lewy / prawy i spacja, aby skakać. To jest tylko konfiguracja dla Firefoksa teraz, ponieważ dopiero się uczę.

Czy zrobiłem coś złego w tym punkcie?

Obecnie skupiłem się tylko na tym, jak Mario biegnie i skacze, i myślę, że całkiem nieźle go pokonałem. Pudełko na monety nic nie robi, a tło jest tylko obrazem załadowanym do wyglądu. Oto moje podejście. Daj mi znać, jeśli coś jest nie tak z tym:

Pozwala Mario skakać, wykonując 2 prędkości Y (zmienne grawitacji i skoku)Pozwala Mario biegać, wykonując 1 prędkość (lewe lub prawe „Tarcie” + przyspieszenie)Sprite'y są używane i rozmieszczane zgodnie z keypress / keydownNie jestem pewien, czy to prawda, ale używam funkcji konstruktora do budowania obiektu, a następnie w głównej pętli animacji wywoływam funkcję prototype.draw dla tego obiektu, aby zaktualizować wszystkie zmienne i przerysować obiekt.Wyczyszczę całe płótno każdej klatkiCzy powinienem podzielić to na coś więcej niż tylko funkcję rysowania, jak Mario.move ()?Ustawiłem poziom GroundLevel i zmienną JumpLevel, aby utworzyć 2 płaszczyzny rozgrywki. Poziom JumpLe jest skonfigurowany, aby umożliwić kontrolowanie, jak wysoko Mario może skakać w locie. Dwa miejsca pozwoliłyby ziemi podnieść się jak wzgórze - utrzymując punkt, w którym Gravity unieważnia siłę skoku Mario w tej samej odległości od ziemi.Dla jasności wszystko jest podzielone na różne pliki JS, ale oczywiście się konsoliduje.Poruszanie się do przodu:

Teraz, kiedy skończyłem konfigurować sposób, w jaki Mario się porusza (myślę, że jest kilka innych drobnych rzeczy, które mogę zrobić, jak grzyb w górę / dół i strzelanie kulami ognia). Myślę, że mogę to rozgryźć, ale jestem naprawdę zagubiony, jeśli chodzi o wizualizację poniższych i tego, jak HTML5 / Canvas może sobie z tym łatwo poradzić:

Przewijanie tła (Próbowałem ustawić płytki naziemne i używać zawijania ekranu, ale wydaje się, że powoduje to wiele nierównych problemów, ponieważ przesuwałem płytki w przeciwnym kierunku. Niestety, ponieważ staram się uwzględnić przyspieszenie, to odrzuciłem licznik i spowodowałem luki w ziemi, porzuciłem ten pomysł. Czy DIV pod płótnem z dużym obrazem tła będzie najlepszym rozwiązaniem?

Wrogowie: Czy stworzyłem wrogów w ten sam sposób i uruchomiłem pętlę do wykrywania kolizji na każdym wrogu podczas każdej klatki?

Tło: staram się pozwolić Mario stać na pudełkach w tle, ale nie jestem pewien, jak do tego podejść. Obecnie mam granice ustawione dla Mario, aby pozostać na płótnie, czy nadal rozszerzam te warunki, aby ustawić różne granice na podstawie pól? Widzę, że posiadanie kilku pól na ekranie i zrobienie tego w ten sposób byłoby trochę szalone, zwłaszcza gdybym robił te same testy trafień dla wrogów? Wiem, że coś tu brakuje ...

Ruch poziomowy: Jest to nieco związane. Po naciśnięciu klawisza W prawo wszystko w poziomie musi przejść w lewo. Czy musiałbym wyśledzić wszystkie pozycje wszystkiego, co mogłoby dotknąć Mario (pudełka, w których mógłby stanąć, i wrogów, z którymi mógłby się zderzyć) podczas każdej klatki animacji? Wydaje się, że byłoby to trochę nieefektywne?

Dziękuje za wszystko! Będę na bieżąco aktualizował wyniki / rozwiązania :)