如何用前端技术打造自己的2048游戏

news2024/11/19 18:26:17

部分数据来源：ChatGPT

2048游戏规则

        2048是一款数字益智类游戏，玩家需要通过合并数字方块来获得更高的分数。游戏的规则非常简单，只需要使用上下左右方向键移动数字方块，当两个相同数字方块碰撞时，会合并成一个数字方块。每次移动后，系统会在空白的方格随机生成一个数字方块，数字方块的大小为2的幂（即2、4、8、16...）。当游戏棋盘上没有空白方格时，游戏结束。

2048游戏使用教程

进入游戏界面后，玩家可以使用上下左右方向键来移动数字方块。每次移动后，系统都会在空白的方格随机生成一个数字方块。

当两个相同数字方块碰撞时，会合并成一个数字方块。例如，当有两个数字为2的方块相邻时，将它们合并后就会变成一个数字为4的方块。同样地，当有两个数字为4的方块相邻时，将它们合并后就会变成一个数字为8的方块，以此类推。

当游戏棋盘上没有空白方格时，游戏结束。此时，玩家可以选择重新开始游戏或退出游戏。

编程思路步骤

下面是2048游戏的编程思路步骤：

步骤一、获取页面元素

在开发2048游戏之前，首先需要获取所有相关的页面元素，如数字方块元素、开始游戏按钮、重置按钮、分数显示元素等，并将它们存储到变量中，以便后续使用。

步骤二、初始化游戏状态

定义一个二维数组，用来存储游戏的状态，初始化分数为0。然后清空所有的方块元素，并随机生成两个数字为2的方块。最后将游戏状态和分数更新到页面上。

步骤三、监听键盘事件

使用键盘事件监听器来实现方块的移动操作。当用户按下方向键时，检查是否可以移动，并更新游戏状态和对应的DOM元素。

步骤四、定义辅助函数

定义一些辅助函数来方便代码的编写，例如生成随机数、检查游戏是否结束等。

步骤五、开始游戏

当用户点击“开始游戏”按钮时，初始化游戏，并隐藏“开始游戏”按钮、显示“重置”按钮。

步骤六、重置游戏

当用户点击“重置”按钮时，重置游戏状态并更新所有的DOM元素。

代码注释

在您提供的代码中，已经添加了一些注释，以帮助您更好地理解代码的逻辑。这些注释主要包括了以下内容：

  • 初始化页面元素
  • 定义变量和常量
  • 初始化游戏状态
  • 监听键盘事件
  • 辅助函数：生成随机数、检查游戏是否结束
  • 开始游戏
  • 重置游戏

这些注释可以帮助您更好地理解代码的含义和作用，如果您还有其他需要了解的地方，可以在代码中添加对应的注释。

下面是代码实现：

CSS 

body {
  font-family: 'Microsoft YaHei', sans-serif;
  text-align: center;
}

h1 {
  font-size: 40px;
}

#game-board {
  border: 10px solid #BBADA0;
  border-radius: 5px;
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 450px;
  height: 450px;
  margin: 20px auto 0;
  padding: 10px;
  background-color: #BBADA0;
  box-shadow: 0px 0px 20px #888888;
}

.box {
  font-size: 40px;
  color: #776E65;
  border: 5px solid #BBADA0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #CDC1B4;
  box-shadow: 0px 0px 10px #888888;
}

#start-button,
#reset-button {
  font-size: 20px;
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #8F7A66;
  border: none;
  border-radius: 5px;
  color: white;
  text-shadow: 1px 1px 1px #494949;
  box-shadow: 2px 2px 5px #888888;
}

h2 {
  font-size: 25px;
  margin: 30px auto 10px;
}

#score {
  color: #8F7A66;
  font-weight: bold;
}

.square.selected {
  border-radius: 50px;
  box-shadow: 0 0 10px #1abc9c !important;
}

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>2048小游戏</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>2048小游戏</h1>
  <div id="game-board">
    <!-- 生成16个盒子 -->
    <!-- 第一行方块 -->
    <div id="square-0-0" class="square box"></div>
    <div id="square-0-1" class="square box"></div>
    <div id="square-0-2" class="square box"></div>
    <div id="square-0-3" class="square box"></div>

    <!-- 第二行方块 -->
    <div id="square-1-0" class="square box"></div>
    <div id="square-1-1" class="square box"></div>
    <div id="square-1-2" class="square box"></div>
    <div id="square-1-3" class="square box"></div>

    <!-- 第三行方块 -->
    <div id="square-2-0" class="square box"></div>
    <div id="square-2-1" class="square box"></div>
    <div id="square-2-2" class="square box"></div>
    <div id="square-2-3" class="square box"></div>

    <!-- 第四行方块 -->
    <div id="square-3-0" class="square box"></div>
    <div id="square-3-1" class="square box"></div>
    <div id="square-3-2" class="square box"></div>
    <div id="square-3-3" class="square box"></div>
  </div>
  <button id="start-button">开始游戏</button>
  <button id="reset-button" style="display:none;">重置</button>
  <h2>分数：<span id="score">0</span></h2>
  <script src="script.js"></script>
