JavaScript Programming - Games, Demos, Examples © Paweł Drabowicz

434 visits since 2022-04


ASTEROIDS (ONLINE GAME)

ASTEROIDS (ONLINE GAME)

CLICK TO VIEW

ASTEROIDS to przeglądarkowa gra mojego autorstwa napisana w JavaScript (pierwowzór wykonany przez Atari w 1979 roku). Gra umożliwia wspólne granie dwóch osób na jednej klawiaturze. Rozgrywka wymagała napisania bezwładności statku, kolizji, efektów cząsteczkowych oraz procedur obrotów i przesunięć wielokątów. Cieszy mnie, że rozgrywka zachowała grywalność! Grę można znacznie rozbudować zamieniając symboliczne asteroidy na obracające się sześciany lub inne bryły trójwymiarowe. Obecna wersja umożliwia grę tylko przy użyciu klawiatury, w czasie testów napisałem sterowanie statkiem przy użyciu żyroskopu telefonu komórkowego, jednak sterowanie było na tyle problematyczne, że porzuciłem ten pomysł.

ASTEROIDS online game written by me in JavaScript (the original written by Atari in 1979). The game allows two people to play together on one keyboard. The gameplay involved writing the ship's inertia, collisions, particle effects, and polygon rotation and displacement procedures. I am glad that the gameplay remains playable! The game can be significantly expanded by turning symbolic asteroids into rotating cubes or other three-dimensional solids. The current version allows you to play only using the keyboard, during tests I wrote the ship control using a mobile phone gyroscope, but the control was so problematic that I abandoned this idea.

2022-07-22



3D CUBE TEXTURE SHADER

3D CUBE TEXTURE SHADER

CLICK TO VIEW

3D CUBE TEXTURE SHADER czyli kolejny przykład wykorzystania JavaScript do wyświetlania grafiki trójwymiarowej z wykorzystaniem teksturowania i cieniowania. Program nie używa zewnętrznych bibliotek (np. three.js), wykorzystuje podstawowy tryb graficzny Canvas2D, który w przeciwieństwie do WebGL nie pozwala na użycie akceleracji sprzętowej. Najtrudniejsza w realizacji była funkcja teksturowania co wymagało przypomnienia działań na macierzach. Teksturowanie to inaczej transformacja tekstury (kwadratu) w czworobok o różnych kątach nachylenia ramion. Wyliczona macierz transformacji, pozwala na transformację prostokąta w romb, co wymusza rysowanie dwóch rombów, pierwszy dopasowany jest do lewego, drugi do prawego boku teksturowanej ściany. Kolejny krok to przycięcie każdego z nich poprzez podział ściany na dwa trójkąty. Podział czworokąta na dwa trójkąty pozwala uzyskać akceptowalny efekt teksturowania.

3D CUBE TEXTURE SHADER is an example of using JavaScript to display three-dimensional graphics with the use of texturing and shading. The program does not use external libraries (e.g. three.js), it uses the basic graphic mode of Canvas2D, which, unlike WebGL, does not allow the use of hardware acceleration. The most difficult to implement was the texture mapping function, which required reminding of the matrix operations. Texturing is the transformation of a texture (square) into a quadrilateral with different angles of inclination of the arms. Computed transformation matrix, allows you to transform a rectangle into a diamond, which forces you to draw two diamonds, the first one fits the left side, the second one fits the right side of the textured wall. The next step is to trim each of them by dividing the wall into two triangles. Dividing a quadrilateral into two triangles allows you to obtain an acceptable texturing effect.

2022-08-15



TUNNEL OFFSET VORTEX

TUNEL NA OFFSETACH / TUNNEL OFFSET VORTEX

CLICK TO VIEW (ALPHA)

CLICK TO VIEW (GAME)

CLICK TO VIEW (NORMAL)

TUNEL NA OFFSETACH (VORTEX) to kolejny efekt jaki chciałem napisać od dawna. Efekt tunelu uzyskujemy dzięki zwinięciu tekstury przy użyciu funkcji arcus tangens oraz pierwiastka kwadratowego. Wrażenie lotu w tunelu powstaje poprzez przesuwanie tekstury o określony offset. Najtrudniejsze w implementacji było uzyskanie akceptowalnej ilości klatek na sekundę. Niezbędną prędkość działania otrzymałem poprzez tablicowanie wyliczonych pikseli oraz przezroczystości dla cieniowania głębi tunelu. ZAPAMIĘTAJ!! Co bardzo ważne, nie należy rysować pikseli, a zmieniać kolory istniejących! Jak zawsze dla ciekawskich komentarze w źródle strony.

