首页 前端知识 扫雷小游戏制作教程:用HTML5和JavaScript打造经典游戏

扫雷小游戏制作教程:用HTML5和JavaScript打造经典游戏

2024-05-29 10:05:13 前端知识 前端哥 183 143 我要收藏

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

  • 扫雷小游戏制作教程:用HTML5和JavaScript打造经典游戏
    • 体验地址
    • 准备工作
    • 创建HTML结构
    • 添加CSS样式
    • 编写JavaScript逻辑
    • 测试游戏
    • 全部代码
    • 结语
    • 往期精彩回顾

扫雷小游戏制作教程:用HTML5和JavaScript打造经典游戏

在这篇文章中,我们将一起学习如何使用HTML5和JavaScript来制作一个经典的扫雷小游戏。通过这个教程,你将了解如何创建游戏界面、处理用户交互以及实现游戏逻辑。即使你是编程新手,也能跟随步骤完成这个项目。

体验地址

洛可可白⚡️扫雷
在这里插入图片描述

准备工作

首先,确保你的计算机上安装了文本编辑器,如Notepad++、Sublime Text或Visual Studio Code。这些工具将帮助你编写和编辑代码。

创建HTML结构

打开你的文本编辑器,创建一个新的HTML文件,并输入以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>洛可可白扫雷</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <div class="bigBox">
        <div id="controls">
            <form>
                <label for="level">难度级别:</label>
                <select id="level">
                    <option value="easy">简单</option>
                    <option value="medium">中等</option>
                    <option value="hard">困难</option>
                </select>
                <button id="reset">重新开始</button>
            </form>
        </div>

        <table id="board"></table>
    </div>
    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

这是我们游戏的基本结构。<head>部分包含了页面的元数据和样式定义,<body>部分则是游戏的主要内容。

添加CSS样式

<style>标签内,我们将添加一些CSS样式来美化我们的扫雷游戏。这包括游戏布局、控制面板和表格样式。

/* 游戏布局样式 */
.bigBox {
    background-color: rgb(163, 159, 159);
    width: 40%;
    margin: 5% auto;
    text-align: center;
    padding: 20px;
}

#reset {
    width: 100px;
    font-size: 15px;
}

table {
    border-collapse: collapse;
    margin: 30px auto;
}

td {
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
}

button {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #333;
    border: none;
}

编写JavaScript逻辑

现在,我们将在<script>标签内添加JavaScript代码,这是游戏的核心部分。我们将创建游戏参数配置、初始化游戏、处理用户点击事件、检查游戏胜利条件等。

// 游戏参数配置
const config = {
    easy: {
        rows: 8,
        cols: 8,
        mines: 10,
    },
    medium: {
        rows: 10,
        cols: 10,
        mines: 20,
    },
    hard: {
        rows: 12,
        cols: 12,
        mines: 30,
    },
};

// 初始化游戏
function init() {
    // ...(省略代码以节省空间,详见原代码)
}

// 用户点击格子的处理函数
function clickCell(row, col) {
    // ...(省略代码以节省空间,详见原代码)
}

// 更新地雷数目显示
function updateMinesCount() {
    // ...(省略代码以节省空间,详见原代码)
}

// 显示游戏结束
function showGameOver(win) {
    // ...(省略代码以节省空间,详见原代码)
}

// 检查游戏是否胜利
function checkWin() {
    // ...(省略代码以节省空间,详见原代码)
}

// 初始化游戏
init();

在这个脚本中,我们首先定义了游戏的难度级别配置,然后创建了初始化游戏的函数init。我们还定义了处理用户点击事件的函数clickCell,更新地雷数目的函数updateMinesCount,显示游戏结束的函数showGameOver,以及检查游戏胜利条件的函数checkWin。最后,我们调用init函数来初始化游戏。

测试游戏

保存你的HTML文件,并在浏览器中打开它。你应该能看到一个扫雷游戏的界面。选择难度级别后,点击格子开始游戏。如果你踩到地雷,游戏会结束;如果你成功避开所有地雷,恭喜你,你赢了!