</body>

</html>

JS

const boxes = Array.from(document.getElementsByClassName("box")); // 获取所有方块盒子

// 创建一个二维数组代表盘面，0代表空格子
let board = [
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
];

const startButton = document.getElementById("start-button"); // 获取开始游戏按钮
const resetButton = document.getElementById("reset-button"); // 获取重置按钮
const scoreDisplay = document.getElementById("score"); // 获取分数显示元素

// 计算空闲格子数
function countEmpty() {
  let empty = 0;
  board.forEach(row => {
    row.forEach(cell => {
      if (cell === 0) empty++;
    });
  });
  return empty;
}

// 在空闲位置随机出现一个新的数字方块
function spawn() {
  let empty = countEmpty();
  if (empty === 0) return;
  let index = Math.floor(Math.random() * empty); // 随机选一个空闲位置
  let value = Math.random() < 0.9 ? 2 : 4; // 随机生成新方块的值
  let count = 0;
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (board[i][j] === 0) {
        if (count === index) {
          board[i][j] = value; // 在选中的位置放上新方块
          boxes[i * 4 + j].innerText = value; // 更新对应DOM元素
          return;
        }
        count++;
      }
    }
  }
}

// 更新分数
function updateScore(score) {
  scoreDisplay.innerText = score;
}

// 初始化游戏
function initGame() {
  if (gameStarted) { return }
  gameStarted = true;

  board = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ];
  updateScore(0);
  boxes.forEach(box => {
    box.innerText = "";
  });
  spawn(); // 随机生成两个方块
  spawn();
  updateBoard();
  // startButton.style.display = "none"; // 隐藏开始游戏按钮
  // resetButton.style.display = "inline-block"; // 显示重置按钮
}

// 重置游戏
function resetGame() {
  scoreDisplay.innerText = "0";
  board = Array.from({ length: 4 }, () => Array.from({ length: 4 }, () => 0));
  spawn();
  spawn();
  updateBoard();
  location.reload();
}
// 检查游戏是否结束
function checkGameOver() {
  let empty = countEmpty();
  if (empty > 0)
    return false; // 如果还有空位置，游戏继续
  // 如果没有空位置，检查是否有相邻的方块值相同的情况，有的话游戏继续，否则游戏结束
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (i < 3 && board[i][j] === board[i + 1][j]) return false;
      if (j < 3 && board[i][j] === board[i][j + 1]) return false;
    }
  }
  return true;
}
// 声明全局变量 selectedSquare 来保存当前选中的方块 ID
let selectedSquare = null;

// 为每个方块添加点击事件监听器，用于选中该方块
for (let i = 0; i < 4; i++) {
  for (let j = 0; j < 4; j++) {
    const squareId = "square-" + i + "-" + j;
    const square = document.getElementById(squareId);
    square.addEventListener('click', () => {
      // 取消之前选中方块的样式
      if (selectedSquare) {
        const prevSquare = document.getElementById(selectedSquare);
        prevSquare.classList.remove('selected');
      }
      // 设置当前方块为选中状态，并保存它的 ID 到 selectedSquare 变量中
      selectedSquare = squareId;
      square.classList.add('selected');
    });
  }
}

