58 lines
2.5 KiB
Markdown
58 lines
2.5 KiB
Markdown
# Kakamora Game - Individual Project
|
|
|
|
|
|
- Name: Haeri Kim
|
|
- Student ID: 20254236
|
|
- Email: kimhaeri@kaist.ac.kr
|
|
- URL of the git repository: https://git.prototyping.id/20254236/kakamora-game.git
|
|
- Check out the Demo: https://youtu.be/b40nqw1cudM
|
|
|
|
---
|
|
|
|
### [About the Game]
|
|
Inspired by Disney's Moana, players craft their own army of coconut warriors (Kakamora). The journey begins at the carving station, where you shape each warrior by dragging your mouse across a coconut as if wielding a knife. The speed of your strokes determine the warrior's defensive power. Once you've carved a crew of 7 warriors, your ship sets sail across the open sea.From a shadowy cave along the coast, enemies throws rocks at your ship, threatening to set it on fire. Each warrior must rise to defend the ship in turn.
|
|
|
|
### Controls:
|
|
Arrow keys — move left and right along the deck
|
|
Spacebar — raise your shield and strike the incoming rock
|
|
|
|
The more precisely you time your defense and the more accurately you connect with each rock, the higher you get your score.
|
|
|
|
### Main Classes used in code :
|
|
The game is built in a single `sketch.js` using p5.js. Here are the main classes:
|
|
|
|
|
|
| Class | Role |
|
|
|---|---|
|
|
| `Rock` | A rock thrown at the player's warriors during the battle. It flies in an arc, grows bigger as it approaches. |
|
|
| `Particle` | A tiny flying chip that appears when the player slashes a coconut. |
|
|
| `ImgParticle` | A spinning sprite effect that also pops out during coconut slashing. |
|
|
| `WakeParticle` | A small foam dot left behind the ship as it sails. |
|
|
|
|
|
|
---
|
|
|
|
Libraries used:
|
|
- p5.js
|
|
- p5play
|
|
- Matter.js
|
|
- GSAP
|
|
|
|
---
|
|
|
|
I used AI for building this game project and here are the list of services I used.
|
|
|
|
Image and sound sources:
|
|
- For Image generation, I used Nano Banana and chatGPT.
|
|
- Prompt: I want to use this as a p5play animation frame sequence. Create a series of images that can be used consecutively so that the character appears to be moving.
|
|
|
|
|
|
|
|
- Sound sources from https://mixkit.co/free-sound-effects/
|
|
|
|
Claude Code Example Prompts:
|
|
- using these frame sequences image, animate the idle animation using p5play library.
|
|
- Award different points depending on how close the sword swing comes to the rock.
|
|
- Calculate defense power by awarding different points based on the speed of the sword swing.
|
|
- Implement an animation of the coconut falling from the tree to the ground, and have it land in the center of the screen.
|