TUNNEL OFFSET (VORTEX) is another effect that I have wanted to write for a long time. The tunnel effect is achieved by folding the texture using the arctangent and square root functions. The impression of flight in a tunnel is created by shifting the texture by a certain offset. The most difficult thing to implement was getting an acceptable number of frames per second. I obtained the necessary speed of operation by arraying the calculated pixels and transparency for shading the depth of the tunnel. REMEMBER!! What is very important, do not draw pixels, but change the colors of existing ones! As always for curious comments in the source of the page.

2022-08-28



METABLOBS

METABALLS

CLICK TO VIEW

METABALLS to ciekawy efekt ilustrujący oddziaływanie na siebie obiektów cząsteczkowych. Do uzyskania efektu należy policzyć odległości każdego piksela od odległości wszystkich metaball`i. Kolejnym krokierm jest wyliczenia pierwiastka kwadratowego otrzymanych odległości. Wynik pierwiastkowania mnożymy przez wszystkie kolejne wyniki pierwiastkowania. Iloczyn odległości posłuży do wyliczenia koloru pikseli łączenia się elementów. Ustawienie wsztystkich parametrów jest dość skomplikowane.

METABALLS is an interesting effect that illustrates the interaction of molecular objects. To obtain the effect, the distance of each pixel from the distance of all metaballs should be counted. The next step is to calculate the square root of the obtained distances. Multiply the square root result by all successive square root results. The product of the distance will be used to calculate the pixel color of the joining elements. Setting all parameters is quite complicated.

2022-08-06



SINUS SCROLL

SINUS SCROLL / SINE SCROLL

CLICK TO VIEW

SINUS SCROLL to klasyczny efekt stosowany na demoscenie przy przesuwaniu tekstu. Znośną prędkość programu uzyskałem dzięki funkcji context.drawImage (rysowanie liter) oraz context.setTransform (odbicie lustrzane). Czcionka wczytywana jest z pliku fonts.gif, falowanie tekstu powstaje przez zmianę położenia plastrów liter. Wywołanie rysowania kolejnej klatki (ramki) odbywa się za pomocą funkcji window.requestAnimationFrame(draw).

SINE SCROLL is a classic effect used on demoscene for text scrolling. I got the program's acceptable speed thanks to the functions context.drawImage (drawing letters) and context.setTransform (mirroring). The font is loaded from the fonts.gif file, text waving is created by changing the position of the letter slices. The next frame (frame) is drawn using the window.requestAnimationFrame (draw) function.

2022-05-31



ROTO ZOOM

ROTO ZOOM

CLICK TO VIEW

2022-09-08



3D CUBE POLYGON SHADER

3D CUBE POLYGON SHADER

CLICK TO VIEW

SZEŚCIAN 3D napisany w JavaScript przy użyciu Canvas2D. Przykład rzutowania perspektywicznego, obrotów, przesunięć, sortowania i cieniowania wielokątów. Dla ciekawskich komentarze w źródle strony. Cieniowanie wielokątów wykonałem w oparciu o odległość wierzchołków Z od obserwatora, którą poprzednio wyliczyłem do sortowania ścian, tj. ściany najbliżej obserwatora rysujemy na końcu (odległość wielokąta od obserwatora to średnia wartość współrzędnych Z).

CUBE 3D written in JavaScript using Canvas 2D. Example of perspective projection, rotation, shifting, sorting and shading of polygons. For curious comments in the source of the page. I made the shading of the polygons based on the distance of the Z vertices from the observer, which I previously calculated for sorting the walls, i.e. the walls closest to the observer are drawn at the end (the distance of the polygon from the observer is the average value of the Z coordinates).

2022-05-13



3D CUBE POLYGON

3D CUBE POLYGON

CLICK TO VIEW

3D Cube, Javascript, Canvas2D.

2022-05-13



3D CUBE OUTLINE

3D CUBE OUTLINE

CLICK TO VIEW

3D Cube, Javascript, Canvas2D.

2022-05-13



ALL EXAMPLES:


tunnel-offset-vortex
scroll-sine
roto-zoom
metaballs
game-pinball
game-asteroids
3d-cube-texture-shader-webgl
3d-cube-texture-shader
3d-cube-polygon-shader
3d-cube-polygon
3d-cube-outline



© Paweł Drabowicz