// 移动方块，返回是否有移动
function move(direction) {
  let moved = false;
  switch (direction) {
    case "up":
      for (let j = 0; j < 4; j++) {
        for (let i = 1; i < 4; i++) {
          const squareId = "square-" + i + "-" + j;
          if (board[i][j] !== 0 && (selectedSquare === null || squareId === selectedSquare)) { // 只处理玩家选中的方块
            let x = i;
            while (x > 0 && board[x - 1][j] === 0) {
              board[x - 1][j] = board[x][j];
              board[x][j] = 0;
              moved = true;
              x--;
            }
            if (x > 0 && board[x][j] === board[x - 1][j]) {
              board[x - 1][j] *= 2;
              board[x][j] = 0;
              updateScore(Number(scoreDisplay.innerText) + board[x - 1][j]);
              moved = true;
            }
          }
        }
      }
      break;
    case "down":
      for (let j = 0; j < 4; j++) {
        for (let i = 2; i >= 0; i--) {
          const squareId = "square-" + i + "-" + j;
          if (board[i][j] !== 0 && (selectedSquare === null || squareId === selectedSquare)) { // 只处理玩家选中的方块
            let x = i;
            while (x < 3 && board[x + 1][j] === 0) {
              board[x + 1][j] = board[x][j];
              board[x][j] = 0;
              moved = true;
              x++;
            }
            if (x < 3 && board[x][j] === board[x + 1][j]) {
              board[x + 1][j] *= 2;
              board[x][j] = 0;
              updateScore(Number(scoreDisplay.innerText) + board[x + 1][j]);
              moved = true;
            }
          }
        }
      }
      break;
    case "left":
      for (let i = 0; i < 4; i++) {
        for (let j = 1; j < 4; j++) {
          const squareId = "square-" + i + "-" + j;
          if (board[i][j] !== 0 && (selectedSquare === null || squareId === selectedSquare)) { // 只处理玩家选中的方块
            let y = j;
            while (y > 0 && board[i][y - 1] === 0) {
              board[i][y - 1] = board[i][y];
              board[i][y] = 0;
              moved = true;
              y--;
            }
            if (y > 0 && board[i][y] === board[i][y - 1]) {
              board[i][y - 1] *= 2;
              board[i][y] = 0;
              updateScore(Number(scoreDisplay.innerText) + board[i][y - 1]);
              moved = true;
            }
          }
        }
      }
      break;
    case "right":
      for (let i = 0; i < 4; i++) {
        for (let j = 2; j >= 0; j--) {
          const squareId = "square-" + i + "-" + j;
          if (board[i][j] !== 0 && (selectedSquare === null || squareId === selectedSquare)) { // 只处理玩家选中的方块
            let y = j;
            while (y < 3 && board[i][y + 1] === 0) {
              board[i][y + 1] = board[i][y];
              board[i][y] = 0;
              moved = true;
              y++;
            }
            if (y < 3 && board[i][y] === board[i][y + 1]) {
              board[i][y + 1] *= 2;
              board[i][y] = 0;
              updateScore(Number(scoreDisplay.innerText) + board[i][y + 1]);
              moved = true;
            }
          }
        }
      }
      break;
  }
  return moved;
}

// 更新方块盘面
function updateBoard() {
  boxes.forEach((box, index) => {
    let row = Math.floor(index / 4);
    let col = index % 4;
    box.innerText = board[row][col] === 0 ? "" : board[row][col]; // 更新对应DOM元素
  });
}

// 监听键盘事件
document.addEventListener("keydown", event => {
  switch (event.key) {
    case "ArrowUp":
      event.preventDefault();
      if (move("up")) {
        spawn();
        updateBoard();
        if (checkGameOver()) {
          alert("游戏结束！");
          resetButton.click(); // 重置游戏
        }
      }
      break;
    case "ArrowDown":
      event.preventDefault();
      if (move("down")) {
        spawn();
        updateBoard();
        if (checkGameOver()) {
          alert("游戏结束！");
          resetButton.click(); // 重置游戏
        }
      }
      break;
    case "ArrowLeft":
      event.preventDefault();
      if (move("left")) {
        spawn();
        updateBoard();
        if (checkGameOver()) {
          alert("游戏结束！");
          resetButton.click(); // 重置游戏
        }
      }
      break;
    case "ArrowRight":
      event.preventDefault();
      if (move("right")) {
        spawn();
        updateBoard();
        if (checkGameOver()) {
          alert("游戏结束！");
          resetButton.click(); // 重置游戏
        }
      }
      break;
    default:
      break;
  }
});

// 监听开始游戏按钮点击事件
startButton.addEventListener("click", () => {
  startButton.style.display = "none"; // 隐藏开始游戏按钮
  resetButton.style.display = "inline-block"; // 显示重置按钮
  gameStarted = false;     // 控制是否开启游戏，false开启  true结束
  initGame()
});

// 监听重置按钮点击事件
resetButton.addEventListener("click", () => {
  resetGame(); // 重置游戏
});

// 初始化游戏
initGame();

游戏运行效果

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/569009.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【KVM虚拟化】· KVM中的网络

【KVM虚拟化】· KVM中的网络

