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

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: