Merge branch 'main' of https://git.prototyping.id/20266142/homework5

PROPOSAL_20240905.md

@@ -1,148 +0,0 @@
-# Untitled Maze Game - ID30011 Midterm Project Proposal
-
-- **Name:** Bumgyu Suh
-- **Student ID:** 20240905
-- **Repository URL:** https://git.prototyping.id/20240905/homework5
-
-## Table of Contents
-1. [Game Description and Mechanics](#game-description-and-mechanics)
-    - [Objective](#objective)
-    - [Core Mechanics](#core-mechanics)
-    - [Win / Lose Conditions](#win--lose-conditions)
-    - [Player Controls](#player-controls)
-2. [Visual Design and Implementation](#visual-design-and-implementation)
-    - [Visual Style](#visual-style)
-    - [Game Elements](#game-elements)
-    - [Implementation](#implementation)
-3. [Challenges and Features](#challenges-and-features)
-    - [Expected Challenges](#expected-challenges)
-    - [Features and Concepts Used](#features-and-concepts-used)
-
-# Game Description and Mechanics
-
-![Ingame Chest](./ingame_chest.png)
-
-**Untitled Maze Game** is planned to be a **3D first-person maze game** made using [Babylon.js](https://www.babylonjs.com/), where the player is attempting to escape from a dungeon. The game is structured in levels. In each level, a **procedurally generated maze** is created, and the player must find the key to the exit in one of the chests in  the level, and the exit to advance to the next level. The twist is, if the player opens a chest that the player has already opened before, the player dies and the game is over. The score is determined by how many levels the player wins, and how fast. The ultimate goal is to get the highest highscore.
-
-## Objective
-- Search through the chests of the level to find the exit key.
-- Avoid opening chests that has already been opened before.
-- Escape the maze by finding the exit with the exit key.
-- Progress through as many levels as possible, as quickly as possible.
-
-## Core Mechanics
-- Each level generates a new maze with increasing size or complexity.
-- The main challenge is **memory-based navigation** and **speed**:
-  - If the player opens a **chest that has already been opened before**, the player dies.
-  - This forces the player to remember previous paths and avoid repeating mistakes.
-  - The player also has an incentive to make decisions quick to complete the level in the shortest amount of time.
-
-## Win / Lose Conditions
-- **Win (per level):** Reach the exit of the maze with the key.
-- **Lose:** Re-open a previously opened chest.
-
-## Player Controls
-- `W/A/S/D` keys for movement
-- Mouse movement to control camera direction
-- Left click with mouse while facing a chest to "open" chest
-  1. When correct chest with key: gives key right away
-  2. When chest without key: shows that it is the wrong chest
-  3. When chest that has already been opened: game over
-- Automatic progression to next level when the "exit area" is reached
-
----
-
-# Visual Design and Implementation
-
-## Visual Style
-
-The game will have a simple 3D dungeon-like appearance, with each wall being as large as the walkable space, similar to a maze built in Minecraft:
-- Dark environment (dungeon setting)
-- Walls forming a maze
-- Minimal lighting to create atmosphere
-- The player is represented through a **first-person camera** (no visible body)
-
-## Game Elements
-
-| Element        | Description                              | Implementation |
-|----------------|------------------------------------------|----------------|
-| Player         | First-Person View (cannot see oneself)   | Camera object |
-| Maze           | Procedurally generated dungeon layout    | 2D array → 3D meshes |
-| Walls          | Maze boundaries                          | Box meshes |
-| Floor          | Ground surface                           | Plane mesh |
-| Exit           | Goal area (highlighted ground)           | Plane mesh highlighted in yellow |
-| Chests         | Special tracked cells                    | Box mesh |
-| UI             | Score (round count), instructions        | Text overlay |
-
----
-
-## Implementation
-
-![Maze Topview](./maze_topview.png)
-![Maze Topview Annotated](./maze_topview_annotated.png)
-
-### Maze Representation
-The maze will be stored as a 2D array that stores ID corresponding to this:
-- 0 = empty path
-- 1 = wall
-- 2 = not-yet opened chest without key
-- 3 = already opened before chest
-- 4 = chest with key
-- 5 = starting point
-- 6 = exit
-
-This grid will be converted into 3D.
-
----
-
-### Procedural Generation
-
-Each level:
-1. Generate a new maze with walls and empty paths (0s and 1s in the array)
-2. Identify dead-end cells, put chests in them
-3. Make one of the chests the chest with the key
-4. Make another "chest" (dead-end) the exit
-5. Randomly place player in empty path position
-
-These steps will be implemented as a sequence of functions using **functional programming**.
-
----
-
-### Maze Array Logic
-
-States that need to be stored are stored in the level array (whether chest has been opened, whether the chest is the chest with the key).
-
-- The game will store opened chests by turning the value in the array to 3.
-- When the player opens a chest marked with 3, the game over screen shows.
-- When the player reaches an "exit" space WITHOUT the key, the player is told to find the key first.
-- When the player reaches an "exit" space WITH the key, the player proceeds to the next level.
-
----
-
-# Challenges and Features
-
-## Expected Challenges
-
-### 1. Procedural Maze Generation
-Generating a valid and solvable maze for every level while keeping it balanced in difficulty.
-
-### 2. Difficulty Scaling
-Designing how the maze size increases over levels without making the game frustrating or too easy. Making the highscore meaningful to incentivize fast gameplay, which turns a boring memorization-based game into something more competitive in order to be fun.
-
-### 3. Player Navigation Experience
-Ensuring that the maze is readable enough for satisfying gameplay without visual confusion.
-
-### 4. Learning to use the Babylon.js
-Learning a completely new thing I have never used before effectively.
-
----
-
-## Features and Concepts Used
-
-The implementation will use the following concepts learned in class:
-
-- **JavaScript arrays** (maze array, chests' state)
-- **Functional programming** (steps involved in maze generation)
-- **Event handling** (keyboard and mouse input)
-- **Using javascript libraries** (using [Babylon.js](https://www.babylonjs.com/))
-- **Working with real-time** (stopwatch system for high score)

PROPOSAL_20266142.md

@@ -0,0 +1,97 @@
+# Midterm Project Proposal
+
+**Name:** Samantha Lopez
+
+**Student ID:** 20266142
+
+**Repository:** [https://git.prototyping.id/20266142/homework5.git](https://git.prototyping.id/20266142/homework5.git)
+
+## Inspirations
+
+- [Fireboy and Watergirl:](https://www.coolmathgames.com/0-fireboy-and-water-girl-in-the-forest-temple)  I want similar mechanics to this game minus the multiplayer aspect. More specifically I like how the characters have to manouve around obstacles in order to collect items that then allow the player to move on to the next level.
+- [Gris:](https://www.youtube.com/watch?v=j7tVbyKyggU) I really like the art direction of this game. I want to incoporate a similar theme in my game that regards bringing back color to a gray world. 
+- Art installations: I have visited interactive art installations where individuals are able to interact with visuals via different ways. I would like to somehow translate that feeling to a game. For instance the avatar/charater gives light to the scene as the player moves, similarly to how a LED touch reactive wall would. 
+## Game Mechanics
+
+The player spawns as a glowing little orb in a gray world with its goal being to return color to the world. The goal of each level will be to collect color fragments and each level would progressively give color to the scenes. The color fragments will have to be collected by moving, jumping, falling, etc. it will most likely function as a platformer game. 
+
+### controls 
+
+| Action | Key | 
+|--------|-----|
+| Walk left/right | `← →` or `A D` |
+| Jump| `Space` or ` ↑`|
+|collect fragment | walk into it
+
+### color fragments
+
+there should be like 3-5 color fragments per level. Each collection will add that color to the avatars glow and leave a splash of color around the collection site. The level will automatically clear upon the collection of all fragments by slowly giving the scene color and then transitioning to the next level. 
+
+### Game Obstacles 
+
+A player will have 3 lives. Once all 3 are lost the level restarts, I don't want it to be a rage game so I will not make players lose progress beyond their current level. There will be little spiky gray blocks (entities) that will move around and if they come in contact with the avatar they take away a life. Additionally there could be little tar puddles that are also damaging to the charater. 
+
+### Win and lose logistics
+
+**winning a level** means collecting all fragments in that level. An animation of some sort will play adding the color collected back into the game
+
+**losing a life** will occur when touching an entity or tar puddle. You will restart at spawn but keep collected fragments. 
+
+**Losing all lives** means loosing all 3 lives during a level. This will restart your progress for the current level. 
+
+**Winning the game** will consists of compleating all levels. A full in color world will appear. 
+
+
+## Visuals
+
+The interface would be similar to that of the  afromentioned game, fireboy and watergirl. In terms of the actual game aesthetic, I drew up a quick sketch of what I would want the character, fragments, and entities to look like (This is a very rough and quick sketch of course so it is likely to be further developed). I want the game to feel very indie the more handrawn/handmade and aesthetically pleasing I can make it look the better. I also want to incoporate some kind of storytelling element to the game so little to no text just visuals. 
+
+[Acess my sketches here](https://www.notion.so/Proposal-Sketches-348f941b5e5180be9781e4b7f9e22a51?source=copy_link)
+
+### color language
+
+In the beginning the game will be Monochrome with a lot of cool gray tones. Near color fragments the color of the fragment will glow into the surroudings (this will be implemented based on coding capabilities). After a fragment is collected the avatar will begin to glow that color as each level will be centered around a sigular color. Once a level is complete the color collected will be added to the entire interface. If the player loses all 3 lives during the game the cool grey tones will return. 
+
+### Tentative themes for levels
+
+| color | possible themes|
+|-------|----------------|
+| Red | volcanoes, roses|
+|orange | sunset, oranges|
+|Yellow | sunflowers (debating weather to include yellow...)|
+|Green| Forest, field|
+|Blue | underwater|
+|Purple | night, constellations|
+
+## Ideating the code
+
+- We would need an object that includes the player information and its related actions like moving, jumping and collecting. so something like this maybe?
+  ``` 
+  player{
+    move()
+    jump()
+    collect()
+  }
+  ```
+
+- Objects would also need to be created for platforms, fragments, and levels in a similar manner
+- I anticipate that a lot can be done via P5 and related libraries. 
+  
+## Anticipated Challenges
+
+1. Collisions: a lot of my game would rely in the objects and their positions relative to one another. For instance, once the player touches the fragment it needs to be collected and if the player land on top of a platform it must be able to stand on it otherwise fall. From what I have heard this might need me to implement some sort of gravity and platform collisons which I am unfamiliar with and can be the biggest problem for me. 
+2. Color changing: a large part of my idea contains colors changing and being added to scenes, ideally via animations or transitions. This is an area which I do not have much expereince in and could be tricky to figure out. 
+3. Level design: since I am choosing to create my own game I will have to design all the assets for the game and each level myself which might be difficult but more so time consuming. 
+   
+## Features taught in class I expect to use
+
+- I anticipate that I will most likely utilize p5.js in my project
+- Classes and objects will likely be necessary for interactivity 
+- Arrays for stuff like collecting fragments 
+- Functions for a lot of interactions 
+- Event listeners and keyboard input for controls and gameplay 
+
+
+## Summary
+
+I want to create a platformer game centered around the goal of collecting color fragments to return color to the fictitious world.