目录 &#x1f34e;虚拟机的网络模式 &#x1f352;网络配置文件 &#x1f352;virsh查看命令 &#x1f34e;基于NAT的虚拟网络 &#x1f34e;基于网桥的虚拟网络 &#x1f34e;基于隔离的虚拟网络 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&a…
阅读更多...
全网最全的多模态实体识别论文列表-【原文+代码】

全网最全的多模态实体识别论文列表-【原文+代码】

文章目录 写在前面的话【2017年】【2018年】【2019年】【2020年】【2021年】【2022年】【2023年】【写在最后的话】 写在前面的话 近期在梳理多模态NER相关的论文&#xff0c;因此&#xff0c;本篇文章主要是为大家整理了比较全面的聚焦于多模态实体识别任务的论文列表&#x…
阅读更多...
Linux权限相关介绍

Linux权限相关介绍

目录 前言 1.Linux操作系统下的两种用户 Linux权限管理 Linux文件访问对象分类 文件类型和访问权限 文件类型 基本权限 文件访问权限的相关设置方法 chmod chown chgrp umask掩码 目录权限 粘滞位 前言 权限指的就是我们对于某件事物所能够相关操作&#xff0c;而对于…
阅读更多...
x86汇编语法基础（gnu格式）

x86汇编语法基础（gnu格式）

一、寄存器 1.1 通用寄存器 一个x86-64的中央处理单元&#xff08;CPU&#xff09;包含一组16个存储64位值的通用寄存器。这些寄存器用来存储整数数据和指针。下图显示了这16个寄存器。它们的名字都以%r开头&#xff0c;不过后面还跟着不同命名规则的名字&#xff0c;这是由于…
阅读更多...
macbook2023系统清理软件cleanmymac中文版

macbook2023系统清理软件cleanmymac中文版

cleanmymac x 中文版基本都是大家首选Mac清理软件了。它集各种功能于一身&#xff0c;几乎满足用户所有的清理需求。它可以清理&#xff0c;优化&#xff0c;保养和监测您的电脑&#xff0c;确保您的Mac运行畅通无阻&#xff01;支持一键快速清理Mac&#xff0c;快速检查并安全…
阅读更多...
opencv_c++学习（二十二）

opencv_c++学习（二十二）

一、凸包检测 图中左侧为边缘检测的效果&#xff0c;中间为图像经过二值化的效果&#xff0c;右图为凸包检测效果。 convexHull(lnputArraypoints, OutputArray hull&#xff0c;bool clockwise false, bool returnPoints true)points:输入的2D点集。 hull:输出凸包的顶点。…
阅读更多...
【大学物理实验】基本测量

【大学物理实验】基本测量

50分度的游标卡尺&#xff0c;最小分度为&#xff1a; A. 0.1mm B. 0.2mm C. 0.5mm D. 0.02mm 正确答案&#xff1a; D 保存游标卡尺和螺旋测微器是&#xff0c;下面说法正确的是&#xff1a; A. 游标卡尺测量位置应闭合&#xff0c;螺旋测微器小砧和螺杆间隙也应闭合 B. 游标…
阅读更多...
PyG的Planetoid无法直接下载Cora等数据集的解决方法

PyG的Planetoid无法直接下载Cora等数据集的解决方法

问题描述&#xff1a; 在使用PyG的时候&#xff0c;通常会涉及到一些公共数据集的下载&#xff0c;由于网络问题&#xff0c;导致无法下载出现以下问题&#xff1a; 尝试了很多的方法都没有成功&#xff08;主要是个人比较菜&#xff01;&#xff09;。但是皇天不负有心人&am…
阅读更多...
基于Springboot的高校固定资产管理系统的设计与实现（源码完整）

基于Springboot的高校固定资产管理系统的设计与实现（源码完整）

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据你想解决的问题&#xff0c;今天给…
阅读更多...
1.标注自己的关键点检测数据集

1.标注自己的关键点检测数据集

1.标注自己的关键点检测数据集 1.1 labelme标注数据 labelme GitHub项目地址&#xff1a;https://github.com/wkentaro/labelme 1.1.1exe文件下载 https://github.com/wkentaro/labelme/releases 可直接下载打包好的exe文件 1.1.2python安装labelme cmd命令行中输入以下命…
阅读更多...
极大似然估计法及其损失函数的优化方法

极大似然估计法及其损失函数的优化方法

二分类-逻辑回归模型 1.模型函数 1&#xff09;多元线性回归函数&#xff1a; Z ^ 计算 X W T \hat{Z}_{计算} XW^T Z^计算​XWT 2&#xff09;softmax函数&#xff1a; Y ^ 模型 S i g m o i d ( Z ^ 计算 ) 1 1 e − Z ^ 计算 \hat{Y}_{模型} Sigmoid(\hat{Z}_{计算})…
阅读更多...
继瑞吉外卖后的又一个项目——SpringBoot+Vued前后端的博客系统

