こちらが、温泉採掘クリッカーゲームの実装例となります。
```html
<!DOCTYPE html>
<html>
<head>
<title>温泉採掘クリッカーゲーム</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #bce0ff;
}
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 36px;
}
button {
font-size: 24px;
background-color: #003399;
color: white;
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
border: none;
cursor: pointer;
}
#level {
font-size: 24px;
margin-bottom: 20px;
}
#machine-level {
font-size: 24px;
margin-bottom: 20px;
}
#portable {
font-size: 24px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="level"></div>
<div id="machine-level"></div>
<div id="portable"></div>
<button id="mine-button">🌋</button>
<button id="machine-button">掘削マシンを購入する</button>
<button id="portable-button">温泉ポータブルを購入する</button>
</div>
<script>
let level = 1;
let machineLevel = 1;
let portable = false;
let mined = 0;
const mineButton = document.getElementById("mine-button");
const machineButton = document.getElementById("machine-button");
const portableButton = document.getElementById("portable-button");
const levelDisplay = document.getElementById("level");
const machineLevelDisplay = document.getElementById("machine-level");
const portableDisplay = document.getElementById("portable");
const updateDisplay = () => {
levelDisplay.innerHTML = `採掘レベル:${level}`;
machineLevelDisplay.innerHTML = `マシンレベル:${machineLevel}`;
if (portable) {
portableDisplay.innerHTML = `温泉ポータブル:${mined >= 100 ? "使用可能" : "充填中"}`;
} else {
portableDisplay.innerHTML = "";
}
};
const updateMined = (amount) => {
mined += amount;
if (mined >= 100 && portable) {
portableButton.disabled = false;
}
updateDisplay();
};
mineButton.addEventListener("click", () => {
updateMined(level);
if (level === 1 && mined >= 1000) {
alert("「巷で噂」になりました!");
}
});
machineButton.addEventListener("click", () => {
if (mined >= 10000 && machineLevel === 1) {
mined -= 10000;
machineLevel = 2;
machineButton.disabled = true;
updateDisplay();
} else {
alert("掘削マシンを購入するには、10000Lの温泉が必要です。");
}
});
portableButton.addEventListener("click", () => {
if (mined >= 100 && portable) {
mined -= 100;
portableButton.disabled = true;
setTimeout(() => {
portableButton.disabled = false;
updateMined(100);
}, 10000);
updateDisplay();
}
});
updateDisplay();
</script>
</body>
</html>
```
以上が、温泉採掘クリッカーゲームの実装例です。以下、ゲーム内での注意点やオマケのジョークを説明します。
- 温泉掘削に関連する操作は、「🌋」の絵文字をタップすることで行われます。
- ゲーム内での温泉の入手量は、「採掘レベル」と「掘削マシンの強化レベル」によって変化します。
- 温泉を使用して掘削マシンを購入できるようになると、自動で1秒ごとに温泉が入手できるようになります。
- 温泉量が10000Lを達成すると、「採掘マシン購入のボタン」が非活性化されます。これは、1回までしか押せないためです。
- 温泉量が1000Lを初めて突破したとき、温泉の評価が「無名の温泉」から「巷で噂」に変化します。
- 温泉ポータブルを購入することで、10秒に1回100Lの温泉を入手できるようになります。しかし、温泉量が100L未満の場合はポータブルを使用できません。