doahuang / Taiko

Rhythm game featured Japanese Taiko drum

Taiko

Taiko, music rhythm game featured Japanese Taiko drum. Built with JavaScript and HTML5 Canvas.

Live

Table of Contents

• Introduction
• Features
• Technologies
• Challenges
• Code snippets
• Bonus features

Introduction

Taiko is a music rhythm game featured Japanese Taiko drum.

The player hits a drum in a stream of notes following a piece of music.

Features

In Taiko player is able to:

• Play three music pieces at random speed

• Hit the drum to play a music note

• View the score, fill up spirit gauge, and make combos

• Start, pause, restart the game

Technologies

• Vanilla Javascript

• HTML5 Canvas

• Animate.CSS

Challenges

Synchronize notes with music tempo

Due to time constraint I was not able to successfully implement this feature. Instead I came up with a workaround to manipulate the beats per minute of music piece and canvas frame rate, and added a random generator for variations in moving speed.

Code snippets

let bpm = music.bpm;
let delay = Math.floor(3600 / bpm - Math.random() * vel / 2);
let notesKeys = Object.keys(notes);

if (frames % delay === 0) {
  if (notesKeys.length < vel) {
    let note = new Note(vel);
    notes[note.id] = note;
    frames = 0;
  }
}

let key = drumKeys[j];
if (key.pressed) {
  key.pressed = false;
  drum.flash();
  if (key.type === note.type) {
    combo.up();
    spiritGauge.up(combo.combo);
    score.up(spiritGauge.spirit);
    delete notes[id];
  } else {
    combo.reset();
  }
}

Bonus features

• Synchronize moving notes with music tempo

• Add more music and difficulties

• Two-player mode