5 Commits

Author SHA1 Message Date
d5d200456f done 2026-04-21 18:12:19 +09:00
6f65c876a2 ready 2026-04-21 13:32:26 +09:00
0b9a3c4415 Ready 2026-04-21 13:29:50 +09:00
0570efcdfc test 2026-04-21 13:26:12 +09:00
9e96f5dcbf test 2026-04-21 12:16:09 +09:00
13 changed files with 133 additions and 115 deletions

View File

@@ -1,115 +0,0 @@
# 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.

133
PROPOSAL_20254236.md Normal file
View File

@@ -0,0 +1,133 @@
# Kakamora: C🥥c🥥nut Carvers
Haeri Kim (20254236) | [git.prototyping.id/20254236/homework5](https://git.prototyping.id/20254236/homework5)
### Table of Contents
- [Concept Overview](#concept-overview)
- [Core Mechanic: Carving](#core-mechanic-carving)
- [Progression System](#progression-system)
- [Tribe and Combat Phase](#tribe-and-combat-phase)
- [Win and Lose Conditions](#win-and-lose-conditions)
- [Key Controls](#key-controls)
---
## Concept Overview
> *Inspired by the Kakamora from Disney **Moana**. Tiny coconut warriors who go absolutely wild at sea.*
![Moana](assets/Moana.jpg)
A **first-person crafting and survival game** where you carve 🥥 coconuts into warriors, weapons, and tools. The better you carve, the stronger your tribe. Get enough crew together and they sail out to sea and then things get wild.
![Kakamora Warriors](assets/Kakamora.webp)
> *Visual tone ref: Kakamora from Moana (2016)*
---
## Core Mechanic: Carving
![Coconut](assets/Coconut-cutting.webp)
You see your **hands holding a knife**, cutting a coconut straight off the tree. Something similar to *Fruitninja.*
![Fruitninja](assets/fruitninja-1.jpg.webp)
### 🗡️ Knife Sharpness
Knife starts out **dull and slow**. Carving is a bit of a struggle at first.
Level up and the blade gets **sharper and snappier.**
```
bladeLevel = 1 -> slow drag, rough edges
bladeLevel = 5 -> smooth arc, clean cuts
bladeLevel = MAX -> one-swipe precision
```
### Facial Expressions and Accessories
How fast you carve changes what the Kakamora looks like:
| Carving Speed | Face Expression | Accessories |
|:---:|:---:|:---:|
| Slow | Blank stare | Plain coconut shell |
| Medium | Determined | Tiny painted markings |
| Fast | Fierce grin | War paint + bone trinkets |
| Ultra Fast | Battle-ready | Full armor + war crown |
---
## Progression System
1. **Start** - Grab a coconut off the tree (first-person knife action)
2. **Carve** - Shape it up. Carving speed decides warrior quality
3. **Level Up Knife** - Sharper blade = faster and cleaner carves
4. **Craft Arrows** - Once the tribe is big enough, start carving **poison arrows** for sea combat
| Name | Reference |
|:---:|:---:|
| Face | ![Face](assets/face.webp) ![Faces](assets/face2.png) |
| Arrow | ![Arrow](assets/arrow.png) |
```
if (tribeSize >= 10):
unlockPhase("ocean_voyage")
beginCrafting("toxic_arrows")
```
> **Toxic arrow carving** is its own minigame -- you need good timing or the poison goes to waste
---
## Tribe and Combat Phase
![Moana Ocean](assets/Moana.jpg)
### Setting Sail
Once you have **10+ Kakamora** carved and ready, the whole group **heads out to sea**.
Enemies start showing up.
### Ocean Battle
- Warriors fight with the **arrows you made**
- You keep crafting from the boat to resupply on the fly
### Retreat
If **more than half the tribe goes down** at sea:
```
if (survivors < tribeSize / 2):
triggerRetreat()
returnToLand()
// back to square one -> harvest new coconuts from trees
```
---
## Win and Lose Conditions
| Condition | Outcome |
|:---|:---|
| Tribe makes it through ocean combat | **Win** |
| Over half the tribe dies at sea | **Retreat** |
| Whole tribe wiped out | **GAME OVER** |
---
## Key Controls
All **keyboard-based**:
| Key | Action |
|:---:|:---|
| `W A S D` | Move / navigate |
| `Space` | Grab coconut from tree |
| `← →` | Carving stroke direction |
| `E` | Confirm / finish carve |
| `Q` | Switch to arrow crafting mode |

BIN
assets/Coconut-cutting.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
assets/Coconut.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

BIN
assets/Kakamora.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
assets/Kakomora_face.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

BIN
assets/Moana.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

BIN
assets/arrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
assets/face.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 611 KiB

BIN
assets/face2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1002 KiB

BIN
flow.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 933 KiB