Eine weitere Strecke hinzufügen

[SebastianSchoeps]

Summary

Implements the feature request from Trello card.

Trello Card

https://trello.com/c/dzX6lcgF/1-eine-weitere-strecke-hinzuf%C3%BCgen

Implementation Plan (v6)

Click to expand

Summary

Add a new beginner-friendly hairpin/switchback track called "Serpentine" to the paper-racing game, featuring a winding S-curve layout that is easier than Monaco.

Implementation Plan

All changes are in a single file: index.html

Step 1: Add the new track to the TRACKS registry

At index.html:152, add a new entry to the TRACKS object:

serpentine: { width: 40, height: 30, laps: 1, build: buildSerpentine },

Grid size of 40x30 is slightly smaller than Monaco (48x34) to keep it simpler. The name "Serpentine" describes the S-shaped switchback layout.

Step 2: Implement the buildSerpentine() function

Add a new function after buildMonaco() (after line 312). The track design is a series of wide horizontal straights connected by U-turns (hairpin switchbacks), creating an S-shaped path flowing top-to-bottom-to-top:

  START/FINISH (horizontal on top straight)
  ┌──────────────────────────┐  ← Top straight (wide, ~6 cells)
  │                          │
  │                          ├── Right hairpin turn
  │                          │
  ├──────────────────────────┘
  │
  ├── Left hairpin turn
  │
  ├──────────────────────────┐
  │                          │
  │                          ├── Right hairpin turn
  │                          │
  └──────────────────────────┘  ← Bottom straight

Key design decisions for beginner-friendliness:

• Wide track corridors (6 cells wide instead of Monaco's narrow 3-4 cell sections) — this gives more room for error and reduces crash risk
• Gentle curves at the hairpin turns — no tight chicanes or sudden direction changes
• No internal islands or complex routing — a single obvious path to follow
• Moderate grid size (40x30) — fits comfortably on screen

The build function will:

1. Create a 40x30 grid with makeGrid()
2. Fill three wide horizontal straights connected by vertical hairpin sections
3. Define start/finish line on the top straight
4. Return { grid, start, finish, dir: { x: 1, y: 0 } } (moving right)

Step 3: Add the track option to the HTML dropdown

At index.html:122, add a new <option> to the track picker <select>:

<option value="serpentine">Serpentine</option>

Files to Modify/Create

File	Action	Changes
index.html:149-153	Modify	Add serpentine entry to TRACKS object
index.html:~313 (after buildMonaco)	Modify	Add new buildSerpentine() function (~45 lines)
index.html:119-123	Modify	Add <option value="serpentine">Serpentine</option> to track picker

No new files need to be created — all changes are within the single index.html.

Risks and Dependencies

1. Track playability: The hairpin turn geometry must be validated to ensure the car can actually navigate the switchbacks without getting stuck. The turns need to be wide enough (at least 5-6 cells) that a car with reasonable velocity can decelerate and change direction. This will need manual playtesting after implementation.

2. Canvas scaling: The 40x30 grid at 24px per cell = 960x720px, which is within the existing scaling logic. No changes needed to the rendering system.

3. Finish line crossing detection: The existing lap detection logic using trackDir and dot-product direction checking works generically. As long as the start/finish cells and dir vector are correctly set for the new track, it will work without modification.

4. No other code changes needed: The entire game engine (rendering, movement validation, input handling, undo, HUD) is track-agnostic — it operates on the grid/start/finish/dir data returned by any build function.

---

This pull request was automatically generated by Solvy AI.