{"id":19872724,"url":"https://github.com/snuffydev/wolfensvelte-3d","last_synced_at":"2025-05-02T09:31:20.616Z","repository":{"id":152046426,"uuid":"622663941","full_name":"snuffyDev/Wolfensvelte-3D","owner":"snuffyDev","description":"Wolfenstein 3D, reimagined in Svelte - rendered with the DOM","archived":false,"fork":false,"pushed_at":"2023-11-08T16:44:40.000Z","size":47691,"stargazers_count":158,"open_issues_count":0,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-30T12:34:33.715Z","etag":null,"topics":["css","game","hackathon","html","svelte","sveltehack","typescript","wolfenstein-3d"],"latest_commit_sha":null,"homepage":"https://wolfensvelte-3d.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/snuffyDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-04-02T19:08:40.000Z","updated_at":"2025-04-22T18:07:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"8a22f232-ac42-4337-bd07-56145304b8df","html_url":"https://github.com/snuffyDev/Wolfensvelte-3D","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snuffyDev%2FWolfensvelte-3D","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snuffyDev%2FWolfensvelte-3D/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snuffyDev%2FWolfensvelte-3D/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snuffyDev%2FWolfensvelte-3D/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snuffyDev","download_url":"https://codeload.github.com/snuffyDev/Wolfensvelte-3D/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252015807,"owners_count":21680827,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","game","hackathon","html","svelte","sveltehack","typescript","wolfenstein-3d"],"created_at":"2024-11-12T16:16:32.703Z","updated_at":"2025-05-02T09:31:20.575Z","avatar_url":"https://github.com/snuffyDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wolfensvelte 3D\n\nYes, it's a Svelte \"port\" of Wolfenstein 3D.\n\nNo, there's no WebGL, or canvas.\n\nLive Site: https://wolfensvelte-3d.vercel.app/\n\n## Screenshots\n\n\u003cdiv align=\"center\"\u003e\n\n| \u003cimg src=\"https://user-images.githubusercontent.com/72365477/232335697-ff217511-9e75-455f-b892-8452bab6d0d1.png\" width=\"300\" height=\"300\" /\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/72365477/232335679-c8401c92-34ac-49e4-9502-222c8e42cd4d.png\" width=\"300\" height=\"300\" /\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/72365477/232335652-eb53ae65-30b8-4701-a0b1-473d06047d1e.png\" width=\"300\" height=\"300\" /\u003e |\n| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |\n\n\u003c/div\u003e\n\n## Demo Video\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to show\u003c/summary\u003e\n\u003cvideo src=\"https://user-images.githubusercontent.com/72365477/232336502-42413936-cd7e-4ec0-a68e-dbed0529faf3.mp4\" playsinline width=\"100\" height=\"100\" controls\u003e \u003c/video\u003e\n\u003c/details\u003e\n\n\u003e NOTE: Demo video is heavily compressed due to GitHub size restrictions. You can see the full quality file at `.github/demo.mp4`\n\n## What? Why? How?\n\n\u003e What do you mean, it's a Svelte port of Wolfenstein 3D?\n\nWell, it's Wolfenstein 3D... but entirely rendered with Svelte! [1]\n\n\u003e _Why?_\n\nA better question would be \"why not?\"\n\nBut, the primary reason this project exists is because of [Svelte Hack 2023](http://hack.sveltesociety.dev/). But also because it seemed very interesting to work on!\n\n\u003e How?\n\nA lot of alcohol, and even more CSS 3D Transforms.\n\n\u003csup\u003e[1] it's not Wolfenstein 3D, of course. It's not 1:1, but it's familiar enough when you play. Plus, Wolfensvelte is a cool name.\n\n## Overview\n\nWolfensvelte 3D is a Svelte reimagining of the classic PC game Wolfenstein 3D. The entire game is made up from HTML DOM elements that have CSS 3D transforms applied to render the graphics.\n\nThe only tech used can be summed up as: Svelte, HTML, (S)CSS, and TypeScript/JavaScript.\n\n### Features\n\n- Enemies (Guards + Guard Dogs)\n- Weapons and ammo system\n- Secrets (pushwalls)\n- Item pickups\n- Full E1M1 map\n- Player Health\n- Basically, everything you'd expect\n\n### Technical Overview\n\nThis game attempts to push Svelte and the DOM to their limits, since _everything_ is done through DOM Elements and CSS. Every \"world object\" in the game is made from a set of Svelte components: `Door.svelte`, `Elevator.svelte`, `Pushwall.svelte`, `Wall.svelte`, `MapObject.svelte`. These components will manage their state through their props, functions exported from the component instance, or through the `item` object that gets passed to them. Any state changes that will change the map in some way (picking up an item, opening a pushwall or door, etc.) will 'bubble' the change up to the top level `CurrentLevel` store, so that the change can be reflected accordingly from the POV of the level.\n\nThe core of the game is of course the game loop, which is found in `src/lib/utils/raf.ts`. Using a single loop globally is the optimum way of doing a `requestAnimationFrame` game loop, since only one frame is requested per render.\n\nThe bulk of the code is dedicated to managing game objects, calculations (such as distance, position, converting 'real' positions to 'local' positions), and asset management.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnuffydev%2Fwolfensvelte-3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnuffydev%2Fwolfensvelte-3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnuffydev%2Fwolfensvelte-3d/lists"}