Redline

Fixed the scaling mechanism for the NPC cars so the speed is now relative to the player speed and the zoom level. Before the cars would zoom past at higher zoom and crawl at lower zoom now it is consistent across all zoom levels.
Added individual car speeds to each NPC car so the traffic feels more alive. Same direction cars overtake the player and opposite direction cars come at a reasonable speed.
Fixed the lane centering for NPC cars. Lane 1 was off center due to the dirt shoulder being counted as road. Added a road offset ratio to trim the dirt and center the cars within the actual tarmac.
Added gradual traffic increase so the game starts calm and gets busier every 20 seconds down to a minimum spawn delay of 0.8 seconds.
Added spawn collision prevention so NPC cars dont stack on top of each other on spawn using a buffer check before pushing to the array.
Fixed the collision system which was going completely rogue. The SAT collision was using wrong angles for obstacles and NPC cars. Obstacles are axis aligned so they get angle 0 and NPC cars use their own facing instead of the player facing.
Fixed rogue hits on the first frame by checking NAN check.
Fixed the offroad damage check to use the player center point instead of edges so grazing the road border doesnt instantly trigger damage.
Fixed the fuel bar scaling so it stays in the correct position across all zoom levels using screen relative positioning instead of magic number ratios that only worked at one scale.
Moved to a uiScale separate from the game scale so the dashboard panel feels right sized without affecting the game world scaling.

This is a long devlog and FT is near maybe a couple more devlogs ahead and i am pretty much done with the FT but not with the game might move this game idea to a game engine to add more mechanism easily. Right now it is very difficult to manage this in the web.

Lets dive deeper into what i have accomplished so far.

1. Made a new Panel for the game buttons to sit on. Like i stole it from itch.io but hey keep it silent okay.
2. So i redrew the buttons using the current style which is kinda basic like x and y goes here and there when drawing. Like how i center the buttons relative to the screen is by counting how many buttons and adding each button dimension along with gap to have a final height divide it and start adding the buttons.
3. Redrew the scene selecting page now it states clearly the idea behind the page and made the image displaying on the cute little frame they have looks cool right i know hahha. Selecting a scene highlights the frame by a yellow stroke/glow.
4. Redrew the car selecting page nothing much changed it follws the basic grid style but computed the grid position now more cleanly than before so less janky code and once again selecting a car highlights around the frame.
5. Added a prefect guide page kinda vibrant right but i looks so cool to look and keep in track. Covers most of the game mechanism not completely tho sadddd.
   6.Added a scaling mechanism. Before i had a scaling mechanism which also scales the assets used but it was not consistent acroos many screens but now i added a cleaner version kinda like integer scaling having a base width and height and drawing init and scale them to fit the screen by having a scale which scales minimum.
6. So far i added the scaling mechanism to the start page and the scenes file like road,details,obstacles and i need to add scaling to other places like npc cars and player dashboard.

So i have around 10hrs left and i am running low on time and it is currently MIDNIGHT so i need to go to sleep and wakeup

Added note and in readme about the scene selection cause it confused a lot of people so when selecting you may get to know how it works and i tried to add a smooth transition from one scene to another but it was not that good so reverted it back.

Totally forgot to add scenes sprites to the game back then you can just pick it up but it will through an error while playing now fixed the problem and good to go. And also when selecting player i was just passing keys as INT correct but i need to send key - 1 so i just thinking why if i select a player another player is chose and i can’t even select the last player as it is out of bound for the array which i am being mapped so all good now you can play it and I need to hear the opinions either positive or negative.

Finally the last step is completed which is adding sound track and back ground music to the game. I hope you love the game if there are suggestion please reach out to me so in can fix/add it to the game. See you in Next game GUYS which might be a 3D GAME.

Added gas station marking so the player can be prepared for the upcoming right turn 60 means it is 6 roads ahead while 30 means 3 road ahead and i have worked on the steering mechanism a lot i admit that i have used claude for it to make the mechanism work as i don’t know how to apply physics in game and in irl too sorry. And there are two things to work on for one is audio system for that i need to get some audio and another one is I need to update the station spawning obstacle to be static 3 length long instead of dynamically adding it cause it will spawn on the same location so why need multiple instance we can just easily change the y-coord to work.

