😊
😂
😭
🥰
🥸
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-15px); }
75% { transform: translateX(15px); }
}
</style>
</head>
<body>
<div id="gameCanvas" style="width: 400px; height: 400px; position: relative; background-color: #f0f0f0; overflow: hidden; border: 2px solid #000;">
<div id="player" style="position: absolute; top: 180px; left: 180px; font-size: 2em; user-select: none;">😊</div>
<div id="npc1" style="position: absolute; top: 50px; left: 50px; font-size: 2em; user-select: none;">😂</div>
<div id="npc2" style="position: absolute; top: 300px; left: 300px; font-size: 2em; user-select: none;">😭</div>
<div id="npc3" style="position: absolute; top: 50px; left: 300px; font-size: 2em; user-select: none;">🥰</div>
<div id="hunter" style="position: absolute; top: 300px; left: 50px; font-size: 2em; user-select: none;">🥸</div>
<div style="position: absolute; bottom: 10px; left: 170px;">
<input type="button" value="⬅️" onclick="movePlayer('left')" style="font-size: 1.5em;">
<input type="button" value="⬆️" onclick="movePlayer('up')" style="font-size: 1.5em;">
<input type="button" value="⬇️" onclick="movePlayer('down')" style="font-size: 1.5em;">
<input type="button" value="➡️" onclick="movePlayer('right')" style="font-size: 1.5em;">
</div>
</div>
<script>
const player = document.getElementById('player');
const hunter = document.getElementById('hunter');
const npcs = [document.getElementById('npc1'), document.getElementById('npc2'), document.getElementById('npc3')];
const gameCanvas = document.getElementById('gameCanvas');
function movePlayer(direction) {
const step = 20;
switch (direction) {
case 'left':
player.style.left = `${Math.max(0, player.offsetLeft - step)}px`;
break;
case 'up':
player.style.top = `${Math.max(0, player.offsetTop - step)}px`;
break;
case 'down':
player.style.top = `${Math.min(gameCanvas.clientHeight - player.clientHeight, player.offsetTop + step)}px`;
break;
case 'right':
player.style.left = `${Math.min(gameCanvas.clientWidth - player.clientWidth, player.offsetLeft + step)}px`;
break;
}
checkCollision();
}
function checkCollision() {
const playerRect = player.getBoundingClientRect();
const hunterRect = hunter.getBoundingClientRect();
if (playerRect.intersects(hunterRect)) {
player.style.animation = "shake 0.5s";
setTimeout(() => player.style.display = "none", 500);
}
npcs.forEach(npc => {
const npcRect = npc.getBoundingClientRect();
if (playerRect.intersects(npcRect)) {
npc.style.animation = "shake 0.5s";
setTimeout(() => npc.style.display = "none", 500);
}
});
}
setInterval(() => {
const step = 10;
hunter.style.left = `${Math.max(0, Math.min(gameCanvas.clientWidth - hunter.clientWidth, hunter.offsetLeft + (Math.random() - 0.5) * step))}px`;
hunter.style.top = `${Math.max(0, Math.min(gameCanvas.clientHeight - hunter.clientHeight, hunter.offsetTop + (Math.random() - 0.5) * step))}px`;
npcs.forEach(npc => {
npc.style.left = `${Math.max(0, Math.min(gameCanvas.clientWidth - npc.clientWidth, npc.offsetLeft + (Math.random() - 0.5) * step))}px`;
npc.style.top = `${Math.max(0, Math.min(gameCanvas.clientHeight - npc.clientHeight, npc.offsetTop + (Math.random() - 0.5) * step))}px`;
});
checkCollision();
}, 500);
function intersects(rect1, rect2) {
return !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
}
DOMRect.prototype.intersects = function(rect) {
return intersects(this, rect);
}
</script>
</body>
</html>
```