タイマー: 100:00
賞金: 0円
賞金: 0円
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逃走ゲーム</title>
<style>
@keyframes moveHunter {
from { transform: translate(0, 0); }
to { transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)); }
}
@keyframes shake {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-5px, 0); }
50% { transform: translate(5px, 0); }
75% { transform: translate(-5px, 0); }
}
@keyframes blink {
50% { opacity: 0; }
}
.blink {
animation: blink 1s step-start infinite;
}
</style>
</head>
<body>
<div style="border: 2px solid #000; width: 400px; height: 400px; position: relative;">
<canvas id="gameCanvas" width="400" height="400" style="background-color: #e0f7fa;"></canvas>
<div id="scoreboard" style="position: absolute; top: 10px; right: 10px; font-size: 16px;">
タイマー: <span id="timer">100:00</span> <br>
賞金: <span id="prize">0</span>円
</div>
<button onclick="startGame()" style="position: absolute; bottom: 10px; left: 10px;">スタート 🎬</button>
<button onclick="resetGame()" style="position: absolute; bottom: 10px; right: 10px;">リセット 🔄</button>
</div>
<div style="text-align: center; margin-top: 20px;">
<button onclick="moveEscapee('up')" style="font-size: 24px;">⬆️</button><br>
<button onclick="moveEscapee('left')" style="font-size: 24px;">⬅️</button>
<button onclick="moveEscapee('right')" style="font-size: 24px;">➡️</button><br>
<button onclick="moveEscapee('down')" style="font-size: 24px;">⬇️</button>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let escapee = { x: 200, y: 200 };
let hunter = { x: 50, y: 50, speed: 1.5 };
let timer = 10000; // 10000 tenths of a second (100 seconds)
let prize = 0;
let gameInterval;
function drawCharacter(x, y, emoji) {
ctx.clearRect(x - 20, y - 20, 40, 40); // clear previous position
ctx.font = '30px Arial';
ctx.fillText(emoji, x - 15, y + 10);
}
function updateGame() {
if (detectCollision()) {
clearInterval(gameInterval);
ctx.font = '40px Arial';
ctx.fillText("ゲームオーバー!", 100, 180);
drawCharacter(hunter.x, hunter.y, '🛑');
} else {
drawCharacter(escapee.x, escapee.y, '😀');
drawCharacter(hunter.x, hunter.y, '👹');
timer--;
document.getElementById('timer').innerText = ('0' + Math.floor(timer / 100)).slice(-2) + ':' + ('0' + (timer % 100)).slice(-2);
prize += 2; // 1 second = 200 yen, 0.01 second = 2 yen
document.getElementById('prize').innerText = prize.toLocaleString();
if (timer <= 0) {
clearInterval(gameInterval);
ctx.font = '40px Arial';
ctx.fillText("賞金獲得!", 120, 180);
return;
}
if (hunter.x < escapee.x) hunter.x += hunter.speed;
else if (hunter.x > escapee.x) hunter.x -= hunter.speed;
if (hunter.y < escapee.y) hunter.y += hunter.speed;
else if (hunter.y > escapee.y) hunter.y -= hunter.speed;
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
function detectCollision() {
let dist = Math.hypot(escapee.x - hunter.x, escapee.y - hunter.y);
return dist < 20;
}
function startGame() {
clearInterval(gameInterval);
ctx.clearRect(0, 0, canvas.width, canvas.height);
gameInterval = setInterval(updateGame, 10);
}
function resetGame() {
clearInterval(gameInterval);
timer = 10000;
prize = 0;
document.getElementById('timer').innerText = "100:00";
document.getElementById('prize').innerText = "0";
escapee = { x: 200, y: 200 };
hunter = { x: 50, y: 50, speed: 1.5 };
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function moveEscapee(direction) {
switch (direction) {
case 'up':
escapee.y = Math.max(20, escapee.y - 10);
break;
case 'down':
escapee.y = Math.min(380, escapee.y + 10);
break;
case 'left':
escapee.x = Math.max(20, escapee.x - 10);
break;
case 'right':
escapee.x = Math.min(380, escapee.x + 10);
break;
}
drawCharacter(escapee.x, escapee.y, '😀');
}
drawCharacter(escapee.x, escapee.y, '😀');
drawCharacter(hunter.x, hunter.y, '👹');
</script>
</body>
</html>
```