全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白⚡️扫雷</title>
    <style>
      /* 游戏布局样式 */
      .bigBox {
        background-color: rgb(163, 159, 159);
        width: 40%;
        margin: 5% auto;
        text-align: center;
        padding: 20px;
      }

      #reset {
        width: 100px;
        font-size: 15px;
      }

      table {
        border-collapse: collapse;
        margin: 30px auto;
      }

      td {
        width: 30px;
        height: 30px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #ccc;
      }

      button {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        background-color: #333;
        border: none;
      }

      /* 控制面板样式 */
      #controls {
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <div class="bigBox">
      <div id="controls">
        <form>
          <label for="level">难度级别:</label>
          <select id="level">
            <option value="easy">简单</option>
            <option value="medium">中等</option>
            <option value="hard">困难</option>
          </select>
          <button id="reset">重新开始</button>
        </form>
      </div>

      <table id="board"></table>
    </div>
  </body>

  <script>
    // 游戏参数配置
    const config = {
      easy: {
        rows: 8,
        cols: 8,
        mines: 10,
      },
      medium: {
        rows: 10,
        cols: 10,
        mines: 20,
      },
      hard: {
        rows: 12,
        cols: 12,
        mines: 30,
      },
    };
    // 初始化游戏
    let board = document.getElementById("board");
    let level = document.getElementById("level");
    let reset = document.getElementById("reset");
    let cells = [];
    let gameover = false;
    let minesLeft = 0;
    let minesCount = 0;
    let rows, cols, mines;

    reset.addEventListener("click", init);

    level.addEventListener("change", function () {
      init();
    });

    function init() {
      // 初始化游戏参数
      let levelConfig = config[level.value];
      rows = levelConfig.rows;
      cols = levelConfig.cols;
      mines = levelConfig.mines;
      minesLeft = mines;
      minesCount = 0;
      gameover = false;
      // 初始化游戏布局
      board.innerHTML = "";
      cells = [];
      for (let i = 0; i < rows; i++) {
        let row = [];
        let tr = document.createElement("tr");
        for (let j = 0; j < cols; j++) {
          let td = document.createElement("td");
          let button = document.createElement("button");
          button.addEventListener("click", function () {
            if (!gameover) {
              clickCell(i, j);
            }
          });
          td.appendChild(button);
          tr.appendChild(td);
          row.push({ button: button, hasMine: false, revealed: false });
        }
        cells.push(row);
        board.appendChild(tr);
      }
      // 初始化地雷
      for (let i = 0; i < mines; i++) {
        let row, col;
        do {
          row = Math.floor(Math.random() * rows);
          col = Math.floor(Math.random() * cols);
        } while (cells[row][col].hasMine);
        cells[row][col].hasMine = true;
      }
      // 更新地雷数目显示
      updateMinesCount();
    }

    function clickCell(row, col) {
      let cell = cells[row][col];
      if (cell.revealed) {
        return;
      }
      if (cell.hasMine) {
        revealMines();
        showGameOver(false);
        return;
      }
      cell.revealed = true;
      cell.button.style.backgroundColor = "#ddd";
      let minesAround = countMinesAround(row, col);
      if (minesAround > 0) {
        cell.button.textContent = minesAround;
      } else {
        revealNeighbors(row, col);
      }
      if (checkWin()) {
        showGameOver(true);
      }
    }

    function revealNeighbors(row, col) {
      for (let i = row - 1; i <= row + 1; i++) {
        for (let j = col - 1; j <= col + 1; j++) {
          if (
            i >= 0 &&
            i < rows &&
            j >= 0 &&
            j < cols &&
            !(i == row && j == col)
          ) {
            clickCell(i, j);
          }
        }
      }
    }

    function countMinesAround(row, col) {
      let count = 0;
      for (let i = row - 1; i <= row + 1; i++) {
        for (let j = col - 1; j <= col + 1; j++) {
          if (i >= 0 && i < rows && j >= 0 && j < cols && cells[i][j].hasMine) {
            count++;
          }
        }
      }
      return count;
    }

    function revealMines() {
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          if (cells[i][j].hasMine) {
            cells[i][j].button.style.backgroundColor = "#f00";
          }
        }
      }
    }

    function updateMinesCount() {
      console.log("这是哈哈", minesLeft);
      // minesCountElem.textContent = minesLeft;
    }

    function showGameOver(win) {
      gameover = true;
      let message = win ? "You Win!" : "You Lose!";
      alert(message);
    }

    function checkWin() {
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          let cell = cells[i][j];
          if (!cell.hasMine && !cell.revealed) {
            return false;
          }
        }
      }
      return true;
    }

    init();
  </script>
</html>

结语

恭喜你,你已经成功创建了一个扫雷小游戏!这个教程涵盖了从创建基本的HTML结构到添加CSS样式,再到编写JavaScript交互逻辑的全过程。通过这个项目,你不仅学会了如何制作一个小游戏,还对前端开发有了基本的了解。随着你技能的提升,你可以尝试添加更多的功能,比如计时器、得分系统或者更复杂的游戏逻辑。祝你编程愉快!

如果对你有帮助,点赞、收藏、关注是我更新的动力!👋🌟🚀

往期精彩回顾

  1. 打造经典游戏:HTML5与CSS3实现俄罗斯方块
  • 文章浏览阅读1.1k次,点赞31次,收藏22次。
  1. 打造你的贪吃蛇游戏:HTML、CSS与JavaScript的完美结合
  • 文章浏览阅读858次,点赞24次,收藏9次。
  1. 打造你的HTML5打地鼠游戏:零基础入门教程
  • 文章浏览阅读729次,点赞16次,收藏25次。
  1. 入门指南:使用uni-app构建跨平台应用
  • 文章浏览阅读1.2k次,点赞29次,收藏13次。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9942.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!