ワイヤーフレームダンジョンは、指定された広さのランダムな迷路を生成し、その中でプレイヤーが敵を避けながら出口を探すゲームです。以下が実際のコード例です。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ワイヤーフレームダンジョン</title>
<style>
body {
background: black;
color: white;
font-family: sans-serif;
text-align: center;
}
#maze {
width: 600px;
margin: 0 auto;
border: 2px solid white;
}
#player {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
.enemy {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: yellow;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>ワイヤーフレームダンジョン</h1>
<div id="maze"></div>
<script>
// 迷路のサイズを定義
const width = 20;
const height = 20;
// 迷路の壁の状態をランダムに生成
let maze = '';
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (y === 0 || x === 0 || y === height - 1 || x === width - 1) {
maze += '#';
} else if (Math.random() > 0.7) {
maze += '#';
} else {
maze += ' ';
}
}
maze += '\n';
}
// 迷路を表示
const mazeElement = document.getElementById('maze');
mazeElement.innerHTML = maze.replace(/ /g, '<span> </span>').replace(/#/g, '<span>#</span>');
const wallElements = mazeElement.querySelectorAll('span');
const playerElement = document.createElement('div');
playerElement.id = 'player';
mazeElement.appendChild(playerElement);
let playerX = 0;
let playerY = 0;
// 敵をランダムに配置
const numEnemies = Math.floor(Math.sqrt(width * height));
const enemyElements = [];
for (let i = 0; i < numEnemies; i++) {
const enemyElement = document.createElement('div');
enemyElement.className = 'enemy';
mazeElement.appendChild(enemyElement);
enemyElements.push(enemyElement);
let enemyX;
let enemyY;
do {
enemyX = Math.floor(Math.random() * (width - 2)) + 1;
enemyY = Math.floor(Math.random() * (height - 2)) + 1;
} while (maze[enemyY * (width + 1) + enemyX] !== ' ');
enemyElement.style.top = enemyY * 20 + 'px';
enemyElement.style.left = enemyX * 20 + 'px';
}
// 上下左右キーでプレイヤーを移動
document.addEventListener('keydown', event => {
const oldX = playerX;
const oldY = playerY;
switch (event.key) {
case 'ArrowUp':
playerY--;
break;
case 'ArrowDown':
playerY++;
break;
case 'ArrowLeft':
playerX--;
break;
case 'ArrowRight':
playerX++;
break;
}
if (maze[(playerY + 1) * (width + 1) + playerX + 1] === ' ') {
playerElement.style.top = playerY * 20 + 'px';
playerElement.style.left = playerX * 20 + 'px';
} else {
playerX = oldX;
playerY = oldY;
}
// プレイヤーと敵の当たり判定
enemyElements.forEach(enemyElement => {
const delta = Math.sqrt(Math.pow(parseInt(playerElement.style.top) - parseInt(enemyElement.style.top), 2) + Math.pow(parseInt(playerElement.style.left) - parseInt(enemyElement.style.left), 2));
if (delta < 40) {
alert('あなたは妖怪にやられました');
showToast("再読み込みしてください");
}
});
// 出口に到達したかどうかチェック
if (playerX === width - 1 && playerY === height - 1) {
alert('おめでとうございます！\n地面が大地震のように揺れ、あなたは出口から脱出しました！');
showToast("再読み込みしてください");
}
});
</script>
</body>
</html>
```
コメントを読んで理解しながら実装していただけるといいと思います。ジョークとして、「妖怪にやられた」というメッセージを表示する部分を「スパイダー何かが落ちてきた！」というメッセージに変えることもできます。「地面が大地震のように揺れ、あなた・・・」の部分も自由に変更してください。
