Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
150e5424b5 |
BIN
IMG_9134.jpg
Normal file
BIN
IMG_9134.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
BIN
IMG_9135.jpg
Normal file
BIN
IMG_9135.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 339 KiB |
@@ -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
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
### 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.
|
|
||||||
82
PROPOSAL_20240935.md
Normal file
82
PROPOSAL_20240935.md
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
# My proposal
|
||||||
|
|
||||||
|
My name is Makhabbat, and I am a sophomore at KAIST doing my Bachelor's degree in Industrial Design (ID: 20240935). The URL to the forked repository: [git.prototyping.id](https://git.prototyping.id/20240935/homework5).
|
||||||
|
|
||||||
|
<!-- I want to make atypical infinite runner game usually made for ADHD children. When I was in China, I had a chance to play ADHD-DTx game made for ADHD children and proven to improve their condition. You can't download or even find information about it outside the research paper, so I wanted to make one for myself, cause I drift a lot and would like to train my attention somehow.
|
||||||
|
This is an extreme multitasking game, requiring you to do various things at once and fast.
|
||||||
|
The game has 5 lanes instead of typical 3, when game starts there will be text presented about which things you have to be collecting - various things will be falling along the game so you will have to hit only the ones you were instructed to at the beginning of the game, also one in a while you will have to pass through 'gates' and you're supposed to pass through the one that is answer to the question given several seconds before, you also have to gather basic awards along the lanes and avoid basic obstacles.
|
||||||
|
In the original game that we played, there is an EEG headset that goes along the tablet that records the level of attentiveness to track, however I am thinking it can be just a something that gets reduced when you make too many mistakes.
|
||||||
|
I want to make it using three.js, because my reason for taking this course is to eventually be able to use three.js. -->
|
||||||
|
|
||||||
|
# NeuroRunner: A Multitasking Cognitive Training Game
|
||||||
|
|
||||||
|
NeuroRunner is an atypical, **cognitively demanding** _infinite runner_ inspired by digital therapeutics (DTx) designed for children with ADHD.
|
||||||
|
In Zhejiang University Summer Program, I had the chance to play a clinically tested ADHD-focused game that significantly improved sustained attention, but the **game isn’t publicly available** and information about it exists only inside [research papers](https://pubmed.ncbi.nlm.nih.gov/41490776/).
|
||||||
|
|
||||||
|
<img src="./IMG_9134.jpg" width="45%">
|
||||||
|
<img src="./IMG_9135.jpg" width="45%">
|
||||||
|
|
||||||
|
This project is my attempt to recreate that idea for myself — as someone who often drifts and wants a way to actively train attention through gameplay.
|
||||||
|
The result is an extreme multitasking runner built with three.js, designed to overload and strengthen attentional control, working memory, and task-switching.
|
||||||
|
|
||||||
|
# Core Concept
|
||||||
|
|
||||||
|
NeuroRunner is not a typical runner with 3 lanes — it uses 5 lanes, faster pacing, and continuous task switching.
|
||||||
|
Players must constantly track multiple rule sets at the same time, rewarding precision and penalizing mind-wandering.
|
||||||
|
|
||||||
|
The goal is to maintain cognitive engagement.
|
||||||
|
|
||||||
|
# Gameplay Description
|
||||||
|
|
||||||
|
1. Five-Lane Movement
|
||||||
|
|
||||||
|
- move between 5 horizontal lanes instead of the standard 3.
|
||||||
|
- forces higher spatial attention.
|
||||||
|
|
||||||
|
2. Instruction Phase
|
||||||
|
|
||||||
|
At the start of each run:
|
||||||
|
|
||||||
|
- The player is shown a **type of target item they must collect**.
|
||||||
|
- Throughout the game, objects fall randomly on the screen.
|
||||||
|
- Players must collect only the instructed items and avoid irrelevant ones using the **hit putton** on the right.
|
||||||
|
|
||||||
|
This trains selective attention and working memory
|
||||||
|
|
||||||
|
3. Cognitive Gate Questions
|
||||||
|
|
||||||
|
Every now and then:
|
||||||
|
|
||||||
|
1. A question appears (simple math or logic).
|
||||||
|
2. Several seconds later, gates along all 5 lanes appears ahead.
|
||||||
|
3. The player must pass through the gate corresponding to the correct answer.
|
||||||
|
|
||||||
|
This trains delayed **recall, task switching, and decision-making under pressure**
|
||||||
|
|
||||||
|
4. Rewards & Obstacles
|
||||||
|
|
||||||
|
- Basic pickups that increase score
|
||||||
|
- Standard obstacles that must be avoided
|
||||||
|
|
||||||
|
5. Attentiveness Meter
|
||||||
|
|
||||||
|
The original DTx game used an EEG headset to track attentiveness in real time.
|
||||||
|
|
||||||
|
For this project, I replace that hardware with a mistake-based attentiveness meter.
|
||||||
|
The meter decreases when:
|
||||||
|
- You collect wrong items
|
||||||
|
- You miss target items
|
||||||
|
- You pass through the wrong gate
|
||||||
|
- You hit obstacles
|
||||||
|
When the meter reaches zero → game over.
|
||||||
|
|
||||||
|
This approximates attentional lapse tracking without requiring EEG hardware.
|
||||||
|
|
||||||
|
# Library Used
|
||||||
|
|
||||||
|
I've been wanting to learn three.js since previous semester, so I want to try learning it, using this project.
|
||||||
|
|
||||||
|
# Challenges
|
||||||
|
|
||||||
|
Since this is a multitasking game, there will be a lot of things going on at once, I can't even imagien how I am gonna do that.
|
||||||
|
|
||||||
BIN
environment.png
BIN
environment.png
Binary file not shown.
|
Before Width: | Height: | Size: 1002 KiB |
Reference in New Issue
Block a user