<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bomb game</title>
<link href="bomb.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
<div>
<p>10</p>
</div>
<p id="message"></p>
</body>
<button onclick="getElement();">get name</button>
<script>
// function getElement() {
// let elements = document.getElementsByTagName("div");
// let len = elements.length;
// console.log(len);
// for (let i = 0; i < len; i++) {
// console.log("text :" + elements.item(i).textContent);
// }
// }
(() => {
let count = 5, timer = null, msgArea = null;
function countdown() {
count--;
if (count == 0) {
// alert("bokan");
} else {
msgArea.innerText = `爆発まであと ${count}秒`
timer = setTimeout(countdown, 1000);
}
}
function stop() {
clearTimeout(timer);
msgArea.innerText = "世界は救われた";
msgArea.style.fontSize = "200%";
msgArea.style.textAlign = "center";
}
// ランダムな整数出力
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
let randomNumber = getRandomInt(10);
console.log(randomNumber); //0-9の数字を出力する
function selectBomb() {
let element = document.getElementsByTagName("div");
msgArea = document.getElementById("message");
// console.log(arr[getRandomInt(len)]);
i = 0;
while (i < 10) {
element.item(i).style.marginLeft = `${getRandomInt(750)}px`;
console.log(getRandomInt(600));
i += 1;
}
console.log(element);
corAns = element[randomNumber]; //あたりのdivを決定する
corAns.addEventListener("click", stop);
timer = setTimeout(countdown, 1000);
}
document.addEventListener("DOMContentLoaded",selectBomb);
})();
</script>
</html>
