Merge pull request 'Adding PROPOSAL_20253158.md' (#10) from 20253158/homework5:develop into 20253158

Reviewed-on: andrea/homework5#10

PROPOSAL_20230412.md

@@ -1,68 +0,0 @@
-# Quetzalcoatl: The Fifth Sun
-
-## Author Info
-- **Name**: Chaebean Yang
-- **Student ID**: 20230412
-- **e-mail**: kazed0102@kaist.ac.kr
-- **GIt Repository**: [Link](http://git.prototyping.id/20230412/homework5.git)
-
-
-## Game Description
-This game is based on [Snake Game](https://p5js.org/examples/games-snake/) and Aztec mytology. The player controls a serpent which grows longer by collecting sacrificial items. Upon reaching a score of 100, the serpent transforms into the Fifth Sun — completing the mythological cycle and the game ends.
-
-- **Goal**: Reaching 100 points to become the Fifth Sun
-- **Lose Condition**: Collision with wall or self or run out of lives.
-
-![Snake Game](lib/snake.png)
-
-## Graphic and Game Screen Sketch
-Graphic Sketch
-![Graphic](lib/graphic.png)
-
-Game Screen Sketch
-![Gmae Screen](lib/gamescreen.png)
-
-
-## Game Elements and Implementation
-- Serpent: Quetzalcoatl-inspired
-- Items: heart, obsidian, etc.
-
-
-## Interactions
-- Arrow key movement
-- Eating items increases snake's body length and score 
-
-
-## Tools and Libraries
-- **p5js**
-- **Adobe Illustrator**
-- **Git**
-
-## Features from Class to Use
-- **Arrays** to manage snake's body segments and growth
-- **Conditionals and loops** to check for collisions, item collection, and movement
-- **Custom functions** for drawing and update logic
-- **HTML-JavaScript integration** to handle external inputs and update in-game UI elements
-
-## Anticipated Challenges
-- Designing natural and smooth movement transitions between snake segments  
-- Creating a coherent and symbolic color palette that reflects Aztec aesthetics
-
-## Posible Future Features
-- Additional levels
-- Animated transformation between game screens
-- Game over screen with a graphic of Tepeyóllotl
-
-## References
-- [Snake Game in p5js](https://p5js.org/examples/games-snake/)
-- Smith, Michel E. (2011). *The Aztec*. John Wiley & Sons.
-- Camilla Townsend. (2019). *Fifth Sun: A New History of the Aztecs*. Oxford University Press.
-- Davide Domenici. (2009). *The Aztecs: History and Treasure of an Ancient Civilization*. White Star Promotional.
-
-
-![Image Reference 1](lib/50796479392_f18856016d_b.jpg)
-![Image Reference 2](lib/images.jpg)
-![Image Reference 3](lib/Quetzalcóatl_como_la_serpiente_emplumada_y_el_dios_del_viento_Ehécatl,_en_el_folio_19.jpg)
-![Image Reference 4](lib/azteccal.jpg)
-![Image Reference 5](lib/Tepeyóllotl_1.jpg)
-

PROPOSAL_20253158.md

@@ -0,0 +1,129 @@
+# Ghost Chase
+
+**Name:** Yewon Kim  
+**Student ID:** 20253158  
+**Repository URL:** http://git.prototyping.id/20253158/homework5
+
+---
+
+## 📑 Table of Contents
+1. [Game Concept & Mechanics](#1-game-concept--mechanics)
+2. [Game Elements & Implementation](#2-game-elements--implementation)
+3. [Expected Challenges](#3-expected-challenges)
+
+---
+
+## 1. Game Concept & Mechanics
+
+**Ghost Chase** is a multiplayer maze attack game where two players **co-control** a single character to escape the maze (dungeon).
+
+> “You’re not just escaping the maze. You’re escaping the traces of your past.”
+
+### 🎯 Goal
+- Solve the maze and reach the exit of the dungeon, avoiding obstacles.
+- Avoid ghost clones that **replay your previous failed attempts**.
+- Survive each level as new ghost clones stack up.
+
+### 🕹️ Controls & Interactions
+
+| Player | Controls       | Role                          |
+|--------|----------------|-------------------------------|
+| 1      | `A`, `W`, `D`   | Controls **direction**         |
+| 2      | `→` to move, `↑/↓` to change speed ranging from 1~5 | Controls **movement and throttle** |
+
+**Win Condition:**  
+- Reach the exit before getting caught by any ghost.
+
+**Lose Condition:**  
+- Hit an obstacle, or collide with a ghost (your past self).
+
+---
+
+## 2. Game Elements & Implementation
+
+### 🌐 Game World
+
+- Bottom-up maze with walls and traps, ending with an exit to outside.
+- One player icon, followed by its ghost clones (# of retries).
+- UI overlays (level, # of retries, speed of player).
+- Concept diagram:
+  <p>
+  <img src="./assets/concept-diagram.png" height="400"/>
+  </p>
+
+
+### 🖼️ Reference Images
+
+- Ghost Chase would resemble the logic and visuals of maze attack games like Pacman.
+
+  <p>
+  <img src="./assets/pacman.jpg" height="200"/>
+  <img src="./assets/fireBoyAndWatergirl.png" height="200"/>
+  </p>
+
+### 🔧 Architecture
+
+#### 📦 Tentative Folder Structure
+
+```plaintext
+ghost-chase/
+├── public/                   
+│   └── index.html
+├── src/
+│   ├── components/           # Svelte UI components
+│   │   ├── Canvas.svelte     # Imports game p5 sketch
+│   │   └── HUD.svelte        # Level info, retries, speed
+│   ├── game/                 # Game logic
+│   │   ├── gameLoop.js       # Initialize, update and render game
+│   │   ├── player.js         # Player input + drawing player sprite
+│   │   ├── ghost.js          # Ghost clone management + drawing ghost sprite
+│   │   ├── maze.js           # Maze structure + drawing
+│   │   ├── controls.js       # Key mappings
+│   │   └── recorder.js       # Records player path
+│   ├── App.svelte            # Roots Svelte components
+│   ├── main.js               
+│   └── styles.css
+├── package.json
+├── vite.config.js            
+└── README.md
+```
+
+#### 🧱 Modules and Libraries
+
+- Each game module inside `/src/game/` encapsulates a single responsibility so that logic stays separated from the UI. 
+- `Canvas.svelte` imports and orchestrates these modules through a p5 sketch loop (`setup`, `draw`), calling `gameLoop.js`, which delegates control to modules like `player.js`, `ghost.js`, and `maze.js`.
+- UI state (level, # of retries, speed of player) is exposed via reactive Svelte stores and displayed using `HUD.svelte`.
+- Libraries used:
+  - **[`p5.js`](https://p5js.org/):** Rendering the maze, animations, and character movement  
+  - **[`Svelte`](https://svelte.dev/):** Framework putting together UI components
+  - **[`Ramda`](https://ramdajs.com/):** Functional utilities for ghost behavior composition, frame transformation pipelines, and immutable game state
+
+#### 🌀 Recursive Function for Ghost Replay
+
+To replay ghost movement, a recursive function steps through each stored frame:
+
+```pseudo
+function replayGhostPath(frameList):
+    if frameList is empty:
+        return
+
+    set ghost state to first frame
+    delay
+    call replayGhostPath with remaining frames
+```
+
+This allows ghost clones to:
+
+- Move in sync with past runs  
+- Be layered recursively as the game progresses  
+- Operate independently from player logic using stored frame data  
+
+---
+
+## 3. Expected Challenges
+
+- Ghost logic: replaying previous frames accurately with recursive logic
+- Collision and timing issues with multiple ghosts
+- Handling performance/memory with repeated clone storage
+- Keeping the gameplay balanced (not too easy or impossible after many retries)
+- Syncing ghost position and player state updates cleanly in each frame