👔
🍳
👹
👿
👿
```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>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f8ff;
margin: 0;
}
#gameArea {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
border: 2px solid #000;
background-color: #fff;
}
.character, .demon {
position: absolute;
transition: transform 0.5s;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.hit {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div id="gameArea">
<div id="player" class="character" style="left: 20px; top: 350px;">👔</div>
<div id="eggCharacter" class="character" style="left: 50px; top: 350px;">🍳</div>
<div id="demon" class="demon" style="left: 200px; top: 0;">👹</div>
<div id="demonA" class="demon" style="left: 250px; top: 0;">👿</div>
<div id="demonB" class="demon" style="left: 150px; top: 0;">👿</div>
</div>
<div id="message" style="margin-top: 20px; font-size: 1.2em;"></div>
<script>
const player = document.getElementById("player");
const eggCharacter = document.getElementById("eggCharacter");
const demons = document.querySelectorAll(".demon");
const messageDiv = document.getElementById("message");
let gameRunning = true;
function movePlayer(dx, dy) {
const newLeft = Math.min(Math.max(parseInt(player.style.left) + dx, 0), 380);
const newTop = Math.min(Math.max(parseInt(player.style.top) + dy, 0), 380);
player.style.left = `${newLeft}px`;
player.style.top = `${newTop}px`;
eggCharacter.style.left = `${newLeft + 30}px`;
eggCharacter.style.top = `${newTop}px`;
checkCollision();
}
function moveDemons() {
demons.forEach(demon => {
const newLeft = Math.min(Math.max(parseInt(demon.style.left) + Math.random() * 40 - 20, 0), 380);
const newTop = Math.min(Math.max(parseInt(demon.style.top) + Math.random() * 40 - 20, 0), 380);
demon.style.left = `${newLeft}px`;
demon.style.top = `${newTop}px`;
});
if (gameRunning) {
setTimeout(moveDemons, 1000);
}
}
function checkCollision() {
const playerRect = player.getBoundingClientRect();
demons.forEach(demon => {
const demonRect = demon.getBoundingClientRect();
if (!(playerRect.right < demonRect.left ||
playerRect.left > demonRect.right ||
playerRect.bottom < demonRect.top ||
playerRect.top > demonRect.bottom)) {
gameOver();
}
});
if (parseInt(player.style.top) <= 0) {
gameClear();
}
}
function gameClear() {
messageDiv.innerText = "🎉クリア！";
gameRunning = false;
}
function gameOver() {
messageDiv.innerText = "😱ゲームオーバー！";
gameRunning = false;
player.classList.add('hit');
eggCharacter.classList.add('hit');
}
document.body.addEventListener("click", (e) => {
if (!gameRunning) return;
const rect = gameArea.getBoundingClientRect();
const targetX = e.clientX - rect.left;
const targetY = e.clientY - rect.top;
const deltaX = targetX - parseInt(player.style.left);
const deltaY = targetY - parseInt(player.style.top);
movePlayer(deltaX, deltaY);
});
messageDiv.innerText = "🕹️ゲームスタート！画面をタップして方向を指示して、鬼から逃げ切ろう！";
moveDemons();
</script>
</body>
</html>
```