gavd.co.uk

Frail and faltering follower of Jesus

Sports Mode! Canvas HTML JS Driving game (with video)

By Gavin Davies

Inspired by Outrun and ChaseHQ, this dev vlog follows my progress in making a JavaScript/Canvas sprite racer. Last updated: 26th June 2024

Update 10: Many improvements

Latest demo features:

  1. Sunset beach
    1. tide
  2. Snowy
  3. Mountain background
  4. Lots of optimisations
  5. Shorter segments with z index less than screen depth a. Supports chicanes, s bends etc
  6. Verticality a. Valleys and antivalleys b. Road surface texture c. Tabletops
  7. Touch screen support
  8. 16:9 aspect ratio with letter/pillar boxing
  9. Fixed headlights when not in centre of road
  10. Implemented a coherent-ish racetrack (some of the transitions are a bit sudden tho)

Update 9: Central reservations

This Canvas/Javascript sprite racing game now has:

This new version features:

  1. Central reservations/lane splitting
  2. DSL (Domain Specific Language) enabling me to rapidly write “levels” for it
  3. Tunnels
  4. Car “bob” on rough surfaces
  5. Fix to “lane wiggle” for AI cars
  6. Oncoming bend signs
  7. Fix to the infilling algorithm that rendered the curves (was leaving gaps in the oncoming segment)
  8. Handling improvements
  9. Crashing the car doesn’t ping-pong it so much as the amount of steering reversal backs off each time (you could get in a situation where you bounced between two obstacles near-indefinitely!)

It actually feels like a game now! Of course, it still has a bunch of test assets in it, I’ll need real assets for any kind of release.

I’m also busy working on new Reckoned As Dead music; I have a track and a half almost ready to go.

I see that this video has been visited by the dreaded goblin of INSERT TEXT HERE . Thanks iMovie. Be assured that I entered this text and the software promptly forgot it and I didn’t notice!

Update 8: Traffic AI - 26th June 2024

I’ve devised a simple algorithm by which “traffic” in the game world can avoid obstacles and overtake slower vehicles. If there’s no free lane to go into, it will slow down to the pace of the traffic in the fastest available lane.

I still need to program the “rival” cars (those that are in the race, as opposed to traffic) to avoid the traffic and I want the rivals to be aggressive enough to swerve into oncoming traffic where possible.

It’s a simple algo but it’s working pretty nicely! Outrun used to immediately despawn any cars that you overtook, but in Sports Mode! these cars remain in the game world until they’re at least the horizon’s distance away from the player.

I have a TODO list as long as my arm, but I’m pleased with how this demo is shaping up!

Here’s the algo:

Update 7: Sports Mode! - June 20th 2024

The working title is now “Sports Mode!”

New features include:

  • firing bullets
  • better fog
  • improved “physics”
  • race position indicator
  • hit boxes for offroad objects
  • rumble
  • analog controls
  • other cars speed scaled to road characteristics
  • cones that go BONK

Update 6: we like to curve - 15th June 2024

New features include:

  • Curvey roads based on the actual Z-index rather than a fudgey algo
  • One-off roadside sprites, e.g. roadside signs, lions
  • Road width transitions (chicanes)
  • Lots more scenery
  • Desert, farmland, city and country areas

The sprites are mostly temporary images I’ve just copped from an image search, I won’t release the game with those in, should it ever reach RC1 status.

This sprite racer is fully Javascript; CLOC reports 1658 lines of Javascript in the engine. There’s also a data folder that contains the level data. No frameworks, no libraries, no nuffink, just a man banging code into the browser. I think I took about 12 lines of code for the depth scaling from ChatGPT when my maths failed me; the rest is all my nonsense.

I would like to do an optimisation pass soon to improve caching. Although arguably the compiler will do a better job of it than me anyway! I’m not a JS performance expert. My intel mac gives 40-50fps and I can’t get my M3 max to step below 60fps. My Xbox One gives a begrudging 15-20 on the old version, not tried it in a while. My Cat smartphone gives me about 30fps I think.

I also want to make it more of a game - objectives, music, challenge, surprises…

Update 5: spritey nicey, weather, better transitions, tyre squeals, loop - June 13th 2024

New gubbins in this iteration:

  • Improved transitions between track areas
  • Fog weather effects back in the engine
  • Sprite based backgrounds
  • Tyre squeal SFX
  • Track actually loops properly
  • Checker grid start/finish line

I’ve been cranking out a lot of tunes lately (for the joy of it, I don’t fancy myself anything beyond a hacker in the sense of an enthusiastic amateur!) but I’m still noodling this driving game along. Top boy and known pork scrathcing fanatic @jonathankreynolds has volunteered to produce some sprites on his fancy cake stand (I may have misinterpreted his message) so there’s a solid chance this game will actually have some genuine creative weight at some point ‘cos he’s a proper clever boy and that.

Got a TODO list as long as my arm holding a jaffa cake, but I reckon future versions will start to feel like an actual game with objectives, hazards, and dopamine hacking.

No microtransactions tough. And no 15 options before the game starts. Arcadey is the way. Dey.

Warning, I’ve got another 4 track coming in the post. Might do a hip hop album… Or maybe rotterdam gabber… Dark Souls Dungeon Synth album? Who knows? You can create whatever you want when you’re a human!

Update 4: 24th May 2024

With a little help from ChatGPT, I’ve figured out a decent distance algorithm to derive Z for each Y scanline. It feels a lot better in motion now.

I’ve also added a checker grid at the start which isn’t great yet but I’m working on it!

Audio seems to be left channel only, sorry about that. Didn’t seem worth editing ‘cos it’s just a shot from the hip!

Update 3: 6th Mayt 2024

I’ve been tinkering with my pseudo-3d driving game engine. It’s now got slightly better scaling that’s based on a “camera” being at a particular height and having a particular vanishing point.

That’s thrown a bunch of the rendering code out slightly and all the speed calculations need re-doing based on the new depth algo, but it’s moving in the right direction now!

I’ve also added other “cars”. They don’t go round corners yet and they flicker like Pacman on the 2600 because they don’t always find a correct Y plane to sit on based on the calculation of their Z index respective to the camera, but they exist in the game world and can change speed.

This “game” is still a super rough demo at the moment but if I bang enough Synthwave tropes into it and maybe some hamsters it could be fun!

Update 2: 13th April 2024

The graphics are all now scaled relatively so I can change the viewport size and everything still looks as it should.

It has a speedo as well!

Behind the scenes, I’ve added unit tests via Jasmine and linting with ESLint and CSS lint.

There’s still a lot to do but the feel of the driving is improving gradually.

Update 1: 4th April 2024

This is a very early demo of a little racing game I have cobbled together over the last couple of weeks.

It’s not got any 3rd party code at all - I’ve written the engine in pure JavaScript using Canvas. It runs like silk on my Mac and iPad, although not so great on my XBox One or CAT phone!

There’s an awful lot still to do. The 3d perspective’s not as good as I want it to be yet, and there’s not much actual “game” in there yet, but the player can tazz around a “track” that has day/night cycles, moving clouds, parallax backgrounds, and collisions with barriers. It has tunnels and objects in the background.

I always loved ChaseHQ and Outrun, and I couldn’t get it out of my head “I reckon I could do that now”. I’m not the best at maths so the 3d is very pseudo indeed, but as I’m tuning it it’s getting better and better :-)

It supports Xbox gamepad and touchscreen as well as keyboard.

I have no particular release date in mind, it’s just a bit of fun :-)