I have added Fuel station refilling mechanism so now player can go through the deviated road to fill up gas , also i have limited the max road it takes to spawn a gas station to 30 so before it was like up to infinite roads and added read me file along with guide in the start page . And when player’s gas runs out then game is instantly over instead of losing a heart. The game will ne finished soon just need to add soundtrack that is it maybe in future i will try to add multiplayer in the game.

Added a game over screen. so when player get hit three time the game overs and it will automatically navigate to main menu for another attempt and when player gets hit there is a cooldown period for 3 sec in this time the player doesn’t lose heart if he hits something and to note the invinsible period is there i added a blink effect for the player.

Have implemented collison detection using SAT test i have no idea what is this i only know AABB collision test as it is easy to understand so as a good boy i just went to AI for help it stated me you have to get Players corners and obstacles corners and just do a bunch of maths with like finding the x and y using cos,sin and angle i don’t know how it works but it works so in future i need to see a video to understand the concept fully and that is it.

Just now finished the scene page in the start page now player can select what scenes they want in game they can select more than one and deselect upto 1 so there will be minimum of 1 scene and maximum of 3 scene. you can click on the scene to select and deselect.

Added a working start page not completely but the car selection works for now you can select which car to ride now in future might only select it if you purchased it from the shop. Need to add multiplayer after finishing the main single player world.
Now want to work with scene selection.

Added a start up page for now you can click it but no outcomes will be there need to work on it like how the ui will be. Added the game thing but you can’t iteract with it need to add player who will ride there until you press start.

Added a couple of obstacles at the turning point of the road so player just can’t go through easily they need to keep an eye on the station for refueling and tomorrow i will add marking so player can know the pump will spawn within few roads so they need to slow down a bit. it is easy to map than what i thought just while drawing check for gas staion road like this road[i+1] === “gasStation” then get the current drawn road for y and change it to your liking.

Added a marking pointing to the gas station on the raod so guys there is sign so look clearly else you lose your pump and die.

Made function to spawn obstacles so there will be obstacle every 2 seconds as the trime passes in game. Some of them are deadly meaning you can lose a life when hitting them and some are not so eyes on the road.

Now when ever you go off the road and stays like for more than 2 sec you will get lose a heart so watch out guys fore thinking you can go infinite distance without losing a life. Now need to add pothhole when driven over it you lose a heart, crack,cone and barricade when hittong those you lose a life.

Added health system but for now it shows how many life you have bigger one is one full heart while smaller one is empty heart.
Now want to think which thing and all deals damage to the player and update accordingly.

Added fuel guage bu adding it so i just made so much thing right now the first one is instead of a scale of 3 for all screen i made to calculate the scale with base of scale of 3 and i will just scale every image right now i only added a perfect calculation for ui need to change it for everything.

Added speed meter in the game so now the game will show how much speed you are going currently max you can go 500.
Next thing to do is to show how much fuel the player currently have and refill when going to the station.

Added a ui panel curently it shows no stats only it will render a cute little guy with animation loop need to add hearts,speed meter,collision and fuel bar. Then need to make a start up page where player can change their car colour and scenery. maybe just maybe i am interested like in the mood i will add a police car who will start to chase you when you gove over the speed limit like 100 or 120 then he will chase you for like some amount of time if he hit you then you lose a life. Still i don’t know how can i acheive it will
see in the future.

Finally i did it for both sides. Now the game looks like it has life.

Drew details for one side if the road now i have splitted details flat array into two matrix one for left and another for right each detail is draw from top to bottom and moves downward when ever a detail goes off the screen the detail row (last row) will be removed and replaced by a new row at the begiining.

It is a bit junky right now will update to a better spawn system using grid instead of flat array and fill the remaining gap by empty green tile set.

