123 lines
6.2 KiB
Markdown
123 lines
6.2 KiB
Markdown
# Proposal for Apple Life Game
|
||
|
||
**Name:** Jungwoo Rhee
|
||
**Student ID:** 20234333
|
||
**Repository URL:** http://git.prototyping.id/TA/homework5
|
||
|
||
## Table of Contents
|
||
|
||
- [Overview](#overview)
|
||
- [Game Description](#game-description)
|
||
- [Game Mechanics](#game-mechanics)
|
||
- [Life Stage Progression](#life-stage-progression)
|
||
- [Technology Stack](#technology-stack)
|
||
- [Challenges and Milestones](#challenges-and-milestones)
|
||
- [Conclusion](#conclusion)
|
||
|
||
---
|
||
|
||
## Overview
|
||
|
||
**Apple Life** reinterprets the classic 2048 puzzle game by replacing numbers with a series of emojis representing the stages of human life. Built using **Svelte**, the game features a reactive UI and smooth animations. When two tiles bearing the same life stage emoji merge, they evolve into the next stage. Reaching the final (11th) stage—the _farmer_—completes the game.
|
||
|
||
---
|
||
|
||
## Game Description
|
||
|
||
In **Apple Life**, players slide the tiles on a grid (using swipes or arrow keys). Each tile displays a unique emoji corresponding to a life stage, starting from a _shovel_ and evolving step by step until the _farmer_ is reached. The gameplay is focused on merging identical stages to create the next evolution stage, symbolizing human growth.
|
||
|
||
**Key Features:**
|
||
|
||
- **Dynamic Movement:** All tiles shift in the chosen direction.
|
||
- **Merging Logic:** Identical tiles merge to advance to the next life stage.
|
||
- **Random Generation:** A new tile is generated after each move.
|
||
- **Win Condition:** The game ends successfully when the 11th stage (_farmer_) is achieved.
|
||
|
||
---
|
||
|
||
## Game Mechanics
|
||
|
||
- **Tile Movement:** Controlled via swipes or keyboard arrows.
|
||
- **Merging Algorithm:** When two tiles with the same stage meet, they combine and evolve.
|
||
- **Random Tile Addition:** Each move introduces a new tile at a random position.
|
||
- **End Game:** Successful completion is achieved when a tile representing the "farmer" stage is formed.
|
||
|
||
---
|
||
|
||
## Life Stage Progression
|
||
|
||
<style>
|
||
.emoji-image {
|
||
width: 30px;
|
||
}
|
||
</style>
|
||
|
||
The following table shows the 11 life stages of the game, with each stage represented by a distinct emoji. These images are sourced from verified emoji repositories:
|
||
|
||
| **Stage** | **Emoji/Image** | **Description** |
|
||
|:---------:|:---------------:|-----------------------------------------------|
|
||
| **1** | <img src="https://em-content.zobj.net/source/apple/419/shovel_1fa8f.png" class="emoji-image" /> | **Shovel** – The tool for beginning work. |
|
||
| **2** | <img src="https://em-content.zobj.net/source/apple/419/droplet_1f4a7.png" class="emoji-image" /> | **Water Drop** – _Nourishment and care._ |
|
||
| **3** | <img src="https://em-content.zobj.net/source/apple/419/sun_2600-fe0f.png" class="emoji-image" /> | **Sunlight** – _Energy and warmth._ |
|
||
| **4** | <img src="https://em-content.zobj.net/source/apple/419/seedling_1f331.png" class="emoji-image" /> | **Seedling** – _The beginning of growth._ |
|
||
| **5** | <img src="https://em-content.zobj.net/source/apple/419/herb_1f33f.png" class="emoji-image" /> | **Herb** – _Early development and potential._ |
|
||
| **6** | <img src="https://em-content.zobj.net/source/apple/419/potted-plant_1fab4.png" class="emoji-image" /> | **Potted Plant** – _Nurtured growth in a confined space._ |
|
||
| **7** | <img src="https://em-content.zobj.net/source/apple/419/deciduous-tree_1f333.png" class="emoji-image" /> | **Tree** – _Strong roots and expansion._ |
|
||
| **8** | <img src="https://em-content.zobj.net/source/apple/419/blossom_1f33c.png" class="emoji-image" /> | **Flower** – _Blossoming beauty and vitality._ |
|
||
| **9** | <img src="https://em-content.zobj.net/source/apple/419/green-apple_1f34f.png" class="emoji-image" /> | **Green Apple** – _A stage of vibrant life._ |
|
||
| **10** | <img src="https://em-content.zobj.net/source/apple/419/red-apple_1f34e.png" class="emoji-image" /> | **Red Apple** – _Maturity and richness._ |
|
||
| **11** | <img src="https://em-content.zobj.net/source/apple/419/farmer_1f9d1-200d-1f33e.png" class="emoji-image" /> | **Farmer** – _The culmination of growth (Game Completed)._ |
|
||
|
||
---
|
||
|
||
## Technology Stack
|
||
|
||
- **Svelte:** For reactive UI components and efficient state management.
|
||
[Svelte Official Site](https://svelte.dev/)
|
||
- **HTML5 & CSS3:** To structure and style the game board.
|
||
- **Vanilla JavaScript (within Svelte):** To implement game logic (tile movement, merging, etc.).
|
||
- **Local Storage API (optional):** For storing high scores and game progress.
|
||
|
||
---
|
||
|
||
## Challenges and Milestones
|
||
|
||
**Challenges:**
|
||
- **Custom Merging Logic:** Transforming numeric merging rules into an emoji-based life progression.
|
||
- **Reactive Integration:** Ensuring Svelte correctly handles UI updates with every tile movement and merge.
|
||
- **Theme and Visual Consistency:** Accurately representing human growth with a coherent set of emoji stages.
|
||
|
||
**Milestones:**
|
||
1. **Initial Setup:** Project scaffolding and grid display complete.
|
||
2. **Core Mechanics:** Tile movement and merging logic implemented.
|
||
3. **Final Integration:** Complete life-stage progression with smooth animations and win conditions.
|
||
|
||
---
|
||
|
||
## Sample Pseudocode
|
||
|
||
The following pseudocode is adapted from the [Tile.svelte component](https://github.com/GuilhermeBohnstedt/2048-svelte/blob/main/src/components/Tile.svelte):
|
||
|
||
```svelte
|
||
<script>
|
||
// Exported property for a tile object containing the life stage and grid position
|
||
export let tile;
|
||
|
||
// Reactive statement for computing the CSS transform based on tile's position
|
||
$: tileStyle = `transform: translate(${tile.x * tileSize}px, ${tile.y * tileSize}px);`;
|
||
</script>
|
||
|
||
<div class="tile" style="{tileStyle}">
|
||
<!-- Display the emoji corresponding to the current life stage -->
|
||
{tile.emoji}
|
||
</div>
|
||
```
|
||
Adapted from GuilhermeBohnstedt's 2048-Svelte.
|
||
|
||
---
|
||
|
||
## Conclusion
|
||
|
||
The **Apple Life** game offers a unique twist on the classic 2048 game by incorporating life stages represented by emojis. This project not only challenges players to think strategically but also provides a visually engaging experience. With the use of Svelte and modern web technologies, the game promises smooth performance and an interactive user interface. The journey from a simple _shovel_ to a _farmer_ encapsulates the essence of growth and achievement.
|
||
|