你可能走不出的迷宫
https://www.bilibili.com/video/BV1d8411y7ys/?spm_id_from=333.999.0.0
迷宫游戏的网页应用,使用 HTML、CSS 和 JavaScript 实现。以下是程序的主要部分的解释:
-
HTML 结构:
<!DOCTYPE html>
: 定义文档类型和版本。<html lang="en">
: HTML 根元素,指定文档语言为英语。<head>
: 包含文档的元信息和引用的外部资源。<meta charset="UTF-8">
: 指定文档使用 UTF-8 字符集。<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 设置视口的大小和缩放。<title>迷宫游戏</title>
: 设置网页标题。<style>
: 包含内部样式表,定义页面的样式。
<body>
: 包含页面的实际内容。
-
CSS 样式:
- 定义了样式规则,包括整体的样式、墙的样式、路的样式、玩家的样式、和一些控制按钮的样式。
- 使用 CSS Grid 布局创建了一个网格,用于显示迷宫和玩家。
-
JavaScript 代码:
- 在
<script>
标签中包含了 JavaScript 代码。 - 使用
createMaze
函数动态生成迷宫,根据难度和随机性生成墙和通道。 drawMaze
函数用于绘制迷宫和玩家的位置。movePlayer
函数处理玩家的移动,根据按键方向判断是否可以移动,并更新玩家的位置。- 提供了开始游戏、重新开始游戏、选择难度的按钮,以及显示时间的定时器。
- 在
-
游戏逻辑:
- 玩家使用方向键控制角色移动,目标是走出迷宫。
- 迷宫的墙和通道是随机生成的,通过设置入口和出口确保可通关。
- 游戏中提供了开始游戏、重新开始游戏、选择难度的功能。
- 在玩家成功走出迷宫时,会弹出提示框显示用时。
-
事件监听:
- 使用事件监听器处理按键事件,实现玩家角色的移动。
- 按钮点击事件监听器用于开始游戏、重新开始游戏、选择难度。
-
默认启动游戏:
- 在文档加载完成后,默认启动游戏。
这个程序实现了一个简单的迷宫游戏,玩家通过方向键控制角色走出迷宫,游戏提供了选择难度和计时功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>迷宫游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.game-container {
display: grid;
grid-template-columns: repeat(var(--cols, 10), 30px);
grid-template-rows: repeat(var(--rows, 10), 30px);
gap: 2px;
margin: 20px auto;
}
/* 墙的样式 */
.wall {
width: 30px;
height: 30px;
background-color: #ff0000; /* 墙的颜色(红色) */
border: 2px dashed #777; /* 虚线边框样式 */
}
/* 路的样式 */
.cell {
width: 30px;
height: 30px;
background-color: #fff; /* 路的颜色 */
border: 1px solid #000; /* 实线边框样式 */
}
/* 玩家的样式 */
.player {
background-color: #00f; /* 玩家的颜色,可以根据需要更改 */
}
.controls {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
#timer {
margin-top: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="game-container" id="game-container">
<!-- 迷宫单元格将通过 JavaScript 动态生成 -->
</div>
<div class="controls">
<button id="start-button">开始游戏</button>
<button id="reset-button">重新开始</button>
<label for="difficulty-select">选择难度:</label>
<select id="difficulty-select">
<option value="easy">简单</option>
<option value="medium">中等</option>
<option value="hard">困难</option>
</select>
<div id="timer">时间:0秒</div>
</div>
<script>
const gameContainer = document.getElementById('game-container');
const startButton = document.getElementById('start-button');
const resetButton = document.getElementById('reset-button');
const difficultySelect = document.getElementById('difficulty-select');
const timer = document.getElementById('timer');
let rows = 10; // 初始行数
let cols = 10; // 初始列数
let maze = [];
let playerPosition = { x: 0, y: 0 };
let timerInterval;
let seconds = 0;
function createMaze(rows, cols) {
gameContainer.style.setProperty('--rows', rows);
gameContainer.style.setProperty('--cols', cols);
maze = Array.from({ length: rows }, () => Array(cols).fill(1));
// 随机生成迷宫,这里可以使用你喜欢的复杂算法
// 此处简化为随机生成墙
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
if (Math.random() < 0.3) {
maze[i][j] = 0; // 0 表示墙
}
}
}
// 设置入口和出口
maze[0][0] = 1; // 入口
maze[rows - 1][cols - 1] = 1; // 出口
}
function drawMaze() {
gameContainer.innerHTML = '';
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
const cell = document.createElement('div');
cell.className = maze[i][j] ? 'cell' : 'wall';
if (i === playerPosition.x && j === playerPosition.y) {
cell.classList.add('player'); // 添加玩家的样式
}
gameContainer.appendChild(cell);
}
}
}
function movePlayer(event) {
if (event.key === 'ArrowRight' && playerPosition.y < cols - 1 && maze[playerPosition.x][playerPosition.y + 1] !== 0) {
playerPosition.y++;
} else if (event.key === 'ArrowLeft' && playerPosition.y > 0 && maze[playerPosition.x][playerPosition.y - 1] !== 0) {
playerPosition.y--;
} else if (event.key === 'ArrowDown' && playerPosition.x < rows - 1 && maze[playerPosition.x + 1][playerPosition.y] !== 0) {
playerPosition.x++;
} else if (event.key === 'ArrowUp' && playerPosition.x > 0 && maze[playerPosition.x - 1][playerPosition.y] !== 0) {
playerPosition.x--;
}
if (playerPosition.x === rows - 1 && playerPosition.y === cols - 1) {
clearInterval(timerInterval);
alert(`恭喜!你走出了迷宫,用时 ${seconds} 秒`);
}
drawMaze();
}
function startGame() {
seconds = 0;
timer.textContent = '时间:0秒';
clearInterval(timerInterval);
timerInterval = setInterval(() => {
seconds++;
timer.textContent = `时间:${seconds}秒`;
}, 1000);
createMaze(rows, cols);
drawMaze();
playerPosition = { x: 0, y: 0 };
window.addEventListener('keydown', movePlayer);
}
function resetGame() {
clearInterval(timerInterval);
timer.textContent = '时间:0秒';
gameContainer.innerHTML = '';
}
startButton.addEventListener('click', startGame);
resetButton.addEventListener('click', resetGame);
difficultySelect.addEventListener('change', () => {
const difficulty = difficultySelect.value;
switch (difficulty) {
case 'easy':
rows = 10;
cols = 10;
break;
case 'medium':
rows = 15;
cols = 15;
break;
case 'hard':
rows = 20;
cols = 20;
break;
}
resetGame();
});
// 默认启动游戏
startGame();
</script>
</body>
</html>