Dvlog_03 Create game

When creating the game with the software, I faced quite a few technical challenges. However, by following online tutorials, I gradually became more familiar with Twine and grew more confident in using it.

Challenges I faced while creating the project:

1. Use images as backgrounds and add GIFs and music, create status menu 

Solution: Used CSS Grid with custom styling for interactive character selection

- CSS Grid Complete Guide:

  https://css-tricks.com/snippets/css/complete-guide-grid/

- CSS Positioning Explained:

2. text layout issues with whitespace

Solution: Harlowe treats line breaks and whitespace in the source code as actual content unless properly handled. Each macro call can introduce unwanted spacing.

- Harlowe Whitespace Guide:

  https://twine2.neocities.org/#markup_whitespace

- Twine CSS Styling Tutorial:

- Interactive Fiction Best Practices:

  http://www.motoslave.net/sugarcube/2/

3. Minigame 2- pattern memory game

MECHANICS:

- 4 colored buttons flash in sequence

- Sequence starts at 3 buttons, increases to 5

- Player must repeat the sequence correctly

- Complete 3 levels (3, 4, 5 buttons) to win

- Simon Game Tutorial: 

- JavaScript Promises Explained:

- Async/Await Tutorial:

  https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_awa...

- Build a Memory Game:

4. minigame 3 - maze navigation

MECHANICS:

- Navigate 15x15 maze using arrow keys

- Collect 3 gold stars to win

- Brown walls (#6d4c41) on all borders

- Blue player circle that moves tile-by-tile

KEY ALGORITHMS:

1. Depth-First Search (DFS) for maze generation

2. Stack-based backtracking

3. Collision detection for player movement

4. Canvas 2D rendering API

5. Keyboard event handling

BORDER WALL SOLUTION:

Issue: Maze generation might carve into borders

Solution: 

- Check neighbors with >= 1 and < dimension - 1

- Force all border cells to wall (1) after generation

- Maze Generation Algorithms:

- Canvas API Tutorial:

  https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

- Depth-First Search Explained:

- Procedural Maze Generation:

  https://weblog.jamisbuck.org/2011/2/7/maze-generation-algorithm-recap

5. localstore persistence for game data 

Solution: Implemented localStorage API to persist data across browser sessions

- MDN Web Docs - localStorage: 

  https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

- Video Tutorial - localStorage Explained:

- Twine/Harlowe JavaScript Integration:

  https://twine2.neocities.org/#macro_js

6. Endingscene table logic implementation

Solution:  Created a decision table using Harlowe's conditional (cond:) macro with priority ordering

- Harlowe Conditional Logic:

  https://twine2.neocities.org/#macro_cond

- State Machine Design Patterns:

  https://gameprogrammingpatterns.com/state.html

7 . Create a Playthrough log system

PURPOSE:

Track and display history of player choices and outcomes across multiple

playthroughs. Shows last 7 completed games with statistics.

KEY FEATURES:

1. Circular buffer (keep last 7 entries)

2. Timestamp tracking with (current-date:)

3. Comprehensive statistics per playthrough

4. Dynamic image state based on severity

5. Data persistence via localStorage

6. Table display with responsive CSS

DATA FLOW:

1. Player completes game → Reach ending passage

2. Calculate all statistics from game variables

3. Create datamap with all playthrough data

4. Add to $playthroughLogs array

5. Trim to last 7 entries if needed

6. Save to localStorage

7. Display in Achievements page table

- Arrays and Data Structures:

  https://twine2.neocities.org/#type_array

- Harlowe Datamaps:

  https://twine2.neocities.org/#type_datamap

- JavaScript Arrays and Slicing:

  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects...

- For Loop in Harlowe:

  https://twine2.neocities.org/#macro_for

- Circular Buffer Pattern: