https://github.com/artginzburg/stack

Tower stacking game using React Three Fiber (WebGL)
https://github.com/artginzburg/stack

game react-three-fiber

Last synced: 3 months ago
JSON representation

Tower stacking game using React Three Fiber (WebGL)

• Host: GitHub
• URL: https://github.com/artginzburg/stack
• Owner: artginzburg
• Created: 2023-01-05T15:36:41.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-18T22:24:12.000Z (11 months ago)
• Last Synced: 2024-04-06T09:35:06.204Z (7 months ago)
• Topics: game, react-three-fiber
• Language: TypeScript
• Homepage: https://stack.ginzburg.art/
• Size: 14.4 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        




# stack

A Web remake of a popular tower stacking [game][original] for mobiles.







Just saw [KonradLinkowski/Stack][threejs-version], and decided to rewrite it from [Three.js][threejs] to [React Three Fiber][r3f].

> It's my first try at games, and the first glance at 3D from a dev's perspective (tried 3ds Max before, that's all).

## Motivation

### Aim

This project aims to be a functionally and visually exact copy of the original game. The intention is to train the reverse design and system architecture skills of the contributors.

### Exceptions

Though, if there's something to improve (i.e. add without disturbing the visual and functional consistency) in the original — it may be an exception. A good example of such  platform-specific capability that adds without modifying the concept is adapting to large screens: as this runs in Web, there's no reason to force the portrait viewport orientation.

Another thing I already implemented is statistics display. I'm almost sure that the original collects some sort of stats to improve the future games of the studio, but there's no way for the player to see their collected stats.

When the theming support is finished, I'd like to add more available customizations for new themes, like the ability to invert gravity (that already exists in dev mode).

## Enhancements

> over the [Three.js version][threejs-version]

- Shadows. The lighting almost matches the original iOS game.

- A service worker and `manifest.json`. The game runs offline and can be added to Home Screen as a standalone app.

- Auto-play. It is a dev-only feature that makes the game play itself, with some level of error if required. Essentially, this is an automatic test.

- `pointerDown` instead of `click` event to play. Because that's how it worked in the original game.

- Adapt game size to the user's screen (only based on screen width for now).

- Physics for cut off tiles.

- Orthographic (non-perspective) camera, like in the original game. The point of view (a.k.a. the orthographic equivalent of perspective) also exactly matches the original, double-checked by precise measurements and by overlaying screenshots of the two game versions.

- Fixed some minor bugs that glitched the cut off tile once in a while.

## Plans

See or add yours in [Issues](https://github.com/artginzburg/stack/issues)

[threejs-version]: https://github.com/KonradLinkowski/Stack

[original]: https://apps.apple.com/us/app/stack/id1080487957

[threejs]: https://threejs.org

[r3f]: https://docs.pmnd.rs/react-three-fiber

![](./resources/preview.png)