Source: https://github.com/jakesgordon/javascript-racer Original host: https://jakesgordon.com/games/racer/ Editorial image: https://jakesgordon.com/writing/javascript-racer/racer.png Credit: jakesgordon and project contributors. Checked: 2026-10-27. This site links to the original game; no game code or audio is republished. Artwork may have terms separate from code. Repository license notice: Copyright (c) 2012, 2013, 2014, 2015, 2016 Jake Gordon and contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. =============================================================================== README / artwork and usage context: Javascript Pseudo 3D Racer ========================== An Outrun-style pseudo-3d racing game in HTML5 and Javascript * [play the game](https://jakesgordon.com/games/racer/) * view the [source](https://github.com/jakesgordon/javascript-racer) * read about [how it works](https://jakesgordon.com/writing/javascript-racer/) Incrementally built up in 4 parts: * play the [straight road demo](https://jakesgordon.com/games/racer/v1-straight/) * play the [curves demo](https://jakesgordon.com/games/racer/v2-curves/) * play the [hills demo](https://jakesgordon.com/games/racer/v3-hills/) * play the [final version](https://jakesgordon.com/games/racer/) With detailed descriptions of how each part works: * read more about [v1 - straight roads](https://jakesgordon.com/writing/javascript-racer-v1-straight/) * read more about [v2 - curves](https://jakesgordon.com/writing/javascript-racer-v2-curves/) * read more about [v3 - hills](https://jakesgordon.com/writing/javascript-racer-v3-hills/) * read more about v4 - final (coming soon) A note on performance ===================== The performance of this game is **very** machine/browser dependent. It works quite well in modern browsers, especially those with GPU canvas acceleration, but a bad graphics driver can kill it stone dead. So your mileage may vary. There are controls provided to change the rendering resolution and the draw distance to scale to fit your machine. Currently supported browsers include: * Firefox (v12+) works great, 60fps at high res - Nice! * Chrome (v19+) works great, 60fps at high res... provided you dont have a bad GPU driver * IE9 - ok, 30fps at medium res... not great, but at least it works The current state of mobile browser performance is pretty dismal. Dont expect this to be playable on any mobile device. >> _NOTE: I havent actually spent anytime optimizing for performance yet. So it might be possible to make it play well on older browsers, but that's not really what this project is about._ A note on code structure ======================== This project happens to be implemented in javascript (because its easy for prototyping) but is not intended to demonstrate javascript techniques or best practices. In fact, in order to keep it simple to understand it embeds the javascript for each example directly in the HTML page (horror!) and, even worse, uses global variables and functions (OMG!). If I was building a real game I would have much more structure and organization to the code, but since its just a racing game tech demo, I have elected to [KISS](http://en.wikipedia.org/wiki/KISS_principle). FUTURE ====== It's quite astounding what it takes to actually [finish](https://jakesgordon.com/writing/defining-finished/) a game, even a simple one. And this is not a project that I plan on polishing into a finished state. It should really be considered just how to get started with a pseudo-3d racing game. If we were to try to turn it into a real game we would have to consider: * car sound fx * better synchronized music * full screen mode * HUD fx (flash on fastest lap, confetti, color coded speedometer, etc) * more accurate sprite collision * better car AI (steering, braking etc) * an actual crash when colliding at high speed * more bounce when car is off road * screen shake when off-road or collision * throw up dirt particles when off road * more dynamic camera (lower at faster speed, swoop over hills etc) * automatic resolution & drawDistance detection * projection based curves ? x,y rotation * sub-pixel aliasing artifacts on curves * smarter fog to cover sprites (blue against sky, cover sprites) * multiple stages, different maps * a lap map, with current position indicator * road splits and joins * day/night cycle * weather effects * tunnels, bridges, clouds, walls, buildings * city, desert, ocean * add city of seattle and space needle to background * 'bad guys' - add some competetor drivers to race against as well as the 'traffic' * different game modes - fastest lap, 1-on-1 racing, collect coins ? shoot bad guys ? * a whole lot of gameplay tuning * ... * ... Related Links ============= * [Lou's Pseudo-3d Page](http://www.extentofthejam.com/pseudo/) - high level how-to guide * [Racer 10k](https://github.com/onaluf/RacerJS) - another javascript racing game License ======= [MIT](http://en.wikipedia.org/wiki/MIT_License) license. >> NOTE: the music tracks included in this project are royalty free resources paid for and licensed from [Lucky Lion Studios](http://luckylionstudios.com/). They are licensed ONLY for use in this project and should not be reproduced. >> NOTE: the sprite graphics are placeholder graphics [borrowed](http://pixel.garoux.net/game/44) from the old genesis version of outrun and used here as teaching examples. If there are any pixel artists out there who want to provide original art to turn this into a real game please get in touch!