{"id":45924781,"url":"https://github.com/kingdcreations/react-raycaster","last_synced_at":"2026-02-28T09:01:42.915Z","repository":{"id":225837039,"uuid":"766950659","full_name":"kingdcreations/react-raycaster","owner":"kingdcreations","description":"A raycasting engine as a React component ","archived":false,"fork":false,"pushed_at":"2024-06-03T05:54:07.000Z","size":2139,"stargazers_count":3,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-29T03:23:05.381Z","etag":null,"topics":["game","raycaster","raycaster-engine","raycasting","react"],"latest_commit_sha":null,"homepage":"https://thais-marcon.com/raycasting/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kingdcreations.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-04T12:41:41.000Z","updated_at":"2025-04-10T16:12:32.000Z","dependencies_parsed_at":"2024-10-09T14:16:08.751Z","dependency_job_id":"645893a8-daa6-4b40-9403-aa3686b86c9d","html_url":"https://github.com/kingdcreations/react-raycaster","commit_stats":null,"previous_names":["kingdcreations/react-raycaster"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/kingdcreations/react-raycaster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingdcreations%2Freact-raycaster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingdcreations%2Freact-raycaster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingdcreations%2Freact-raycaster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingdcreations%2Freact-raycaster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kingdcreations","download_url":"https://codeload.github.com/kingdcreations/react-raycaster/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingdcreations%2Freact-raycaster/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29929115,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"online","status_checked_at":"2026-02-28T02:00:07.010Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["game","raycaster","raycaster-engine","raycasting","react"],"created_at":"2026-02-28T09:01:42.205Z","updated_at":"2026-02-28T09:01:42.899Z","avatar_url":"https://github.com/kingdcreations.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![banner](https://github.com/kingdcreations/react-raycaster/blob/main/docs/thumbnail.png?raw=true)](https://thais-marcon.com/raycasting)\n\n# React Raycaster (react-raycaster)\n[![NPM Version](https://img.shields.io/npm/v/react-raycaster)](https://www.npmjs.com/package/react-raycaster)\n\nA fully customizable raycaster game engine as a React component.\n\nCheck out a cool example [here](https://thais-marcon.com/raycasting).\n\n## Installation\n\n```shell\nnpm install react-raycaster\n```\n\nor\n\n```shell\nyarn add react-raycaster\n```\n\n## How to use\n\n```jsx\nimport Raycaster from \"react-raycaster\";\n\n// ...\n\nconst map = [\n  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],\n  [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],\n  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n  [1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n  [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n  [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n  [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n  [1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],\n  [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],\n  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]\n];\n\nconst tiles = {\n  1: {\n    type: \"wall\",\n    src: \"https://raw.githubusercontent.com/kingdcreations/react-raycaster/main/example/src/assets/tex/oak_planks.png\",\n    collision: true,\n  },\n  2: {\n    type: \"sprite\",\n    src: \"https://raw.githubusercontent.com/kingdcreations/react-raycaster/main/example/src/assets/tex/barrel.png\",\n    collision: true,\n  },\n  3: {\n    type: \"door\",\n    src: \"https://raw.githubusercontent.com/kingdcreations/react-raycaster/main/example/src/assets/tex/wood.png\",\n    collision: true,\n  },\n}\n\n\u003cRaycaster\n  map={map}\n  tiles={tiles}\n  player={{\n    x: 5,\n    y: 17,\n    rotation: -90\n  }}\n/\u003e\n```\n\n### Using the game context\n\n```jsx\nimport Raycaster from \"react-raycaster\";\nimport { Joystick } from 'react-joystick-component';\n\n// ...\n\n\u003cRaycaster\n  map={map}\n  tiles={tiles}\n  player={player}\n\u003e\n  {g =\u003e\n    \u003c\u003e\n      \u003cJoystick\n        move={(e) =\u003e e.x \u0026\u0026 e.y \u0026\u0026 g.joystickMove(e.x, e.y)}\n        stop={() =\u003e g.joystickMove(0, 0)} /\u003e\n\n      \u003cJoystick\n        move={(e) =\u003e {e.x \u0026\u0026 e.y \u0026\u0026 g.joystickCamera(e.x)}}\n        stop={() =\u003e g.joystickCamera(0)} /\u003e\n    \u003c/\u003e\n  }\n\u003c/Raycaster\u003e\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `map`| `number[][]` | **required** | 2D map array containing tiles |\n| `tiles`| `Tiles` | **required** | Map tiles definition (See below) |\n| `player`| `Player` | **required** | Player initial values |\n| `mouse`| `boolean` | `false` | Allows mouse camera rotation |\n| `inputs` | `Inputs` | (See below) | Sets the rotation speed |\n| `width` | `number` | `500` | Game x resolution in pixels |\n| `height` | `number` | `300` | Game y resulition in pixels |\n| `shading` | `boolean` | `true` | Allows depth shading |\n| `bobbing` | `boolean` | `true` | Enables run animation |\n| `showFPS` | `boolean` | `false` | Displays frames per second |\n| `skybox` | `string` | `none` | Source from the skybox to display |\n| `floor` | `string` | `none` | Source from the floor to display |\n| `ceiling` | `string` | `none` | Source from the ceiling to display |\n| `speed` | `number` | `20` | Sets movement speed |\n| `rotSpeed` | `number` | `3` | Sets the rotation speed |\n\n## Game context\n\n| Method | Description |\n|---|---|\n| `joystickMove(x: number, y: number)` | Changes player x and y position on the map |\n| `joystickCamera(x: number)` | Rotates camera / player view |\n\n## Types\n\n### Tiles\n\n| Name | Type | Default | Description | \n|---|---|---|---|\n| `[number]`| `Tile` | **required** | The tile identified by a number |\n\n### Tile\n\n| Name | Type | Default | Description |\n|---|---|---|---|\n| `type`| `\"wall\" \\| \"sprite\" \\| \"door\" ` | **required** | Type of the tile |\n| `src`| `string` | **required** | Source image of the tile |\n| `collision`| `boolean` | `false` | Player collision against the tile |\n\n### Player\n\n| Name | Type | Default | Description |\n|---|---|---|---|\n| `x`| `number` | **required** | Player x value on map |\n| `y`| `number` | **required** | Player y value on map |\n| `rotation`| `number` | `0` | Player rotation in degree |\n\n### Inputs\n\n| Name | Type | Default | Description |\n|---|---|---|---|\n| `north`| `string` | `\"ArrowUp\"` | Key code for north mouvement |\n| `east`| `string` | `\"ArrowRight\"` | Key code for east mouvement |\n| `south`| `string` | `\"ArrowDown\"` | Key code for south mouvement |\n| `west`| `string` | `\"ArrowLeft\"` | Key code for west mouvement |\n| `cameraL`| `string` | `undefined` | Key code for left camera rotation |\n| `cameraR`| `string` | `undefined` | Key code for right camera rotation |\n| `action`| `string` | `\"Space\"` | Key code for action triggering |\n\n## TODO\n\n- Add sounds\n- Add more tile types\n- Add moving sprites\n- Add different walls height\n\n## About\n\nI discovered raycasting as a project from 42 in C, this project is inspired by the world-famous Wolfenstein3D game, which was the first FPS ever.\n\nHere is some useful links:\n\n- http://wolf3d.atw.hu/ (Original Wolfenstein 3D online)\n- https://lodev.org/cgtutor/raycasting.html (The main tutorial and code inspiration)\n- https://thais-marcon.com/raycasting/ (An example of this component in use online)\n- https://github.com/kingdcreations/cub3d (My 42 project in C)\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingdcreations%2Freact-raycaster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkingdcreations%2Freact-raycaster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingdcreations%2Freact-raycaster/lists"}