๐ŸŽ Open source racing game developed by everyone willing

Related tags

Web Game racing-game
Overview

img

live demo (current state): https://encouraging-ducks.surge.sh

this project is a showcase for the feasibility of react in gaming. we would like to develop it open source, everyone can participate. if you have a pr merged you gain access as a co-contributor/maintainer. :-)

/utils    - the app store, helpers
/models   - gltfjsx models, players, characters
/effects  - dust, trails, skids, shaders
/ui       - intros, head up displays, leaderboards

there is a dedicated discord channel for this project here: https://discord.gg/poimandres

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 H21@latest
    • 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
Aprilbeat is an new open-source, online, fully web-based rhythm game

Aprilbeat! open-source web-based online rhythm game Aprilbeat is an new open-source, online, fully web-based rhythm game. It plays songs in APB format

Bone April Tea 4 Oct 17, 2022
Eva.js is a front-end game engine specifically for creating interactive game projects.

High-performance: Eva.js is powered by efficient runtime and rendering pipeline (Pixi.JS) which makes it possible to unleash the full potential of your device.

EVA 1.6k Dec 27, 2022
Latin Wordle is a free and open-source project that aims to provide a fun and interactive way to learn Latin.

Latin Wordle Live Game Here Inspiration Latin Wordle is a free and open-source project that aims to provide a fun and interactive way to learn Latin.

null 15 Dec 16, 2022
A lightweight 3D game engine for the web.

A lightweight 3D game engine for the web. Built with three.js and cannon-es.

null 667 Dec 31, 2022
LittleJS Logo LittleJS - The Tiny JavaScript Game Engine That Can

The Tiny JavaScript Game Engine That Can! ??

Frank Force 2.4k Dec 31, 2022
Golf it! is a game designed to let you show off your code-fu by solving problems

Golf it! Golf it! is a game designed to let you show off your code-fu by solving problems in the least number of characters โœจ Explore the docs ยป View

Ashikka Gupta 5 Aug 18, 2022
Excalibur.js 1.3k Dec 30, 2022
Pig is a simple two player dice game.

Pig game Pig is a simple two player dice game. Play here: formidablae.github.io/pig_game or formaidablae-pig-game.netlify.app Each turn, a player repe

null 10 Oct 5, 2022
Quizpetitive - A quiz game to learn new knowledge and terms in the field of project management.

Quizpetitive A quiz game to learn new knowledge and terms in the field of project management. The key element to the success of this project was the c

LMF 1 May 16, 2022
Bitburner Game

Bitburner Bitburner is a programming-based incremental game that revolves around hacking and cyberpunk themes. The game can be played at https://danie

null 2.6k Dec 30, 2022
A clone of the popular Wordle game.

Wordle Clone How to play locally: yarn install

null 2 Jan 9, 2022
A clone of the popular game Wordle made using React, Typescript, and Tailwind

Wordle Clone Go play the real Wordle here Read the story behind it here Try a demo of this clone project here Inspiration: This game is an open source

Hannah Park 2.4k Jan 8, 2023
๐ŸŽฉ 2048 game is cloned with ReactJS, CSS3.

2048-react This is a clone of 2048 implemented using React. It's running live here. The game logic is implemented in ./src/components/mainBoard.jsx. I

Arham 7 Jul 31, 2022
A tiny game to practice AoE building shortcuts.

Aegis A tiny game to practice Age of Empires IV building shortcuts. Using โš›๏ธ Create-React-App and ?? Zustand. License With the exception of all visual

Alexander Widua 30 Jan 1, 2023
Provides 5 keywords with which to narrow down your wordle game. I ruin nice things.

Widdle?? I hate fun so I wrote a script that ruins Wordle. This script can be used to find a Widdle, a set of five words that cover nearly all letters

Tess Myers 3 Mar 12, 2022
WORDLEBOARD prototype: Show your Wordle game on a Vestaboard as you play.

WORDLEBOARD prototype Show your Wordle game on a Vestaboard as you play. Copyright (c) 2022, Scott Schiller. MIT license. Made with love and fun in mi

Scott Schiller 7 Dec 20, 2022
Snake game using pure HTML, CSS and JavaScript with GameBoy look and feel using Nano editor

Snake game using pure HTML, CSS and JavaScript with GameBoy look and feel using Nano editor. 100% commented code in Portuguese

Gabriel Martins 2 Jul 2, 2022
EarthDefender is a simple personal project JS game

EarthDefender is a simple personal project JS game, the goal of it is to stop the meteors from hitting Earth.

Svetoslav Zhekov 2 Jan 25, 2022
A Wordle-like game where you have to guess the unsigned 8-bit binary number

Bytle A Wordle-like game where you have to guess the unsigned 8-bit binary number! Game coded in 2h 14m 50.570s, but it's not like I'm counting how lo

James Livesey 16 Jun 30, 2022