0

A simple timer has been implemented that tells when a game monster will respawn. If you do not activate the chrome tab by continuously pressing Alt-Tab, there is a problem that the notification sound does not play irregularly after playing once or twice.

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>갈망타이머</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>갈망타이머</h1>
  <h2>부선장 젠타임 : 47.5s</h2>
  <h3>보정시간 : 0.14s</h3>

  <h2 id="LeftTime">LeftTime</h2>
  <button id="startBtn">Go</button>
  <br><br>
  <button id="minusBtn">-</button>  
  <input type="number" id="changeTime" value=50>
  <button id="plusBtn">+</button>

  </br> <audio controls id="ten" src="alarm/Announcer_begins_10sec.wav"></audio>
  </br> <audio controls id="five" src="alarm/Announcer_begins_5sec.wav"></audio>
  </br> <audio controls id="four" src="alarm/Announcer_begins_4sec.wav"></audio>
  </br> <audio controls id="three" src="alarm/Announcer_begins_3sec.wav"></audio>
  </br> <audio controls id="two" src="alarm/Announcer_begins_2sec.wav"></audio>
  </br> <audio controls id="one" src="alarm/Announcer_begins_1sec.wav"></audio>
  </br> <audio controls id="timeOver" src="alarm/Hitsound.wav"></audio>
  </br>


  <script src="script.js"></script>
  <!--
  This script places a badge on your repl's full-browser view back to your repl's cover
  page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
  teal, blue, blurple, magenta, pink!
  -->
  <script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>

</html>

script.css

document.getElementById("startBtn").addEventListener('click', startTimer);

var timerText = document.getElementById("LeftTime");

const setTime = 47500; // 부선장 리젠시간 47.5초 
const correctionTime = 140; // 보정시간 0.13초 정도
const tickingRate = 20;
var leftTime = setTime; // 남은시간
var prevTime = new Date().getTime();

var ten = false;
var five = false;
var four = false;
var three = false;
var two = false;
var one = false;
var timeover = false;

var tenMusic = document.getElementById("ten");
var fiveMusic = document.getElementById("five");
var fourMusic = document.getElementById("four");
var threeMusic = document.getElementById("three");
var twoMusic = document.getElementById("two");
var oneMusic = document.getElementById("one");
var timeoverMusic = document.getElementById("timeOver");

var soundVolume = 0.35;
tenMusic.volume = soundVolume;
fiveMusic.volume = soundVolume;
fourMusic.volume = soundVolume;
threeMusic.volume = soundVolume;
twoMusic.volume = soundVolume;
oneMusic.volume = soundVolume;
timeoverMusic.volume = soundVolume;


var chnageTime = document.getElementById("changeTime").value;
var minusBtn = document.getElementById("minusBtn");
var plusBtn = document.getElementById("plusBtn");

minusBtn.addEventListener('click', minusTime);
plusBtn.addEventListener('click', plusTime);

function minusTime() {
  chnageTime = document.getElementById("changeTime").value;
  leftTime = leftTime - Number(chnageTime);
}
function plusTime() {
  chnageTime = document.getElementById("changeTime").value;
  leftTime = leftTime + Number(chnageTime);
}

function startTimer() {
  prevTime = new Date().getTime();
  ticking();
}

function ticking() {
  var now = new Date(); // 지금객체
  var nowTime = now.getTime(); // 현재시간 갱신
  var gapTime = nowTime - prevTime;
  prevTime = nowTime;

  leftTime = leftTime - gapTime;

  if (leftTime <= 10000 && !ten) {
    ten = true;
    tenMusic.play();
    // left 10sec music
  }
  if (leftTime <= 5000 && !five) {
    five = true;
    fiveMusic.play();
    // left 5sec music
  }
  if (leftTime <= 4000 && !four) {
    four = true;
    fourMusic.play();
    // left 4sec music
  }
  if (leftTime <= 3000 && !three) {
    three = true;
    threeMusic.play();
    // left 3sec music
  }
  if (leftTime <= 2000 && !two) {
    two = true;
    twoMusic.play();
    // left 2sec music
  }
  if (leftTime <= 1000 && !one) {
    one = true;
    oneMusic.play();
    // left 1sec music
  }

  if (leftTime <= 0) {
    reset();
    timeoverMusic.play();
    // timeover music
  }

  setTimeout(ticking, tickingRate);
  timerText.innerText = leftTime;
}

function reset() {
  leftTime = setTime + correctionTime + leftTime;

  tenMusic.load();
  fiveMusic.load();
  fourMusic.load();
  threeMusic.load();
  twoMusic.load();
  oneMusic.load();
  timeoverMusic.load();

  ten = false;
  five = false;
  four = false;
  three = false;
  two = false;
  one = false;

}

It is implemented by playing video content such as YouTube or Netflix in pip mode and then hunting monsters whenever the alarm goes off. However, if the update is not performed as above, the notification sounds irregularly.

Croa La Aisha
  • 3
  • 2

0 Answers0