以下がHTML/CSS/JavaScriptで実装した迷路ゲームのコードです。このコードは、evalや他のサイトに遷移させるようなセキュリティ脆弱性はありませんので、ご安心ください。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>迷路ゲーム</title>
<style>
#maze {
border: 1px solid black;
display: inline-block;
}
.row {
display: block;
font-size: 0;
}
.cell {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid black;
background-color: white;
}
.wall {
background-color: black;
}
.start {
background-color: green;
}
.end {
background-color: red;
}
</style>
</head>
<body>
<h1>迷路ゲーム</h1>
<div id="maze"></div>
<script>
// 迷路の定義
const maze = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
[1, 0, 1, 0, 1, 0, 1, 1, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 0, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 1, 1, 1, 1, 0, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
];
// スタート・ゴールの定義
const start = { x: 1, y: 1 };
const goal = { x: 8, y: 8 };
// 迷路を描画する関数
function drawMaze() {
const mazeDiv = document.getElementById("maze");
let mazeHTML = "";
for (let i = 0; i < maze.length; i++) {
mazeHTML += "<div class='row'>";
for (let j = 0; j < maze[i].length; j++) {
let cellClass = "cell";
if (maze[i][j] === 1) {
cellClass += " wall";
}
if (i === start.y && j === start.x) {
cellClass += " start";
}
if (i === goal.y && j === goal.x) {
cellClass += " end";
}
mazeHTML += "<div class='" + cellClass + "'></div>";
}
mazeHTML += "</div>";
}
mazeDiv.innerHTML = mazeHTML;
}
drawMaze();
// ゲーム状態を保持するオブジェクト
const gameState = {
player: start,
isGameClear: false,
};
// プレイヤーを描画する関数
function drawPlayer() {
const playerCell = document.querySelector(
".row:nth-child(" +
(gameState.player.y + 1) +
") .cell:nth-child(" +
(gameState.player.x + 1) +
")"
);
playerCell.classList.add("player");
}
drawPlayer();
// キー入力を受け取る関数
function handleKeydown(event) {
if (gameState.isGameClear) {
return;
}
const playerCell = document.querySelector(
".row:nth-child(" +
(gameState.player.y + 1) +
") .cell:nth-child(" +
(gameState.player.x + 1) +
")"
);
playerCell.classList.remove("player");
switch (event.key) {
case "ArrowUp":
if (maze[gameState.player.y - 1][gameState.player.x] !== 1) {
gameState.player.y--;
}
break;
case "ArrowDown":
if (maze[gameState.player.y + 1][gameState.player.x] !== 1) {
gameState.player.y++;
}
break;
case "ArrowLeft":
if (maze[gameState.player.y][gameState.player.x - 1] !== 1) {
gameState.player.x--;
}
break;
case "ArrowRight":
if (maze[gameState.player.y][gameState.player.x + 1] !== 1) {
gameState.player.x++;
}
break;
}
drawPlayer();
if (gameState.player.x === goal.x && gameState.player.y === goal.y) {
gameState.isGameClear = true;
setTimeout(function () {
alert("おめでとう！ゲームクリア！");
}, 100);
}
}
document.addEventListener("keydown", handleKeydown);
</script>
</body>
</html>
```
この迷路ゲームは、HTML要素であるdivを使って迷路を描画しています。CSSで背景色を変えることで、迷路の壁やスタート・ゴールを表現しています。JavaScriptで、プレイヤーの位置を表すオブジェクトや、ゲーム状態を表すオブジェクトを定義しています。そして、キー入力を受け取ることで、プレイヤーの位置を変更しています。ゴールに到達するとアラートが表示されます。
このゲームで使われている迷路は、適当に作成されたサンプルですが、もし本当の迷路を使う場合は、サイズや構造をJavaScriptのコードで動的に生成する必要があります。また、プレイヤーが迷路の外に出てしまう場合や、ゲームのリセット機能、スコア機能なども追加するとより充実したゲームになるでしょう。
