Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marciomarquessouza/learning-with-ghosts
The idea of the project is to use the resources provided by webGL (through three.js) to create a small educational game.
https://github.com/marciomarquessouza/learning-with-ghosts
javascript lit-html threejs typescript webcomponents webgl
Last synced: 15 days ago
JSON representation
The idea of the project is to use the resources provided by webGL (through three.js) to create a small educational game.
- Host: GitHub
- URL: https://github.com/marciomarquessouza/learning-with-ghosts
- Owner: marciomarquessouza
- Created: 2022-04-27T20:34:35.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T17:30:25.000Z (almost 2 years ago)
- Last Synced: 2023-03-07T18:53:02.645Z (over 1 year ago)
- Topics: javascript, lit-html, threejs, typescript, webcomponents, webgl
- Language: TypeScript
- Homepage: https://learning-with-ghosts.herokuapp.com/
- Size: 18 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
The idea of the project is to use the resources provided by webgl (through three.js) to create a small educational game.
In this game, the user will control a small ghost that arrives every day in a seaside town called "Ghost Town" and needs to interact with 4 other ghosts (a **Ghost Princess** in a lighthouse, a **Reaper** who works in a bar, a **Witch** and a last character to be defined)
**Trello:** https://trello.com/b/AEAcJDyJ/ghost-town
**Figma:** https://www.figma.com/file/p883Ak5XqmfBgaeEjZZ539/Games?node-id=1078%3A160
# Demo
I'm constantly deploying my work-in-progress to the server, so a lot of pending work must be finalized. So far, you can access the main page, register and log into your account and start the demo by moving the ghost (using the arrows keys) and having a small interaction with the Lighthouse Princess.
**Demo (WORKING IN PROGRESS):** https://learning-with-ghosts.herokuapp.com/
## Libs and Tools
- Three.js (Three.js is a 3D library that tries to make it as easy as possible to get 3D content on a webpage) - https://threejs.org/
- Lit (Lit is a simple library for building fast, lightweight web components) - https://lit.dev/
- Typescript (TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.) - https://www.typescriptlang.org/
- Express (Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.) - https://expressjs.com/
- Tailwind (Tailwind CSS components & templates with support for React, Angular, & Vue) - https://tailwindui.com/
- Web Test Runner (Test runner for web applications) - https://modern-web.dev/docs/test-runner/overview/#web-test-runner
- Figrma (UI)
- Blender (3D Models)
- Trello (Kanban Board)
## Motivations
The main motivations to start and continuing to work on this project are:
- **Explore different concepts and use of JavaScript that I haven't had the opportunity to work on in my professional projects.**
- **Opportunity to use different tools and methods** - Using Lit instead of React was not only a decision for the size of the bundle, but also for working more deeply with web elements and webpack (which is bringing me immense satisfaction).
- **Updating my tests concepts** - I've been working with Jest for testing for a long time and it's been a wonderful experience to work with another test library like Web Test Runner. I highly recommend her for other projects.
- **The web is increasingly standardized.** I believe that using WebGl is a good method to bring different flavors to gamification for the sake of teaching.
## Setup
To run the project locally
```bash
npm install
npm run dev
```
Open http://localhost:9090 to view your project.
## Screenshots
##### New chapter:
##### Ghost moviment:
##### Ghost interaction:
##### Lighthouse Princess:
##### Death and Chips Bar:
