Problem
Create a small game where timing, state changes and controls form one understandable loop.
Personal creative-coding project
Blade Rhythm
A timing-based browser game connecting player input, game state, visible feedback and increasing difficulty in vanilla JavaScript.
Target users
People familiar with casual browser games and keyboard or button controls.
My contribution
Game concept, frontend, JavaScript logic, interface states and responsive adjustments.
Technologies
HTML, CSS, JavaScript, DOM, keyboard input
01
Project concept
The project began as a focused JavaScript exercise: an enemy moves, the player reacts, and the game updates health, combo, difficulty and visible feedback.
Clear goal
React when the enemy reaches the valid timing zone.
Deliberate scope
A small playable loop rather than a full game or custom engine.
02
Interaction and visual direction
Visible timing zones, health values and direct feedback help the player understand each result while the fantasy-inspired arena gives the small prototype a distinct character.
Enemy movement
A timer moves the enemy and creates the timing window.
Player input
The attack button or Space checks the current position.
State update
Health, combo and difficulty change from the result.
Visible feedback
The interface reports the outcome before the next cycle.
03
Implementation and challenges
Vanilla JavaScript keeps the game loop explainable. The hardest part was keeping timers, restart behaviour, player state and responsive controls in sync.
Timer lifecycle
Restart clears previous timers before a fresh loop begins.
Two control modes
Buttons and keyboard input use the same underlying actions.
Difficulty state
Pressure increases without changing the core rules.
Responsive arena
Status values and controls remain usable on smaller screens.
04
Testing and reflection
Automated checks cover restart timers, keyboard controls, enemy attacks and reachable timing zones. External playtesting is still a planned next step.
Status: Planned — external playtesting has not yet been completed.
Planned test details
Objective and participants
Test with 3–5 first-time players whether they understand the goal, controls and difficulty changes without moderator instruction.
Tasks
- Explain the game goal.
- Attack successfully and use healing.
- Restart the game.
- Explain the difficulty change.
Observe and measure
Record completion, critical errors, assistance, hesitation, wrong turns and comments about timing and controls.
Pending evidence
Findings and resulting changes remain pending until external playtests are completed.
What worked well
The project connects interaction logic and visible state instead of only styling a static interface.
Biggest challenge
Keeping movement, attacks, restart and feedback from creating duplicate state.
What I would improve
Run first-time playtests and refine any controls or timing feedback that cause hesitation.
PlayNext
AI decision product · React and TypeScript