Merge pull request 'homework5' (#5) from 20220552/homework5:main into 20220552

Reviewed-on: andrea/homework5#5

PROPOSAL_20220552.md

@@ -0,0 +1,115 @@
+# My proposal
+
+- name: Chaewon Lee
+- student ID: 20220552
+- [URL](https://git.prototyping.id/20220552/homework5)
+
+## Describe the game
+
+```
+what does the user have to accomplish? How do you win or lose? What type of interactions are possible?
+```
+
+**Orb.io** is a 3D survival game inspired by `.io-style` games, particularly [Slither.io](http://slither.com/io), reinterpreted in a _three-dimensional_ visual environment.
+
+The player controls a glowing sphere moving through a dark space filled with smaller orbs. While the gameplay mechanics are based on classic snake-like systems, the game presents them using 3D rendering and spatial depth.
+
+### Objective
+
+The player's goal is to survive as long as possible while collecting glowing orbs to increase their score and grow in size.
+
+### Core Mechanics
+
+- The player moves continuously across a 3D environment (constrained to a flat plane for clarity and control).
+- Small glowing orbs are scattered throughout the space.
+- When the player collects an orb, their score increases and their body grows longer.
+- The player leaves behind a trail of body segments that follow the head, forming a snake-like structure.
+- As the player grows, navigation becomes more difficult due to increased length and space constraints.
+
+### Win / Lose Conditions
+
+- There is no fixed win condition. The game is endless, and success is measured by the player's score and survival time.
+- The player loses if:
+  - They collide with their own body
+  - They hit obstacles or boundaries in the environment
+
+### Player Interactions
+
+The player can:
+
+- Control movement using keyboard (`WASD` or `arrow keys`) or mouse input
+- Collect orbs to grow and gain points
+- Avoid collisions with their own body and obstacles
+- Restart the game after losing
+
+The gameplay loop is simple and repetitive:
+`Play` → `Collect` → `Grow` → `Avoid` → `Fail` → `Restart`
+
+The simplicity of the mechanics allows for immediate understanding, while increasing difficulty creates tension and replayability.
+
+## How will the game look like?
+
+```
+What are the game elements (e.g. characters, world, interface) and how will they be implemented in code (e.g., modules, classes, objects, functions)? Feel free to use diagrams, flow-charts or any other visual representation to show your plan.
+```
+
+The game will feature a dark 3D environment with glowing spheres as the main visual elements, creating a clean and immersive experience.
+
+<img src="environment.png" style="max-height: 300px;">
+
+### Game Elements
+
+- **Player**: glowing sphere with trailing body segments
+- **Orbs**: collectible glowing spheres
+- **Obstacles**: larger objects that cause collision
+- **World**: bounded arena on a flat plane
+- **UI**: score, best score, start and game over screens
+
+### Code Structure
+
+The game will be organized into simple modules:
+
+`main.js`  
+ ├── `GameManager`  
+ ├── `Player`  
+ ├── `Orb`  
+ ├── `Obstacle`  
+ └── `UI`
+
+- **Player**: movement, growth, collision
+- **Orb**: spawning and collection
+- **Obstacle**: collision handling
+- **GameManager**: game state, score, restart
+- **UI**: display elements
+
+### Gameplay Flow
+
+![](flow.png)
+
+### Technical Approach
+
+- Built using **Three.js** for 3D rendering
+- Movement constrained to a plane for simplicity
+- Objects managed using classes and arrays
+- Collision detection using distance checks
+
+## challenges & features
+
+### Expected Challenges
+
+- 3D rendering (camera, lighting, materials)
+- Implementing smooth body-following behavior
+- Managing performance with multiple objects
+- Balancing _visual effects_ and _performance_
+
+### Relevant Course Concepts
+
+- **Types and Variables**: used to store positions, score, and game state
+- **Arrays and Objects**: used to manage body segments, orbs, and obstacles
+- **Functions**: used to organize update, rendering, and interaction logic
+- **Modules**: used to structure the project into components such as `Player`, `Orb`, and `GameManager`
+- **Event Handling**: used to process user input (keyboard or mouse)
+
+---
+
+> This proposal was written with the assistance of ChatGPT for structuring and language support.

PROPOSAL_20220899.md

@@ -1,101 +0,0 @@
-- [My proposal](#my-proposal)
-  - [Basic Information](#basic-information)
-  - [Video Game: nag a ram](#video-game-nag-a-ram)
-    - [Game Mechanics](#game-mechanics)
-    - [Technical Implementation](#technical-implementation)
-  - [Use of AI](#use-of-ai)
-
-# My proposal
-
-## Basic Information
-
-- Name: Yu Min Choi
-- ID: 20220899
-- [Repository](https://git.prototyping.id/20220899/homework5)
-
-## Video Game: nag a ram
-
-_**nag a ram**_ is an anagram game that helps English speakers improve problem-solving skills and build vocabulary.
-
-> An anagram is a word or phrase made by using the letters of another word or phrase in a different order. For example, _silent_ and _listen_ are anagrams. _triangle_, _alerting_, _integral_, and _relating_ are all anagrams of one another.
->
-> \*_nag a ram_ is an anagram of _anagram_.
-
-### Game Mechanics
-
-**How to Play**
-
-1. A base word appears on screen. The player can choose the number of letters beforehand or leave it random.
-2. Drag the letter tiles to rearrange them into a valid anagram before time runs out. The time limit scales with word length — longer words get more time.
-3. Press **Complete** to submit the answer.
-4. If correct, the player earns points and can save the word to a personal vocabulary list for later review.
-5. If incorrect or time runs out, one life is lost. The player has 5 lives per session. Once all lives are spent, there is a 5-minute cooldown before the game can be restarted.
-
-**Constraints**
-
-- Word: Single word only
-- Time: Scales with word length
-- Lives: 5 per session
-
-**Scoring**
-
-- Base points: Awarded per correct answer, scaled by word length
-- Streak bonus: Multiplied by consecutive correct answers
-- Easter egg: Double points for palindrome answers
-
-**Interface**
-
-The letter tiles are designed to resemble wooden blocks, giving the game a tactile, physical feel reminiscent of classic word games like Scrabble.
-
-![pic](assets/scrabble.jpg)
-
-### Technical Implementation
-
-[**Random Word API**](https://random-word-api.herokuapp.com/)
-
-The base word is randomly generated using the Random Word API with a length parameter.
-
-For example,
-https://random-word-api.herokuapp.com/word?length=9 returns:
-
-```json
-["triangle"]
-```
-
-[**Anagramica API**](http://anagramica.com/api)
-
-Once base word fetched from the Random Word API, the Anagramica API is used to verify at least one valid anagram (excluding the base word itself) exists. If the player's submission matches any word in the array, the answer is validated.
-
-For example, http://www.anagramica.com/best/:triangle returns:
-
-```json
-{
-  "best": ["alerting", "altering", "integral", "relating", "triangle"]
-}
-```
-
-**Word module**
-
-- `fetchRandomWord(length)`: Fetches a random word from the Random Word API with the specified or random length
-- `fetchAnagrams(word)`: Fetches valid anagrams from the Anagramica API
-  - Uses `.filter()` to exclude the base word and ensure at least one valid anagram exists
-- `validateAnswer(answer, anagrams)`: Checks if the player's input matches a valid anagram
-  - Uses `.includes()` to search the anagram array
-- `isPalindrome(answer)`: Checks if the given word is a palindrome
-  - Uses recursion to compare letters inward from both ends
-
-**Game class**
-
-Manages state: score, timer, lives, streak
-
-- `addScore(wordLength)`: Calculates and adds points based on word length, applies the streak multiplier, and doubles points if the palindrome check passes
-- `startTimer(wordLength, onTick, onTimeUp)`: Starts a countdown scaled to word length
-- `stopTimer()`: Stops the timer, either when the player submits an answer or when time runs out
-- `deductLife()`: Removes a life and resets the streak
-- `isGameOver()`: Checks if all lives have been used
-
-**Vocabulary class**
-
-## Use of AI
-
-AI was used to paraphrase and refine the written content of this proposal.