🏎 Open source racing game developed by everyone willing

Overview

🏎️ @pmndrs/racing-game

img

Live demo (current state): https://racing.pmnd.rs/

This project is a showcase for the feasibility of React in gaming. Every thing is a self contained component using react-three-fiber to express threejs with React semantics. If that seems strange to you read this explanation.

This project is 100% open source and community built, CC0 assets only, everyone is invited to participate. If you have a PR merged you are added to the triage team. Refer to CONTRIBUTING.md for more information.

/assets   - the blend files
/utils    - game state store, helpers
/models   - gltfjsx models, players, characters
/effects  - dust, trails, skids, shaders
/ui       - intros, heads up displays, leaderboards

There is a dedicated discord channel for this project here: https://discord.gg/dQW7fDmaAG

Comments
  • Feat/minimap

    Feat/minimap

    First proposal for a mini map.

    Screenshot_20210602_225204

    It will need more work because for now there is a bit of a visibility issue. So we can consider this like a starting point for this feature?

    opened by ekaradon 19
  • cant handle low fps well

    cant handle low fps well

    I have reported it on twitterfew days ago but I think you missed it, so here goes:

    my guess is you try and fail to handle long frame times? dt = min(dt, 50ms) might fix it

    opened by makc 15
  • Regression

    Regression

    Since commit: https://github.com/pmndrs/racing-game/commit/b604d2b1fb740a27aa457b87071294d628a264c1

    I've been experince(firefox-only) a regression whereby the camera is heavily shaking.

    Please ignore the happering/stuttering, this is due to Nvidia, ~~fuck you~~ propriety drivers on Linux with Firefox. https://user-images.githubusercontent.com/25481501/121050841-72d61d00-c7a8-11eb-8fef-8dd672a362a0.mp4

    opened by Gusted 14
  • Convert Boost to tsx

    Convert Boost to tsx

    There are 4 typescript errors that I don't know how to deal with:

    src/effects/Boost.tsx:27:9 - error TS2531: Object is possibly 'null'.
    
    27         ref.current.setMatrixAt(i + j, o.matrixWorld)
               ~~~~~~~~~~~
    
    src/effects/Boost.tsx:28:9 - error TS2531: Object is possibly 'null'.
    
    28         ref.current.instanceMatrix.needsUpdate = true
               ~~~~~~~~~~~
    
    src/effects/Boost.tsx:34:37 - error TS2322: Type 'null' is not assignable to type 'BufferGeometry'.
    
    34     <instancedMesh ref={ref} args={[null, null, length]}>
                                           ~~~~
    
    src/effects/Boost.tsx:34:43 - error TS2322: Type 'null' is not assignable to type 'Material | Material[]'.
    
    34     <instancedMesh ref={ref} args={[null, null, length]}>
                                                 ~~~~
    

    I figure I should ask for help first before I try more files.

    opened by bjornstar 9
  • Add leaderboards

    Add leaderboards

    • Checks if you already set a name, if not asks you a name and saves it in localstorage
    • Adds you to the leaderboard
    • Shows the number you are

    Issues:

    • Restart does not work idk why
    opened by SaraVieira 9
  • Cleanup Leaderboard

    Cleanup Leaderboard

    • [Store] Created a reset method that handles everything needed to reset the game
    • [Store] reset is no longer a property on control
    • [utils] Moved everything from utils into a single data file.
    • [data] Added a default config that can be overridden by environment variables
    • [data] Don't create a new client on every request
    • [data] Changed method names to reflect the name of the database: scores
    • [Finished] Tweaked wording: "You belong on our leaderboard!"
    • [Leaderboard] Fixed bug where clicking on the button would delete the game state
    • [Leaderboard] Fetch scores when opening the leaderboard and no more than once every 3 seconds
    • [Vehicle] renamed ctrl to controls
    • [Vehicle] imported only the used methods from three
    • [Vehicle] use maxSpeed instead of vehicleConfig.maxSpeed
    • [Store] Moved angularVelocity, position, & rotation back to the store
    • [Store] Don't export wheelInfos

    Some issues with the Finished component:

    1. Setting your name should also submit your score (you have to click add me twice to get your score submitted now)
    2. There's no error handling for the data requests
    3. There's no progress indicator for the data requests (if they take too long, people will resubmit and we'll get duplicates)
    4. The time seems to continue after you've finished
    opened by bjornstar 8
  • Minimap using double render

    Minimap using double render

    As having some more iteration about the performance and rendering of this game to be optimal I came along the Mini map which got quite heavy when enabled and showed this strange double webGL render looking into the code https://github.com/pmndrs/racing-game/blob/7aa38d4f14620a6b35131b94b65c232140a84d63/src/ui/Minimap.js#L69-L77

    I see that gl.render is being executed twice on different scene. Whereby 1 on the main scene which explains why it's being heavy and the other one which seems more reasonable for me the rendering of the mini map.

    Removing line 69 solves the performance issue but created this strange border image

    This is where my lack of understanding with Three.js comes in as I don't see anything that is affecting to create this border. Otherwise it could just be called "A feature" :)

    EDIT: It's most likely this border is "unrendered" portion of the virtualScene.

    opened by Gusted 8
  • File structure

    File structure

    Now everyone has their own taste about how to structure files, however at this moment I see 2 problems.

    • First letter capitalized or not? I see certain files not being capitalized at this moment should they be capitalized or should the others files not being capitalized as first letter?
    • File suffix, we are working here with JSX syntax however are naming the files as .js files, I think they should be renamed to the correct file extension -> .jsx
    opened by Gusted 7
  • Change editor shortcut

    Change editor shortcut

    e is too close to WASD - it's easy to fat-finger into the editor. Especially frustrating if you are about to beat the leaderboards :) Changed to backtick ( ` ) but open to other suggestions.

    opened by wuharvey 6
  • Authentication

    Authentication

    Added oAuth authentication with github & google

    @SaraVieira You will need to turn on google as a provider & restrict the scores routes to authenticated only

    opened by njm222 5
  • [UI] Use requestAnimationFrame to update

    [UI] Use requestAnimationFrame to update

    • Use requestAnimationFrame to help batch our updates to the UI
    • Avoid updating the DOM unless there are changes
    • The finish line no longer continuously updates your score after you've crossed it
    opened by bjornstar 4
  • BUG: Engine Sound goes garbaled when returning from editor

    BUG: Engine Sound goes garbaled when returning from editor

    *** Sound garbles when switching from the editor back to the car the engine sound goes staticy/garbled

    To Reproduce

    1. Get to the car (so car engine sound is loaded)
    2. Press . to open the editor
    3. Press . to close the editor

    Sound will be garbled.

    Expected behavior Engine sound to restore

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: Mac 11.6 (Big Sur)
    • BrowserChrome
    • Version 97.046X
    bug good first issue 
    opened by DennisSmolek 0
  • Unexpected behavior

    Unexpected behavior

    Describe the bug The car just crashes into the hills and go inside?

    To Reproduce Steps to reproduce the behavior:

    1. Open the page
    2. Start the race?
    3. crash into the hill, sometimes it does happen, but sometimes not.

    Expected behavior

    It should not go inside?

    Videos

    https://user-images.githubusercontent.com/71921036/134024193-6273337b-e063-4c99-b6ea-10db5f0b3d93.mp4

    https://user-images.githubusercontent.com/71921036/134026010-c60c6c4e-1e29-4903-b86b-ded0fd0b5d9d.mp4

    Desktop (please complete the following information):

    • OS: Windows 10 [email protected]
    • Browser Brave
    • Version 1.29.81 Chromium: 93.0.4577.82 (Official Build) (64-bit)
    opened by GmBodhi 0
  • User editable keys

    User editable keys

    Instead of adding different keys it would be better if they were user editable and we just save the state in localStorage or supabase. This will solve all other keyboard layouts as well.

    Originally posted by @njm222 in https://github.com/pmndrs/racing-game/issues/165#issuecomment-873335801

    enhancement help wanted 
    opened by bjornstar 1
  • Replay

    Replay

    Now that there's a leaderboard, would be awesome to also upload a replay file so we can see how they got that record. Replay should have both the inputs and the car position. Then we can replay the engine on-top of the inputs and see that it actually matches to verify.

    enhancement help wanted 
    opened by vjeux 17
  • Heightmap collision effect is not accurate

    Heightmap collision effect is not accurate

    Describe the bug When you drive of the supposed road, you will be either have a slight bump and seems realistic or you car will be going instead of down on the lower height of the road it will go upwards and roll your vehicle over.

    To Reproduce Steps to reproduce the behavior:

    1. ~~try speedrun strategy~~
    2. Ride the vechile
    3. Go with some speed off the road.

    Expected behavior The car shouldn't roll over but instead go onto the lower side of the road.

    Screenshots See the last 2 attempts to reproduce this problem:

    https://user-images.githubusercontent.com/25481501/121784041-24a68c80-cba1-11eb-8bbb-43cfb52e2644.mp4

    Desktop (please complete the following information):

    • OS: Linux
    • Browser Chrome
    • Version 90
    opened by Gusted 8
