spike_timer_sketch.js

var m_start_time;
var m_total_msec;
var m_past_msec;
var m_offset_msec;
var m_start_pressed;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  textAlign(LEFT, CENTER);
  textSize(40);
  frameRate(5);

  resetTimer();
}

function formatTime(t) {
  let msec = Math.ceil(t / 1000);
  let mm = ('00' + parseInt(msec / 60, 10)).slice(-2);
  let ss = ('00' + (msec % 60)).slice(-2);

  return mm + ':' + ss;
}

function dispTime() {
  var str_time = m_total_msec - m_past_msec;
  text(formatTime(str_time), 400, 100);
}

function updatePastTime() {
  if (! m_start_pressed) return;
  if (m_total_msec < m_past_msec) return;

  console.log("update past time.")
  let now = new Date();
  m_past_msec = (now.getTime() - m_start_time) + m_offset_msec;

  console.log(m_past_msec);
}

function drawMessage() {
  let remain = m_total_msec - m_past_msec;
  if (remain <= 0) {
    text('拍手！！！！！！', 200, 200);
  } else if (remain <= 10 * 1000) {
    text('拍手の準備してください!', 200, 200);
  } else {
    text('', 200, 200);
  }
}

function updateStatus() {
  if (! m_start_pressed) return;

  if (m_total_msec <= m_past_msec)
    m_start_pressed = false; 
}

function draw() {
  clear();
  updatePastTime();
  drawMessage();
  // 背景を描く
  dispTime();
  updateStatus();
}

function startTimer() {
  if (m_start_pressed) return;
  m_start_pressed = true;

  var tmp = new Date();
  m_start_time = tmp.getTime();
  console.log("start.")
}

function stopTimer() {
  if (! m_start_pressed) return;
  m_start_pressed = false;

  m_offset_msec = m_past_msec;
}

function restartTimer() {
  startTimer();
}

function resetTimer() {
  m_total_msec = 15 * 1000;
  m_past_msec = 0;
  m_offset_msec = 0;
  m_start_pressed = false;

  clear();
  dispTime();
}

function keyTyped() {
  console.log("key = " + keyCode);
  //a
  if (keyCode === 97) {
    startTimer();
    return;
  }
  //z
  if (keyCode === 122) {
    stopTimer();
    return;
  }
  //x
  if (keyCode === 120) {
    restartTimer();
    return;
  }
  //q
  if (keyCode === 113) {
    resetTimer();
    return;
  }
}