https://github.com/learosema/boulders

Boulder Dash Clone
https://github.com/learosema/boulders

canvas eleventy game webgl webgpu

Last synced: 12 days ago
JSON representation

Boulder Dash Clone

• Host: GitHub
• URL: https://github.com/learosema/boulders
• Owner: learosema
• License: mit
• Created: 2023-07-23T20:48:59.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-28T08:41:35.000Z (8 months ago)
• Last Synced: 2024-05-28T21:50:21.898Z (8 months ago)
• Topics: canvas, eleventy, game, webgl, webgpu
• Language: TypeScript
• Homepage: https://boulders.netlify.app/
• Size: 399 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Boulders - A Boulder Dash Clone

This is a basic clone of the Boulder Dash game, originally built by [Peter Liepa](https://brainjam.ca). The game mechanics are roughly implemented from what I've had in memory.

It is a demo/research project for a couple of web platform technologies, frameworks and methodologies I'm interested in and love to work with.

## Technologies

- [Eleventy](https://11ty.dev)

- [TypeScript](https://typescriptlang.org)

- [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)

- [esbuild](https://esbuild.github.io/)

- [lightningcss](https://lightningcss.dev/)

- Web Audio API. A microlibrary dropped out of this: [https://retro-sound.js.org](https://retro-sound.js.org)

- JSX without React: I've written a bit about that [Custom JSX in TypeScript](https://lea.codes/posts/2024-01-17-custom-jsx-in-typescript/)

- Different Rendering Engines and changing them on-the-fly while in-game: WebGL, WebGPU, Canvas2D

- GLSL and WGSL shaders

- Building game mechanics incrementally via test-driven development

- some basic Software Architecture principles, some SOLID but mostly "loose coupling" and depending on interfaces rather than implementations

- "isomorphic TypeScript": The Canvas2D renderer used in the Frontend is re-used in Eleventy/node.js to generate preview images.

- ASCII art maps: the levels are plain text files with [ASCII art maps](https://github.com/learosema/boulders/blob/main/src/level/01.txt), processed by Eleventy

## Talk 

I held a talk about the project at the [NovaSummit 2023](https://youtu.be/rsf0hTE4--0). 

There are also [slides](https://boulders-slides.netlify.app/). The Slides are also made with Eleventy. The source is available on [GitHub](https://github.com/learosema/boulders-slides).

## Development environment setup

This project relies on the [canvas](https://npmjs.org/package/) npm package 

to render preview images for the levels via Eleventy.

It requires a bunch of dependencies to be installed on the system. 

Please follow the instructions on the npm page.

## License

- Code: [LICENSE](LICENSE.md)

- Artwork: CC-BY-SA 4.0