Owner
Poimandres
Open source developer collective
Poimandres
A game of Candy Crush in React where you can save game state

Candy Crush In React This project is in support of the video tutorials found here for Part 1 and Part 2 coming soon. In Part 1 we creact the ReactJS g

Ania Kubow 20 Oct 31, 2022
Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards

Reactivated.app is an open-source app that scans your JS dependencies every 4 hours and generates cool dashboards

Premier Octet 66 Jul 20, 2022
Open source authentication and authorization service, container-native, PassportJS-native, built with React and Node.

id6 Authentication and authorization as a service Docs - Twitter Why id6 ? I wrote id6 out of frustration of re-writing authentication and authorizati

id6 12 Oct 31, 2021
Open-source productivity booster with a brain

Cerebro Usage You can download the latest version on releases page. After installation use default shortcut ctrl+space to show an app window. You can

Cerebro 7.6k Dec 6, 2022
This is the Open Source Design System from Meiuca

This is the Open Source Design System from Meiuca

Meiuca 37 Nov 27, 2022
Alt + Click on rendered JSX to open it's source code in VSCode

Alt + Click on rendered JSX to open it's source code in VSCode

Siddharth Kshetrapal 178 Dec 6, 2022
Here is the place try to learn to call API using React.js with anything your code style and contribute to open-source. Part of Hacktoberfest

Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage About The Project To welcome hacktoberfest we provide

