Merge pull request 'HW5: Project Proposal Submission' (#8) from 20210747/homework5:main into 20210747

Reviewed-on: andrea/homework5#8

PROPOSAL_20210747.md

@@ -0,0 +1,90 @@
+Name: Nadia Azzahra Putri Arvi  
+Student ID: 20210747  
+Fork URL: [GitTea Link](http://git.prototyping.id/20210747/homework5)  
+
+---
+### Table of Contents
+- [Run the Cat](#run-the-cat)
+  - [1. Idea Description](#1-idea-description)
+  - [2. Game Mechanics](#2-game-mechanics)
+  - [3. Implementation Plan](#3-implementation-plan)
+  - [4. Expected Challenges](#4-expected-challenges)
+
+---
+## Run the Cat
+
+### 1. Idea Description
+I want to make a game that teaches simple programming and logic concepts to children through a no-code game. I want to implement my own version of [LightBot](https://lightbot.com/). In my version, it will be implemented in a 2D platformer game, similar to [PicoPark](https://picoparkgame.com/en/). 
+
+![lightbot](./assets/lightbot.png)
+
+### 2. Game Mechanics
+![rough sketch of the game visuals](./assets/gameplan.png)
+<!-- Describe the game and the game mechanics - what does the user have to accomplish? How do you win or lose? What type of interactions are possible? -->
+
+The player will control a cat character that can move left, right, jump, or pick an item, with movement restricted by a limited number of steps available in each level. The game will feature 5-10 levels, each introducing unique challenges and programming concepts.
+
+In each level, the player has to go to the exit door to finish the level using a set of predefined commands. In some levels, they have to retrieve a required item first before the can open the exit door. Some levels would also have a limited set of allowed steps, but they are able to define a "program" and use it as one of the building block of the move.
+
+### 3. Implementation Plan
+<!-- 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 main element of the game would be The Cat, which is defined through the class `MyCat`. Roughly, the object `MyCat` should have a structure something like this:
+```javascript
+class MyCat {
+    constructor(x, y) {
+        this.x = x;          
+        this.y = y;          
+        this.direction = 1;
+        this.hasItem = false;
+    }
+
+    // Methods
+    moveLeft() {
+        this.x -= 1;
+        this.direction = -1;
+    }
+
+    moveRight() {
+        this.x += 1;
+        this.direction = 1;
+    }
+
+    jump() {
+        this.y += 1;
+    }
+
+    pickItem() {
+        this.hasItem = true;
+    }
+
+    dropItem() {
+        this.hasItem = false;
+    }
+}
+```
+
+To define the world, I'm planning to define a 2D space and pinpoint the cat's location as `(x, y)`. In defining the obstacles, I will use a 2D array with boolean value, to indicate whether there is an obstacle or not. 
+
+```javascript
+class World {
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+        this.obstacles = Array.from({ length: height }, () => Array(width).fill(false));
+    }
+
+    addObstacle(x, y) {
+        if (x >= 0 && x < this.width && y >= 0 && y < this.height) {
+            this.obstacles[y][x] = true;
+        }
+    }
+
+    isObstacle(x, y) {
+        return this.obstacles[y][x];
+    }
+}
+```
+
+### 4. Expected Challenges
+<!-- What do you expect to be the main challenges? What features taught in class do you expect to use in your implementation? -->
+The expected main challenge is implementing dynamic cat animation when it moves, so to make it looks like the cat is running. I plan to keep track of the cat's movement state globally to show if during the rendering stage the cat should be in running animation. I also want to implement scrolling levels where the window follows the cat's movement, but I'm still figuring out how to track the cat's position relative to the viewport for camera movement.

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