Add moving cars animation on city map

asset_credits.md

@@ -40,6 +40,8 @@ https://skalding.itch.io/free-tree-pack-001
 
 https://axulart.itch.io/dirt-and-grass-2d-platform-tileset
 
+https://minzinn.itch.io/pixelvehicles
+
 https://elevenlabs.io/ - sounds for Sinusoid Formula Game on Machine #11
 
-https://openart.ai/ - sprites for Sinusoid Formula Game on Machine #11 (formula sprite animation by @purifiedlight)
+https://openart.ai/ - sprites for Sinusoid Formula Game on Machine #11 (formula sprite animation by @purifiedlight)

src/gameObjects/map_city/index.js

@@ -1,7 +1,9 @@
+import { movingCars } from "./movingCars";
 import { npcsInCityMap } from './npcsOnmap_city';
 const gameObjects = [
     npcsInCityMap,
     // Add more game objects here
+    movingCars
 ];
 
 export default gameObjects;

src/gameObjects/map_city/movingCars.js

@@ -0,0 +1,66 @@
+export const movingCars = (k, map) => {
+    // Load the car sprite from the sprite sheet
+    k.loadSprite('car', './assets/sprites/moving_cars.png', {
+        sliceX: 7,
+        sliceY: 2,
+        anims: {
+            drive: { from: 0, to: 0, loop: true }, 
+            turningPoint: { from: 5, to: 11, loop: true },
+            down: { from: 12, to: 12, loop: true } 
+        },
+    });
+
+    const street = {
+        start: k.vec2(32, 200),
+        turnPoint: k.vec2(455, 200),
+        end: k.vec2(575, map.height * 2),
+    };
+
+    function spawnCar(street) {
+        const car = k.add([
+            k.sprite('car'),
+            k.pos(street.start), 
+            k.area(), 
+            'car', 
+            {
+                state: 'right',
+            },
+        ]);
+
+        car.play('drive');
+
+        // Update car movement and animation based on its state
+        car.onUpdate(() => {
+            if (car.state === 'right') {
+                car.move(160, 0); 
+
+                if (car.pos.x >= street.turnPoint.x) {
+                    car.state = 'down';
+                    car.play('turningPoint'); 
+                }
+
+            } else if (car.state === 'down') {
+                car.move(0, 160); 
+
+                if (car.curAnim() === 'turningPoint' && car.frame === 11) { 
+                    car.play('down'); 
+                }
+
+                if (car.pos.y > street.end.y - 100) {
+                    k.destroy(car);
+                } 
+            }
+        });
+
+        return car;
+    }
+
+    const cars = [];
+
+    k.loop(8, () => {
+        const car = spawnCar(street);
+        cars.push(car);
+    });
+
+    return cars;
+};