gavd.co.uk

Frail and faltering follower of Jesus

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 game.

Update 4:

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:

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:

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:

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 :-)

/articles/Canvas-HTML-JS-Driving-game-dev-vlog-FPS-scaling-lighting-speedometer/img/full.jpg