Merge pull request 'Proposal Submission' (#7) from 20210782/homework5:main into 20210782

Reviewed-on: andrea/homework5#7

PROPOSAL_20210782.md

@@ -0,0 +1,187 @@
+# Homework 5: Cats vs. Mice
+Name        : Adelia Putri  
+Student ID  : 20210782  
+URL         : http://git.prototyping.id/20210782/homework5
+
+## Table of Content
+- [Homework 5: Cats vs. Mice](#homework-5-cats-vs-mice)
+  - [Table of Content](#table-of-content)
+  - [Game Description](#game-description)
+  - [Game Interface](#game-interface)
+  - [Game Mechanics](#game-mechanics)
+    - [Currency](#currency)
+    - [Character](#character)
+    - [Interactions List](#interactions-list)
+  - [Cat Roles](#cat-roles)
+  - [Mouse Roles](#mouse-roles)
+  - [Implementation Plan](#implementation-plan)
+  - [Challenges](#challenges)
+
+## Game Description
+**Cats vs. Mice** is a tower defense-style strategy game inspired by *Plants vs. Zombies*, redesigned with a cute kitchen theme. Players place cats on a tiled kitchen floor to stop waves of invading mice who are after the **Cheese Feast**, a table full of cheesy dishes at the leftmost side of the screen.
+
+The player’s goal is to protect the **Cheese Feast** by defending against waves of incoming mice. To do this, the player can place different types of cats with special abilities to attack the mice.
+
+> 🏆 **Win Condition**: Successfully stops all the mice from reaching the **Cheese Feast**  
+> ❌ **Lose Condition**: A mouse reaches the **Cheese Feast**
+
+
+<p align="center">
+    <img src="assets/pvz.jpg" height="350">
+</p>
+
+Source: [Plants vs. Zombies GOTY Edition](https://store.steampowered.com/app/3590/Plants_vs_Zombies_GOTY_Edition/)
+
+
+## Game Interface
+- **Background**: A 5x9 tiled kitchen floor with a light brown and white checker pattern
+  - Will be implemented using a 2D array
+- **Cat Panel**: A row of clickable cat icons showing the price of each cat
+- **Cheese Feast**: A table full of cheese dishes on the left side of the screen
+- **Mice Entrance**: Mice appear from a hole in the wall on the right side of the screen
+- **Defense Line**: Each row has a *robot vacuum* at the far left that activates once a mouse approached it, sweeping away all mice in that row
+- **Cheese** (currency): Drops from `🧑‍🍳 Chef Cat` or randomly from the top
+- **Progress Bar**: Showing the progress of the game, if the progress bar is full, the game is finished
+
+Below is the rough design of the game set:
+<p align="center">
+    <img src="assets/cvm.jpeg" height="350">
+</p>
+
+
+## Game Mechanics
+### Currency
+   - The currency of the game is **cheese** (replacing the sun in *Plants vs. Zombies*)
+   - Players can collect cheese produced by `🧑‍🍳 Chef Cat` or dropped randomly from above
+   - **Cheese** is used to buy different types of **[cats](#cat-roles)**, which can be placed on the 5x9 kitchen grid
+
+### Character
+1. Cats
+   - Objective: Protect the **Cheese Feast** by attacking, slowing, or generating cheese. Each cat has a different ability and price
+   - Cats can only be placed in empty tiles and can be replaced by new cats at a cost  
+   - See the [Cat Roles](#cat-roles) below for further description
+2. Mice  
+   - Objective: Mice enter from the right side and move left toward the **Cheese Feast**
+   - Mice will move forward in a straight line unless blocked by a cat
+   - If a mouse reaches a cat, it will spray the cat with a water gun. When the cat is wet enough, the cat will run away, which means the mouse defeated the cat
+   - See the [Mouse Roles](#mouse-roles) below for further description
+
+### Interactions List
+| **Interaction**| **Trigger** | **Result**|
+|----------------|-------------|-----------|
+| Place cat      | Mouse click on UI + tile | Deduct cheese, place cat |
+| Cat shoots yarn | Timer per cat | Add a yarn to the grid |
+| Yarn hits mouse | Collision | Mouse takes damage |
+| Mouse reaches cat | Collision | Mouse sprays cat, cat runs away |
+| Mouse reaches robot vacuum | Collision | Robot vacuum move to the right and remove all mice in the rows |
+| Cheese pick up | Mouse click on cheese icon | Increase cheese count |
+| Remove cat     | Mouse click on UI + cat | Remove cat from the tile |
+| Mouse reaches left edge | Position check | Trigger loss state |
+| All mice defeated | Mouse count check | Trigger win state |
+
+
+## Cat Roles
+
+| Icon | Cat Type | Ability | Cheese Cost |
+|------|----------|---------|-------------|
+|  🧶  | Single Yarn Cat | Shoots 1 yarn ball every 2 seconds | 100 |
+| 🧶🧶 | Double Yarn Cat | Shoots 2 yarn balls (double damage) | 200 |
+|  💤  | Sleepy Cat | Sleeps until touched, then instantly defeats mouse that touched it | 150 |
+|  🧑‍🍳  | Chef Cat | Produces cheese every few seconds | 50 |
+|  ❄️  | Ice Cat | Slows down mice by throwing snowballs | 150 |
+
+Each cat will be an object with few common properties and methods as follows:
+```js
+class Cat {
+  constructor(x, y, type) {
+    this.x = x;
+    this.y = y;
+    this.type = type; // 'yarn', 'double', 'sleepy', 'chef', 'ice'
+    this.cost = 0;
+    this.health = 100;
+  }
+  draw() { ... }
+  update() {
+    if (this.type === 'chef') this.generateCheese();
+    else if (this.type === 'yarn') this.shoot();
+    else if (this.type === 'double') {
+        this.shoot();
+        this.shoot();
+    }
+    // Implementation for Chef Cat and Ice Cat
+  }
+  shoot() { ... }
+  generateCheese() { ... }
+}
+```
+
+## Mouse Roles
+
+| Icon |  Mouse Type  | Description | Appearance |
+|------|--------------|-------------|------------|
+|  🐭  | Basic Mouse  | Walks slowly, standard HP (100) | Early Game |
+|  ⛑️  | Helmet Mouse | Wears cheese pot as helmet, high HP (150) | Mid Game |
+|  🏃‍♂️  | Sporty Mouse | Moves quickly (1.25x Basic Mouse), low HP (75) | Mid Game |
+|  🐁  | Boss Mouse   | Very slow, very high HP (500)| Late Game |
+
+Each mouse will be an object with few common properties and methods as follows:
+
+```js
+class Mouse {
+  constructor(row, type) {
+    this.row = row;
+    this.x = CANVAS_WIDTH;
+    this.type = type; // basic, helmet, sporty, boss
+    this.speed = 1;
+    this.health = 100;
+  }
+
+  move() {...}
+
+  attack(cat) {...}
+
+  takeDamage(amount) {...}
+
+  die() {...}
+}
+```
+
+## Implementation Plan
+The game will be implemented in JavaScript using p5.js. The project will follow an object-oriented approach, using classes and modular files to organize different parts of the game.
+
+States to be updated every frame:
+- Cat's state: shooting, generating cheese
+- Mice's movement and health points
+- Cheese production
+- Checking win/lose condition
+
+To track the game, a class `CatsVsMice` will be roughly implemented as follows
+```js
+class CatsVsMice {
+    constructor() {
+        this.grid = createGrid();
+        this.cats = [];
+        this.mice = [];
+        this.cheese = 50;
+        this.play = "play"; // option: "play", "win", "lose"
+    }
+    
+    update() {
+        this.updateCats();
+        this.updateMice();
+        this.updateCheese();
+        this.checkWinLose();
+    }
+}
+```
+
+Additional Libraries and Sources:
+- Animation: p5.play
+- Sound Effects: p5.sound
+- Character visual: open sources like https://opengameart.org/ or will be manually drawn
+
+
+## Challenges
+1. Collision detection between objects (mouse and yarn, mouse and cat)
+2. Applying the animation
+3. Handling overlapping objects

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)
-