diff --git a/index.html b/index.html new file mode 100644 index 0000000..7cf8701 --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + + + + 30秒当てゲーム + + + +
+

ぴったり20秒当てゲーム

+

5回チャレンジして、最高得点を目指そう！

+
+ + +
+

+

+

残り回数: 5

+

累計ポイント: 0

+
+ +
+

ポイント表

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
差ポイント
ぴったり20秒15ポイント
0.5秒以内10ポイント
1秒以内8ポイント
2秒以内6ポイント
3秒以内4ポイント
5秒以内2ポイント
5秒超1ポイント
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..07229d0 --- /dev/null +++ b/script.js @@ -0,0 +1,78 @@ +let startTime; +let timerId; +let displayTimerId; +let gameEnded = false; +let totalPoints = 0; +let attemptsLeft = 5; + +document.getElementById("startButton").addEventListener("click", function() { + if (attemptsLeft > 0) { + startTime = new Date().getTime(); + document.getElementById("stopButton").disabled = false; + document.getElementById("startButton").disabled = true; + document.getElementById("timerDisplay").textContent = "タイマーが動いています...3秒経ったら消えます"; + document.getElementById("result").textContent = ""; + gameEnded = false; + + displayTimerId = setTimeout(() => { + document.getElementById("timerDisplay").textContent = ""; + }, 2000); + } else { + alert("ゲーム終了！リロードして新しいゲームを開始してください。"); + } +}); + +document.getElementById("stopButton").addEventListener("click", function() { + if (!gameEnded) { + clearTimeout(timerId); + clearTimeout(displayTimerId); + showResult(); + document.getElementById("startButton").disabled = false; + attemptsLeft--; + updateAttemptsDisplay(); + if (attemptsLeft === 0) { + document.getElementById("startButton").disabled = true; + alert("ゲーム終了！最終スコア: " + totalPoints); + } + } +}); + +function showResult() { + let currentTime = new Date().getTime(); + let elapsedTime = ((currentTime - startTime) / 1000).toFixed(2); + let difference = Math.abs(elapsedTime - 20).toFixed(2); + + let points = calculatePoints(difference); + totalPoints += points; + + let resultMessage = `${elapsedTime}秒でストップしました。\n`; + resultMessage += `目標との差: ${difference}秒\n`; + resultMessage += `獲得ポイント: ${points}`; + + if (difference == 0) { + totalPoints += 5; // ぴったり30秒の場合、追加で15ポイント + resultMessage = "おめでとう！ちょうど30秒です！\n" + resultMessage; + } else if (elapsedTime > 30) { + resultMessage += "\n30秒を超えましたが、よく頑張りました！"; + } + + document.getElementById("result").textContent = resultMessage; + document.getElementById("stopButton").disabled = true; + document.getElementById("totalPoints").textContent = `累計ポイント: ${totalPoints}`; + gameEnded = true; +} + +function calculatePoints(difference) { + if (difference == 0) return 15; + if (difference <= 0.5) return 10; + if (difference <= 1) return 8; + if (difference <= 2) return 6; + if (difference <= 3) return 4; + if (difference <= 5) return 2; + return 1; +} + +function updateAttemptsDisplay() { + document.getElementById("attemptsLeft").textContent = `残り回数: ${attemptsLeft}`; +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..1600bb0 --- /dev/null +++ b/style.css @@ -0,0 +1,98 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + background-color: #f0f0f0; +} + +.game-container { + max-width: 600px; + margin: 0 auto; + background-color: white; + border-radius: 10px; + padding: 20px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); +} + +h1 { + color: #333; + text-align: center; +} + +.controls { + text-align: center; + margin-bottom: 20px; +} + +button { + margin: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + transition: background-color 0.3s; +} + +button:hover { + background-color: #45a049; +} + +button:disabled { + background-color: #cccccc; + cursor: not-allowed; +} + +#timerDisplay, #result, #attemptsLeft, #totalPoints { + text-align: center; + font-size: 18px; + margin: 10px 0; +} + +.score-board { + position: fixed; + top: 20px; + right: 20px; + background-color: white; + border-radius: 10px; + padding: 15px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + max-width: 250px; +} + +.score-board h2 { + margin-top: 0; + color: #4CAF50; + font-size: 18px; +} + +table { + width: 100%; + border-collapse: collapse; + font-size: 14px; +} + +th, td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; +} + +th { + background-color: #4CAF50; + color: white; +} + +tr:nth-child(even) { + background-color: #f2f2f2; +} + +.game-introduction { + font-size: 18px; + color: #333; + text-align: center; + margin-bottom: 20px; +} +