テキストベースのローグライク

```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 move {
    0% { transform: translateX(0); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}
@keyframes click {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; position: relative; border: 2px solid #000; overflow: hidden;">
    <div id="gameArea" style="width: 100%; height: 100%; background-color: #f0f0f0; position: relative;"></div>
    <script>
        const gameArea = document.getElementById('gameArea');
        const rows = 10;
        const cols = 10;
        const player = '😊';
        const enemy = '👾';
        const treasure = '💎';
        const obstacles = ['🌲', '🌵', '🌴'];
        let playerPos = { x: 0, y: 0 };
        
        function createGrid() {
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    const cell = document.createElement('div');
                    cell.style.width = '10%';
                    cell.style.height = '10%';
                    cell.style.boxSizing = 'border-box';
                    cell.style.float = 'left';
                    cell.style.display = 'flex';
                    cell.style.alignItems = 'center';
                    cell.style.justifyContent = 'center';
                    cell.id = `cell-${i}-${j}`;
                    gameArea.appendChild(cell);
                }
            }
        }

        function placeElement(emoji, x, y) {
            const cell = document.getElementById(`cell-${x}-${y}`);
            cell.textContent = emoji;
            cell.style.fontSize = '24px';
        }

        function movePlayer(dx, dy) {
            const newX = playerPos.x + dx;
            const newY = playerPos.y + dy;
            if (newX < 0 || newY < 0 || newX >= rows || newY >= cols) return;
            placeElement('', playerPos.x, playerPos.y);
            playerPos = { x: newX, y: newY };
            placeElement(player, playerPos.x, playerPos.y);
            document.getElementById(`cell-${newX}-${newY}`).style.animation = 'move 0.5s';
            checkTreasure(newX, newY);
        }

        function checkTreasure(x, y) {
            if (gameArea.querySelector(`#cell-${x}-${y}`).textContent === treasure) {
                alert('You found the treasure! 🎉');
                localStorage.setItem('foundTreasure', true);
            }
        }

        function handleClick(event) {
            const rect = gameArea.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            if (x < rect.width / 2) movePlayer(-1, 0);
            else movePlayer(1, 0);
            if (y < rect.height / 2) movePlayer(0, -1);
            else movePlayer(0, 1);
            gameArea.style.animation = 'click 0.3s';
        }

        createGrid();
        placeElement(player, playerPos.x, playerPos.y);
        placeElement(enemy, 9, 9);
        placeElement(treasure, 5, 5);
        obstacles.forEach((obs, i) => placeElement(obs, i + 1, i + 1));

        gameArea.addEventListener('click', handleClick);
    </script>
</div>
</body>
</html>
```