HTML5/JavaScript przesuwanie obiektu po ekranie pod kątem

Przez ostatni rok zapoznałem się z Javascriptem i starałem się naprawdę dobrze nauczyć tego języka, dlatego zdecydowałem się stworzyć grę HTML5! Problemem, który napotkam, jest to, że absolutnie nie mam pojęcia, jak przesuwać obraz po ekranie płynnie i pod kątem. Mógłbym go przesunąć o kąt czterdzieści pięć stopni, przesuwając go o jeden piksel w górę/dół osi X i o jeden piksel w górę/dół osi Y, ale to nie jest wystarczająco szczegółowe. Jak mam to zrobić pod bardzo konkretnym kątem? Wydaje mi się, że musiałaby być funkcja, która zaokrągla go do najbliższego piksela?HTML5/JavaScript przesuwanie obiektu po ekranie pod kątem

Nie do końca jasne ... Każde rozwiązanie będzie działało dobrze, chociaż preferowane byłoby wyjaśnienie niebibliotekowe!

Dzięki!

Źródło

2012-11-28 Mark Hill

Kto powiedział, że piksel musi być liczbą całkowitą? –

Spróbuj to udowodnić. Wprowadź ten kod na konsoli chromowania dla tej strony, a następnie naciśnij enter i obejrzyj lewy górny róg ekranu. 'var el = document.createElement (" div "); el.setAttribute ("styl", "szerokość: 50 pikseli, wysokość: 50 pikseli, góra: 10 pikseli, lewo: 10 pikseli, tło-kolor: czerwony; pozycja: bezwzględna; indeks z: 20"); var doc = $ ("body") [0]; doc.appendChild (el); setInterval (funkcja() { var Val = el.style.left; Val = val.substring (0 val.length - 2) Val = parseFloat (Val); Val + = 0,1; Val + = "px"; el.style.left = val; }, 25); ' –

Oh shoot! Po prostu rozwaliłeś mój umysł! Chociaż, czy to mi w ogóle pomaga, ponieważ ekran nie może wyświetlać ułamka piksela? –

To, na co chcesz spojrzeć, to implementacja javascript: Linear Interpolation (lub lerp). Inna nazwa to motion tween, ale uważam, że jest to bardziej pojęcie animacji niż tworzenie gier.

Pomysł polega na tym, że masz dwie współrzędne, początek i koniec oraz czas, w którym animacja się pojawi, a do animacji między tymi dwoma użyjesz interpolacji liniowej.

Od powiązanego pytania o stos, this article wyjaśnia implementację przeglądarki, która pozwoli ci na interpolację.

Źródło

2012-11-28 07:20:36 Alan

Dziękuję bardzo! W moim przypadku jednak nie mam ustawionego końca. Przypuszczam, że powinienem był wspomnieć, że zostanie to wykorzystane do stworzenia małej gry testowej, w której można latać statkiem kosmicznym 2d za pomocą klawiszy strzałek "Asteroids". Czy to będzie problem, czy też będę w stanie stworzyć "teoretyczny" punkt końcowy? –

Nie będziesz mieć "końcowego" punktu końcowego, ale będziesz mieć punkt końcowy dla każdej klatki.Będziesz miał "prędkość" i "kąt". Przy każdej "klatce" lub w pętli gry musisz przeliczyć nowy "punkt końcowy" na podstawie bieżącego punktu początkowego, kąta i prędkości swojego statku. Po obliczeniu punktu końcowego użyjesz 'lerp' do faktycznego przesunięcia elementu statku od początku do końca w pewnym czasie-delcie. – Alan

W porządku, doceniam odpowiedź! Na pewno będę musiał przeprowadzić moje badania, ale twoje wyjaśnienie ma wiele sensu. –

Po pierwsze, jeśli tworzysz grę w HTML5, powinieneś wypróbować wersję Canvas element. Narysuj całą swoją grę na płótnie, zamiast manipulować elementami DOM. W związku z tym zasadą przemieszczania obrazu (wewnątrz płótna lub etykiety obrazkowej) byłoby obliczenie położenia z sin/cos + odległością od lewego górnego rogu płótna/okna.

przykład:

160° (South by South-East, give or take), distance 130 pixels. 
sin(160)*130 
    = 44.462619 
cos(160)*130 
    = -122.160041

-> górnym lewym rogu znajduje się w punkcie x = 44, y = 122 (od 44: -122 w 0: 0 dolnej lewej układ współrzędnych przekłada się na 44: 122 w górnym układzie współrzędnych 0: 0).

Źródło

2012-11-28 07:21:37 dda

Dzięki za odpowiedź! Zgaduję, że obliczenie grzechu/cos dałoby mi mój kąt, podczas gdy zastosowanie techniki interpolacji liniowej sugerowanej przez Alana wykonałoby rzeczywisty ruch? –

Musisz trygonometrii tam :) Na przykład, jeśli chcesz przenieść obiekt do kursora myszy, a następnie masz współrzędne obiektów i współrzędne myszy i należy obliczyć X i Y (długość kroku przepraszam za mój angielski)

Źródło

2012-11-28 07:21:44 karaxuna

Cóż, przenoszę to za pomocą klawiszy strzałek, więc nie wiem, gdzie jest końcowa lokalizacja, tak jakbym to zrobiła, gdybym ją przesunął w miejsce, w które kliknąłem. –

HTML5/JavaScript przesuwanie obiektu po ekranie pod kątem

Odpowiedz

Powiązane problemy