Abdul Hakim 13 Oct 30, 2022
Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)

Pimp my README This repository is the open-source project for Pimp my README. How this came to be So basically, GitHub added a feature where you can a

Joshua D'Souza 106 Sep 23, 2022
The Open Source A/B Testing Platform

The Open Source A/B Testing Platform Get up and running in 1 minute with: git clone https://github.com/growthbook/growthbook.git cd growthbook docker-

Growth Book 3.9k Dec 4, 2022
Open Source Module to Upload your Media and files into AWS S3 Bucket directly from Front-end React

react-aws-s3 Open Source Module to Upload your Media and files into AWS S3 Bucket directly from Front-end React. Help the Module developer (Amit Mishr

Amit Mishra 48 Nov 3, 2022
JWT generator - An open-source JSON Web Token (JWT) generator created by enabler

JWT generator An open-source JSON Web Token (JWT) generator created by enabler View Demo · Report Bug JWT generator allows you to generate JWT in an e

Enabler AS 3 May 31, 2022
Repository responsible for all code developed during the JavaScript Beginners Series

Série de Vídeos para Iniciantes em JavaScript Uma série de vídeos ensinando conc

Glaucia Lemos 621 Nov 29, 2022
Moviesflix - a Single Page Application(SPA) that was developed with ReactJS

This project is a Single Page Application(SPA) that was developed with ReactJS.

Bruno Soares 3 Jun 29, 2022
Heads or Tails game built with React

Heads or Tails game built with React

Efecan Pınar 7 Sep 4, 2022
Tetromino - A tetris-style game created with React, Redux and TailwindCSS.

Tetromino - A tetris-style game created with React, Redux and TailwindCSS.

Reactgular 153 Nov 13, 2022
A small 3D game built with react-three-fiber

Avoid the cubes while the speed progressively increases! Can you beat the rainbow level? The game is inspired by an old flash game I used to play in t

Adam Karlsten 193 Dec 7, 2022
Reactjs Speed typing game

Reactjs Speed typing game

Didier 3 Mar 22, 2022
Memory, the Card Game.

Memory, the Card Game Concentration, also known as Match Match, Match Up, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game i

MikevPeeren 1 Nov 4, 2021
A game with two independent units – the players – communicating with each other using an API

gameofthree Demo Click Here to access the demo. Description The goal of this project is to implement a game with two independent units – the players –

Musah Kusi Hussein 1 Oct 28, 2021