Added road system which is a hectic process as i dont know what to do then i set up an array along with the initial roads then when one road goes off the screen i will jsut add another and there is a gas station in here too where you can refuel your car one the road is there no functionality yet which caused a lot of problem in my maths calculation as it’s with width and height is more than of the normal one so i changed from drawing 0 to N to N to 0 and using stack height instead off actual h and blaa blaa blaaah. Finally it is working

Just a info i just scrapped the entire project now i am doing it from the first keeping some mechanism alive not a complete redo kinda but the ui i changed from a semi baked to full baked one. Now i just drew the player’s sprite in the canva along with the road but the real challenge here is the collision,road updation and police chasing you. Mainly the road cause the image is so small that i have to keep a minium of some amount of roads and update to get gasoline a type of road. Maybe if i can implemet a different scene after some time it would be cool but i don’t know how can i achieve it or just a scene selector in the start page who know what i am going to do. let see what i will do tomorrow cause it is weekend with some crazy mindset see you guys in the next one.

In this few hours i am being just coding to make this street lamp spawn and update and it looks shitty yeah i know so now what i am gonna do it just scrap everything what i did till now only the ui not the mechanism and will update the ui that comes along with the car pack.

Added a pavement area so like traffic poles and othere stuffs can take up that place instead of placing it on ground and made a spawn function little better but i am not satisfied as it is too generic i wanna make a spawn function which spawns a item based on its weight like trash can and road cracks spawn often and remaining will spawn less.

Added a random scene spawning system it will spawn sprites randomly after every 4 seconds passes and now i got to extend the road non playable area a bit so these sprites can take the space and don’t look bad.

I drew ground around the sides of the road with green color using the i, j loop and a green tile in the sprite sheet i don’t know why i chose this instead of using drawRect() in canvas but hey it works and i am fine.

I am working on the start page i am just making the game that is always running in the start page and when clicked start it will start a new game so i will add the scene and the start button and so on later just got this working and wrote some code for coin system, pause logic and game over so whenever i update the main game the start page gets updated too like the ui so i dont need to sweat a lot.

Added collision test for the cars which i did the ordinary AABB collision test it worked but it is not good as the player’s car have steering so i just went to google ai studio and asked what can i do it said do SAT test so first take corners and player’s car and colling car check whether the corners have gap if no they are colliding so wrote what the AI gave it works but i am not satisfied so i might rework this by reading some papers tomorrow good luck to me.

Added car spawn so cars can now spawn every 4 sec and i wanna make it random so it doesn’t look static and now i wanna add a lane position which i already have but with wrong x axis value so got to work on it and that is it for now. I am increasing car’s y axis every frame so it looks like it is moving.

Aww man i just spent almost 1 hour and 45 min just debugging the code. I just made the car to not go off the road so i added a check for x axis in the update player function the left side worked fine but not the right side so i was like the math is correct is correct why not it works i though it was because the right road is flipped horizontally so the math is off later i found out it was the math error i wasn’t adding the car width to the equation so the car just steered offroad. Finally figured it out the remaining time i was just adding function so i can spawn random cars in the map.

Added car and the road but when the top hidden road comes down i can see the joint part which is kind of irritating so need to work on top and i need a way to make the not move but looks like it is moving.

Worked on the movement mechanism instead of just adding value to x and y and normalizing diagonal i switched to sin and cos function so i don’t need to worry normalizing the diagonal and working of the diagonal. i think it is fluid enough for now later i will rewrite if my friend or me doesn’t feel good about it.

I just experimented with the player movement mechanism but i don’t feel good about it like it is crap right now. so i just gonna watch a youtube video to learn a better fluid mechanism and i will it. And mainly the player coordinate shouldn’t move instead the scene must move to make a illusion of player moving like what i did in flappy bird came.

Just made a updateplayer() function where the main.js file detects key presses with the detected keys i will update the player x and y position using the function when you press diagonal keys it will normalize the movement meaning the player will go slow when diagonal keys are pressed.
Now got to add scene and so on.

Just set up the basic structure for the game and made some assets edit which i got from the web and with that i made a player display function to display the character in the canvas and a resize function which will be called when the display size changes.
Now got to add a high dpr canvas along with some basic functionality of the player.