继瑞吉外卖后的又一个项目——SpringBoot+Vued前后端的博客系统

文章目录 博客系统项目介绍前言项目演示前台演示后台演示 组织结构后端组织结构前端组织结构 技术选型前端技术后端技术架构图系统架构图业务架构图 模块介绍前端模块后端模块 环境搭建开发工具开发环境项目运行 未完待续结语 博客系统项目介绍 前言 本项目已开源在Gitee 后端…
阅读更多...
【P32】JMeter While 控制器（While Controller）

【P32】JMeter While 控制器（While Controller）

文章目录 一、While 控制器&#xff08;While Controller&#xff09;参数说明二、测试计划设计2.1、变量2.2、函数2.2.1、groovy脚本2.2.2、jex13脚本2.2.3、js脚本 一、While 控制器&#xff08;While Controller&#xff09;参数说明 可以对部分逻辑按变量条件进行循环迭代…
阅读更多...
【算法】—— 简单多状态 dp 问题

【算法】—— 简单多状态 dp 问题

在上期&#xff0c;我给大家讲解了关于单个状态下的dp问题&#xff0c;本期我给大家讲述几道关于多状态下的dp问题。希望大家有所帮助&#xff01;&#xff01;&#xff01; 目录 &#xff08;一&#xff09;粉刷房⼦ &#xff08;二&#xff09;买卖股票的最佳时机含冷冻期 …
阅读更多...
破解提升 LLMs 性能的黑匣子—— LlamaIndex

破解提升 LLMs 性能的黑匣子—— LlamaIndex

“可以将 LlamaIndex 视为外部数据和 LLM 连接在一起的黑匣子。”在 Zilliz 组织的网络研讨会中&#xff0c;LlamaIndex 的联合创始人兼首席执行官 Jerry Liu 曾这样说道。 对于 Jerry Liu 的这个比喻&#xff0c;熟悉 LLMs 的开发者会觉得颇为贴切&#xff0c;尤其是对于那些想…
阅读更多...
Chinese-LLaMA-Alpaca代码实战

Chinese-LLaMA-Alpaca代码实战

文章目录 微调chinese-alpaca部署llama.cpp将FP16模型量化为4-bit 项目地址&#xff1a; https://github.com/ymcui/Chinese-LLaMA-Alpaca 微调chinese-alpaca 本项目基于中文数据 开源了使用中文文本数据预训练的中文LLaMA大模型&#xff08;7B、13B&#xff09;开源了进一…
阅读更多...
JavaFX【TableView使用详解】

JavaFX【TableView使用详解】

目录 概述 组件 Student ObservableList TableView setCellValueFactory() TableColumn 1. Callback 2. PropertyValueFactory 增加到末行 1、tableView.getItems().add(Student s) 2、list.add(Student s) 删除指定行 1、tableView.getItems().remove(int i) 2、…
阅读更多...
软件测试完后，运行后还有BUG，测试人员就应该背锅吗？

软件测试完后，运行后还有BUG，测试人员就应该背锅吗？

测试完成后还有bug&#xff0c;测试人员肯定是有责任的&#xff0c;第一时间要赶紧处理而不是着急甩锅。但是这口锅全部扣测试身上&#xff0c;明显也是不能接受的&#xff0c;关键在于测试人员需要找出足够的证据来保护自己。 或许很多人会说测试不可能发现所有的bug&#xf…
阅读更多...
软件测试人的第一个实战项目：web端（视频教程+文档+用例库）

软件测试人的第一个实战项目：web端（视频教程+文档+用例库）

最近很多自学测试的小伙伴在问我&#xff0c;学完基础的知识后面临着项目问题&#xff0c;网上项目大都不全&#xff0c;而且也不知道该怎么做&#xff0c;不知道做哪些项目能帮助自己提升 今天给大家分享一个web软件测试实战项目&#xff0c;该项目对新手十分友好&#xff0c;…
阅读更多...
STM32入门100步（第4步～第5步）

STM32入门100步（第4步～第5步）

第4～5步 STM32内部核心功能 前两节中，我们了解了什么是ARM、什么是STM32系列，接下来就是了解具体的一款STM32单片机的内部功能。单片机就是一种微小型计算机，其核心原理就是计算机原理。对于其他非ARM构架的单片机来说学习过程也是相似的。 我们学习的是STM32F103C8T6这款单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023