设为首页收藏本站
首页 > 论坛 > 行空板

[M10项目]ESP32-C5——断网可玩的局域网2048游戏

weyhao | 学徒 | 创造力： | 帖子： | 发消息 | 串个门 | 加好友 | 打招呼
2025-9-23 10:59:45 [显示全部楼层]
5浏览
0回复
0收藏
查看: 5|回复: 0

[M10项目] ESP32-C5——断网可玩的局域网2048游戏

[复制链接]
在某些特殊的场合之下，比如没有网络的大兴安岭，克拉玛利，比如不允许上网的某些研究所，比如在飞机上。那么我们如何连接热点，上网连线一款游戏解闷呢？前些天本人收到了dfrobot寄来的Firebbetle Esp32-C5试用板，心想刚好可以利用其自带的wifi以及http功能，将其作为微型服务器，利用Ap模式发出局域网热点信号，连接热点访问其中的小游戏。
ESP32-C5——断网可玩的局域网2048游戏图3
废话不说，先上效果
ESP32-C5——断网可玩的局域网2048游戏图1
目前只需要连接ESP32的wifi热点，以及输入密码12345678就可以啦。下面有四个方向箭，点击就可以实现对于2048小游戏的控制。得益于esp32c5的优越性能，目前游玩过程很流畅，也很顺利。如果有多人接入，只需要避免同时一次性大量访问就好。
视频演示
ESP32-C5——断网可玩的局域网2048游戏图2
当然由于是试用版的缘故，以及科学上网变得更加困难，折腾了一段时间，开发板具体的使用方法是，下载Arduino2.3.6，将ESP32-C5——断网可玩的局域网2048游戏图3
附件当中的json文件保存到下面的文件夹下，注意将原来的package_index.json删除，将这个json重命名为package_index.json。注意arduino当中文件-首选项-其余开发板链接当中的链接全部删除，然后再打开arduino，选择esp32 espress的下面的3.3.0-alpha-cn进行开发
ESP32-C5——断网可玩的局域网2048游戏图5
arduino源代码展示如下 
  1. #include <WiFi.h>

  2. #include <WebServer.h>

  3. 

  4. /* Put your SSID & Password */

  5. const char* ssid     = "ESP32";     // Enter SSID here

  6. const char* password = "12345678";  // Enter Password here

  7. 

  8. /* Put IP Address details */

  9. IPAddress local_ip(192,168,1,1);

  10. IPAddress gateway(192,168,1,1);

  11. IPAddress subnet(255,255,255,0);

  12. 

  13. WebServer server(80);

  14. 

  15. void setup()

  16. {

  17.     Serial.begin(115200);

  18. 

  19.     WiFi.softAP(ssid, password);

  20.     WiFi.softAPConfig(local_ip, gateway, subnet);

  21.     delay(100);

  22. 

  23.     server.on("/", handle_on_connect);

  24.     server.onNotFound(handle_not_found);

  25. 

  26.     server.begin();

  27.     Serial.println("HTTP server started");

  28. }

  29. 

  30. void loop()

  31. {

  32.     server.handleClient();

  33. }

  34. 

  35. void handle_on_connect()

  36. {

  37.     Serial.println("Client connected");

  38.     server.send(200, "text/html", send_2048_html()); 

  39. }

  40. 

  41. void handle_not_found()

  42. {

  43.     server.send(404, "text/plain", "Not found");

  44. }

  45. 

  46. String send_2048_html()

  47. {

  48.     String ptr = "<!DOCTYPE html>\n";

  49.     ptr += "<html lang='zh'>\n";

  50.     ptr += "<head>\n";

  51.     ptr += "  <meta charset='UTF-8'>\n";

  52.     ptr += "  <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>\n";

  53.     ptr += "  <title>ESP32 2048游戏</title>\n";

  54.     ptr += "  <style>\n";

  55.     ptr += "    body {\n";

  56.     ptr += "      font-family: Arial, sans-serif;\n";

  57.     ptr += "      text-align: center;\n";

  58.     ptr += "      background-color: #faf8ef;\n";

  59.     ptr += "      margin: 0;\n";

  60.     ptr += "      padding: 20px;\n";

  61.     ptr += "    }\n";

  62.     ptr += "    h1 {\n";

  63.     ptr += "      color: #776e65;\n";

  64.     ptr += "      font-size: 28px;\n";

  65.     ptr += "      margin-bottom: 10px;\n";

  66.     ptr += "    }\n";

  67.     ptr += "    .game-container {\n";

  68.     ptr += "      display: flex;\n";

  69.     ptr += "      flex-direction: column;\n";

  70.     ptr += "      align-items: center;\n";

  71.     ptr += "      margin-top: 20px;\n";

  72.     ptr += "    }\n";

  73.     ptr += "    .game-header {\n";

  74.     ptr += "      display: flex;\n";

  75.     ptr += "      justify-content: space-between;\n";

  76.     ptr += "      width: 300px;\n";

  77.     ptr += "      margin-bottom: 20px;\n";

  78.     ptr += "    }\n";

  79.     ptr += "    .score-container {\n";

  80.     ptr += "      background: #bbada0;\n";

  81.     ptr += "      padding: 10px 15px;\n";

  82.     ptr += "      border-radius: 5px;\n";

  83.     ptr += "      color: white;\n";

  84.     ptr += "      font-weight: bold;\n";

  85.     ptr += "      text-align: center;\n";

  86.     ptr += "      min-width: 80px;\n";

  87.     ptr += "    }\n";

  88.     ptr += "    .score-title {\n";

  89.     ptr += "      font-size: 14px;\n";

  90.     ptr += "      color: #eee4da;\n";

  91.     ptr += "    }\n";

  92.     ptr += "    .score-value {\n";

  93.     ptr += "      font-size: 20px;\n";

  94.     ptr += "    }\n";

  95.     ptr += "    .grid-container {\n";

  96.     ptr += "      background-color: #bbada0;\n";

  97.     ptr += "      border-radius: 6px;\n";

  98.     ptr += "      width: 300px;\n";

  99.     ptr += "      height: 300px;\n";

  100.     ptr += "      padding: 10px;\n";

  101.     ptr += "      position: relative;\n";

  102.     ptr += "      box-sizing: border-box;\n";

  103.     ptr += "    }\n";

  104.     ptr += "    .grid-row {\n";

  105.     ptr += "      display: flex;\n";

  106.     ptr += "      margin-bottom: 10px;\n";

  107.     ptr += "      height: 65px;\n";

  108.     ptr += "    }\n";

  109.     ptr += "    .grid-row:last-child {\n";

  110.     ptr += "      margin-bottom: 0;\n";

  111.     ptr += "    }\n";

  112.     ptr += "    .grid-cell {\n";

  113.     ptr += "      width: 65px;\n";

  114.     ptr += "      height: 65px;\n";

  115.     ptr += "      margin-right: 10px;\n";

  116.     ptr += "      background-color: #cdc1b4;\n";

  117.     ptr += "      border-radius: 3px;\n";

  118.     ptr += "      display: flex;\n";

  119.     ptr += "      justify-content: center;\n";

  120.     ptr += "      align-items: center;\n";

  121.     ptr += "      font-size: 24px;\n";

  122.     ptr += "      font-weight: bold;\n";

  123.     ptr += "      color: #776e65;\n";

  124.     ptr += "    }\n";

  125.     ptr += "    .grid-cell:last-child {\n";

  126.     ptr += "      margin-right: 0;\n";

  127.     ptr += "    }\n";

  128.     ptr += "    .tile-2 { background-color: #eee4da; }\n";

  129.     ptr += "    .tile-4 { background-color: #ede0c8; }\n";

  130.     ptr += "    .tile-8 { background-color: #f2b179; color: #f9f6f2; }\n";

  131.     ptr += "    .tile-16 { background-color: #f59563; color: #f9f6f2; }\n";

  132.     ptr += "    .tile-32 { background-color: #f67c5f; color: #f9f6f2; }\n";

  133.     ptr += "    .tile-64 { background-color: #f65e3b; color: #f9f6f2; }\n";

  134.     ptr += "    .tile-128 { background-color: #edcf72; color: #f9f6f2; font-size: 20px; }\n";

  135.     ptr += "    .tile-256 { background-color: #edcc61; color: #f9f6f2; font-size: 20px; }\n";

  136.     ptr += "    .tile-512 { background-color: #edc850; color: #f9f6f2; font-size: 20px; }\n";

  137.     ptr += "    .tile-1024 { background-color: #edc53f; color: #f9f6f2; font-size: 16px; }\n";

  138.     ptr += "    .tile-2048 { background-color: #edc22e; color: #f9f6f2; font-size: 16px; }\n";

  139.     ptr += "    .controls {\n";

  140.     ptr += "      margin-top: 20px;\n";

  141.     ptr += "    }\n";

  142.     ptr += "    .btn {\n";

  143.     ptr += "      background-color: #8f7a66;\n";

  144.     ptr += "      color: white;\n";

  145.     ptr += "      border: none;\n";

  146.     ptr += "      border-radius: 5px;\n";

  147.     ptr += "      padding: 10px 20px;\n";

  148.     ptr += "      font-weight: bold;\n";

  149.     ptr += "      cursor: pointer;\n";

  150.     ptr += "      margin: 5px;\n";

  151.     ptr += "    }\n";

  152.     ptr += "    .btn:hover {\n";

  153.     ptr += "      background-color: #7c6957;\n";

  154.     ptr += "    }\n";

  155.     ptr += "    .game-message {\n";

  156.     ptr += "      display: none;\n";

  157.     ptr += "      position: absolute;\n";

  158.     ptr += "      top: 0;\n";

  159.     ptr += "      left: 0;\n";

  160.     ptr += "      right: 0;\n";

  161.     ptr += "      bottom: 0;\n";

  162.     ptr += "      background: rgba(238, 228, 218, 0.73);\n";

  163.     ptr += "      z-index: 100;\n";

  164.     ptr += "      flex-direction: column;\n";

  165.     ptr += "      align-items: center;\n";

  166.     ptr += "      justify-content: center;\n";

  167.     ptr += "      border-radius: 6px;\n";

  168.     ptr += "      color: #776e65;\n";

  169.     ptr += "      font-weight: bold;\n";

  170.     ptr += "      font-size: 30px;\n";

  171.     ptr += "    }\n";

  172.     ptr += "    .game-message.game-won {\n";

  173.     ptr += "      background: rgba(237, 194, 46, 0.5);\n";

  174.     ptr += "      color: #f9f6f2;\n";

  175.     ptr += "    }\n";

  176.     ptr += "    .game-message p {\n";

  177.     ptr += "      margin: 0;\n";

  178.     ptr += "      margin-bottom: 20px;\n";

  179.     ptr += "    }\n";

  180.     ptr += "    .swipe-controls {\n";

  181.     ptr += "      display: flex;\n";

  182.     ptr += "      flex-wrap: wrap;\n";

  183.     ptr += "      justify-content: center;\n";

  184.     ptr += "      margin-top: 20px;\n";

  185.     ptr += "    }\n";

  186.     ptr += "    .swipe-btn {\n";

  187.     ptr += "      width: 80px;\n";

  188.     ptr += "      height: 80px;\n";

  189.     ptr += "      margin: 5px;\n";

  190.     ptr += "      font-size: 30px;\n";

  191.     ptr += "      background-color: #bbada0;\n";

  192.     ptr += "      color: white;\n";

  193.     ptr += "      border: none;\n";

  194.     ptr += "      border-radius: 5px;\n";

  195.     ptr += "      display: flex;\n";

  196.     ptr += "      justify-content: center;\n";

  197.     ptr += "      align-items: center;\n";

  198.     ptr += "      cursor: pointer;\n";

  199.     ptr += "    }\n";

  200.     ptr += "    .swipe-btn:active {\n";

  201.     ptr += "      background-color: #8f7a66;\n";

  202.     ptr += "    }\n";

  203.     ptr += "    .footer {\n";

  204.     ptr += "      margin-top: 30px;\n";

  205.     ptr += "      font-size: 14px;\n";

  206.     ptr += "      color: #776e65;\n";

  207.     ptr += "    }\n";

  208.     ptr += "  </style>\n";

  209.     ptr += "</head>\n";

  210.     ptr += "<body>\n";

  211.     ptr += "  <h1>ESP32 2048游戏</h1>\n";

  212.     ptr += "  <div class='game-container'>\n";

  213.     ptr += "    <div class='game-header'>\n";

  214.     ptr += "      <div class='score-container'>\n";

  215.     ptr += "        <div class='score-title'>分数</div>\n";

  216.     ptr += "        <div id='score' class='score-value'>0</div>\n";

  217.     ptr += "      </div>\n";

  218.     ptr += "      <div class='score-container'>\n";

  219.     ptr += "        <div class='score-title'>最高分</div>\n";

  220.     ptr += "        <div id='best-score' class='score-value'>0</div>\n";

  221.     ptr += "      </div>\n";

  222.     ptr += "    </div>\n";

  223.     ptr += "    <div class='grid-container'>\n";

  224.     ptr += "      <div id='game-message' class='game-message'>\n";

  225.     ptr += "        <p></p>\n";

  226.     ptr += "        <button id='retry-btn' class='btn'>再试一次</button>\n";

  227.     ptr += "      </div>\n";

  228.     ptr += "      <div class='grid-row'>\n";

  229.     ptr += "        <div id='cell-0-0' class='grid-cell'></div>\n";

  230.     ptr += "        <div id='cell-0-1' class='grid-cell'></div>\n";

  231.     ptr += "        <div id='cell-0-2' class='grid-cell'></div>\n";

  232.     ptr += "        <div id='cell-0-3' class='grid-cell'></div>\n";

  233.     ptr += "      </div>\n";

  234.     ptr += "      <div class='grid-row'>\n";

  235.     ptr += "        <div id='cell-1-0' class='grid-cell'></div>\n";

  236.     ptr += "        <div id='cell-1-1' class='grid-cell'></div>\n";

  237.     ptr += "        <div id='cell-1-2' class='grid-cell'></div>\n";

  238.     ptr += "        <div id='cell-1-3' class='grid-cell'></div>\n";

  239.     ptr += "      </div>\n";

  240.     ptr += "      <div class='grid-row'>\n";

  241.     ptr += "        <div id='cell-2-0' class='grid-cell'></div>\n";

  242.     ptr += "        <div id='cell-2-1' class='grid-cell'></div>\n";

  243.     ptr += "        <div id='cell-2-2' class='grid-cell'></div>\n";

  244.     ptr += "        <div id='cell-2-3' class='grid-cell'></div>\n";

  245.     ptr += "      </div>\n";

  246.     ptr += "      <div class='grid-row'>\n";

  247.     ptr += "        <div id='cell-3-0' class='grid-cell'></div>\n";

  248.     ptr += "        <div id='cell-3-1' class='grid-cell'></div>\n";

  249.     ptr += "        <div id='cell-3-2' class='grid-cell'></div>\n";

  250.     ptr += "        <div id='cell-3-3' class='grid-cell'></div>\n";

  251.     ptr += "      </div>\n";

  252.     ptr += "    </div>\n";

  253.     ptr += "    <div class='controls'>\n";

  254.     ptr += "      <button id='new-game-btn' class='btn'>新游戏</button>\n";

  255.     ptr += "    </div>\n";

  256.     ptr += "    <div class='swipe-controls'>\n";

  257.     ptr += "      <div style='width: 90px; height: 90px;'></div>\n";

  258.     ptr += "      <button id='up-btn' class='swipe-btn'>↑</button>\n";

  259.     ptr += "      <div style='width: 90px; height: 90px;'></div>\n";

  260.     ptr += "      <button id='left-btn' class='swipe-btn'>←</button>\n";

  261.     ptr += "      <div style='width: 90px; height: 90px;'></div>\n";

  262.     ptr += "      <button id='right-btn' class='swipe-btn'>→</button>\n";

  263.     ptr += "      <div style='width: 90px; height: 90px;'></div>\n";

  264.     ptr += "      <button id='down-btn' class='swipe-btn'>↓</button>\n";

  265.     ptr += "      <div style='width: 90px; height: 90px;'></div>\n";

  266.     ptr += "    </div>\n";

  267.     ptr += "  </div>\n";

  268.     ptr += "  <div class='footer'>\n";

  269.     ptr += "    <p>ESP32网页2048游戏 - 基于ESP32 Web Server</p>\n";

  270.     ptr += "  </div>\n";

  271.     

  272.     // 添加JavaScript代码

  273.     ptr += "  <script>\n";

  274.     ptr += "    // 游戏状态变量\n";

  275.     ptr += "    let grid = [\n";

  276.     ptr += "      [0, 0, 0, 0],\n";

  277.     ptr += "      [0, 0, 0, 0],\n";

  278.     ptr += "      [0, 0, 0, 0],\n";

  279.     ptr += "      [0, 0, 0, 0]\n";

  280.     ptr += "    ];\n";

  281.     ptr += "    let score = 0;\n";

  282.     ptr += "    let bestScore = 0;\n";

  283.     ptr += "    let gameOver = false;\n";

  284.     ptr += "    let gameWon = false;\n";

  285.     

  286.     ptr += "    // DOM元素\n";

  287.     ptr += "    const scoreElement = document.getElementById('score');\n";

  288.     ptr += "    const bestScoreElement = document.getElementById('best-score');\n";

  289.     ptr += "    const gameMessageElement = document.getElementById('game-message');\n";

  290.     ptr += "    const newGameBtn = document.getElementById('new-game-btn');\n";

  291.     ptr += "    const retryBtn = document.getElementById('retry-btn');\n";

  292.     ptr += "    const upBtn = document.getElementById('up-btn');\n";

  293.     ptr += "    const leftBtn = document.getElementById('left-btn');\n";

  294.     ptr += "    const rightBtn = document.getElementById('right-btn');\n";

  295.     ptr += "    const downBtn = document.getElementById('down-btn');\n";

  296.     

  297.     ptr += "    // 初始化游戏\n";

  298.     ptr += "    function initGame() {\n";

  299.     ptr += "      grid = [\n";

  300.     ptr += "        [0, 0, 0, 0],\n";

  301.     ptr += "        [0, 0, 0, 0],\n";

  302.     ptr += "        [0, 0, 0, 0],\n";

  303.     ptr += "        [0, 0, 0, 0]\n";

  304.     ptr += "      ];\n";

  305.     ptr += "      score = 0;\n";

  306.     ptr += "      gameOver = false;\n";

  307.     ptr += "      gameWon = false;\n";

  308.     ptr += "      scoreElement.textContent = '0';\n";

  309.     ptr += "      gameMessageElement.style.display = 'none';\n";

  310.     ptr += "      \n";

  311.     ptr += "      // 添加两个初始方块\n";

  312.     ptr += "      addRandomTile();\n";

  313.     ptr += "      addRandomTile();\n";

  314.     ptr += "      \n";

  315.     ptr += "      updateGrid();\n";

  316.     ptr += "    }\n";

  317.     

  318.     ptr += "    // 更新网格显示\n";

  319.     ptr += "    function updateGrid() {\n";

  320.     ptr += "      for (let row = 0; row < 4; row++) {\n";

  321.     ptr += "        for (let col = 0; col < 4; col++) {\n";

  322.     ptr += "          const cell = document.getElementById(`cell-${row}-${col}`);\n";

  323.     ptr += "          const value = grid[row][col];\n";

  324.     ptr += "          \n";

  325.     ptr += "          // 清除所有类\n";

  326.     ptr += "          cell.className = 'grid-cell';\n";

  327.     ptr += "          cell.textContent = '';\n";

  328.     ptr += "          \n";

  329.     ptr += "          if (value !== 0) {\n";

  330.     ptr += "            cell.textContent = value;\n";

  331.     ptr += "            cell.classList.add(`tile-${value}`);\n";

  332.     ptr += "          }\n";

  333.     ptr += "        }\n";

  334.     ptr += "      }\n";

  335.     ptr += "    }\n";

  336.     

  337.     ptr += "    // 添加随机方块\n";

  338.     ptr += "    function addRandomTile() {\n";

  339.     ptr += "      const emptyCells = [];\n";

  340.     ptr += "      \n";

  341.     ptr += "      // 找出所有空单元格\n";

  342.     ptr += "      for (let row = 0; row < 4; row++) {\n";

  343.     ptr += "        for (let col = 0; col < 4; col++) {\n";

  344.     ptr += "          if (grid[row][col] === 0) {\n";

  345.     ptr += "            emptyCells.push({ row, col });\n";

  346.     ptr += "          }\n";

  347.     ptr += "        }\n";

  348.     ptr += "      }\n";

  349.     ptr += "      \n";

  350.     ptr += "      // 如果有空单元格，随机选择一个并添加2或4\n";

  351.     ptr += "      if (emptyCells.length > 0) {\n";

  352.     ptr += "        const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];\n";

  353.     ptr += "        grid[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4;\n";

  354.     ptr += "      }\n";

  355.     ptr += "    }\n";

  356.     

  357.     ptr += "    // 检查游戏是否结束\n";

  358.     ptr += "    function checkGameOver() {\n";

  359.     ptr += "      // 检查是否有空单元格\n";

  360.     ptr += "      for (let row = 0; row < 4; row++) {\n";

  361.     ptr += "        for (let col = 0; col < 4; col++) {\n";

  362.     ptr += "          if (grid[row][col] === 0) {\n";

  363.     ptr += "            return false;\n";

  364.     ptr += "          }\n";

  365.     ptr += "        }\n";

  366.     ptr += "      }\n";

  367.     ptr += "      \n";

  368.     ptr += "      // 检查是否有可合并的相邻单元格\n";

  369.     ptr += "      for (let row = 0; row < 4; row++) {\n";

  370.     ptr += "        for (let col = 0; col < 4; col++) {\n";

  371.     ptr += "          const value = grid[row][col];\n";

  372.     ptr += "          \n";

  373.     ptr += "          // 检查右侧\n";

  374.     ptr += "          if (col < 3 && grid[row][col + 1] === value) {\n";

  375.     ptr += "            return false;\n";

  376.     ptr += "          }\n";

  377.     ptr += "          \n";

  378.     ptr += "          // 检查下方\n";

  379.     ptr += "          if (row < 3 && grid[row + 1][col] === value) {\n";

  380.     ptr += "            return false;\n";

  381.     ptr += "          }\n";

  382.     ptr += "        }\n";

  383.     ptr += "      }\n";

  384.     ptr += "      \n";

  385.     ptr += "      return true;\n";

  386.     ptr += "    }\n";

  387.     

  388.     ptr += "    // 检查是否获胜（达到2048）\n";

  389.     ptr += "    function checkWin() {\n";

  390.     ptr += "      for (let row = 0; row < 4; row++) {\n";

  391.     ptr += "        for (let col = 0; col < 4; col++) {\n";

  392.     ptr += "          if (grid[row][col] === 2048) {\n";

  393.     ptr += "            return true;\n";

  394.     ptr += "          }\n";

  395.     ptr += "        }\n";

  396.     ptr += "      }\n";

  397.     ptr += "      return false;\n";

  398.     ptr += "    }\n";

  399.     

  400.     ptr += "    // 更新分数\n";

  401.     ptr += "    function updateScore(points) {\n";

  402.     ptr += "      score += points;\n";

  403.     ptr += "      scoreElement.textContent = score;\n";

  404.     ptr += "      \n";

  405.     ptr += "      if (score > bestScore) {\n";

  406.     ptr += "        bestScore = score;\n";

  407.     ptr += "        bestScoreElement.textContent = bestScore;\n";

  408.     ptr += "        localStorage.setItem('bestScore', bestScore);\n";

  409.     ptr += "      }\n";

  410.     ptr += "    }\n";

  411.     

  412.     ptr += "    // 显示游戏结束或胜利消息\n";

  413.     ptr += "    function showGameMessage(won) {\n";

  414.     ptr += "      gameMessageElement.style.display = 'flex';\n";

  415.     ptr += "      gameMessageElement.querySelector('p').textContent = won ? '你赢了!' : '游戏结束!';\n";

  416.     ptr += "      if (won) {\n";

  417.     ptr += "        gameMessageElement.classList.add('game-won');\n";

  418.     ptr += "      } else {\n";

  419.     ptr += "        gameMessageElement.classList.remove('game-won');\n";

  420.     ptr += "      }\n";

  421.     ptr += "    }\n";

  422.     

  423.     ptr += "    // 移动方向处理函数\n";

  424.     ptr += "    function move(direction) {\n";

  425.     ptr += "      if (gameOver || gameWon) return;\n";

  426.     ptr += "      \n";

  427.     ptr += "      let moved = false;\n";

  428.     ptr += "      \n";

  429.     ptr += "      // 创建网格副本用于比较\n";

  430.     ptr += "      const previousGrid = JSON.parse(JSON.stringify(grid));\n";

  431.     ptr += "      \n";

  432.     ptr += "      // 根据方向执行移动\n";

  433.     ptr += "      switch (direction) {\n";

  434.     ptr += "        case 'up':\n";

  435.     ptr += "          moved = moveUp();\n";

  436.     ptr += "          break;\n";

  437.     ptr += "        case 'right':\n";

  438.     ptr += "          moved = moveRight();\n";

  439.     ptr += "          break;\n";

  440.     ptr += "        case 'down':\n";

  441.     ptr += "          moved = moveDown();\n";

  442.     ptr += "          break;\n";

  443.     ptr += "        case 'left':\n";

  444.     ptr += "          moved = moveLeft();\n";

  445.     ptr += "          break;\n";

  446.     ptr += "      }\n";

  447.     ptr += "      \n";

  448.     ptr += "      // 如果有移动，添加新方块并更新网格\n";

  449.     ptr += "      if (moved) {\n";

  450.     ptr += "        addRandomTile();\n";

  451.     ptr += "        updateGrid();\n";

  452.     ptr += "        \n";

  453.     ptr += "        // 检查是否获胜\n";

  454.     ptr += "        if (checkWin()) {\n";

  455.     ptr += "          gameWon = true;\n";

  456.     ptr += "          showGameMessage(true);\n";

  457.     ptr += "        }\n";

  458.     ptr += "        // 检查是否游戏结束\n";

  459.     ptr += "        else if (checkGameOver()) {\n";

  460.     ptr += "          gameOver = true;\n";

  461.     ptr += "          showGameMessage(false);\n";

  462.     ptr += "        }\n";

  463.     ptr += "      }\n";

  464.     ptr += "    }\n";

  465.     

  466.     ptr += "    // 向上移动\n";

  467.     ptr += "    function moveUp() {\n";

  468.     ptr += "      let moved = false;\n";

  469.     ptr += "      \n";

  470.     ptr += "      for (let col = 0; col < 4; col++) {\n";

  471.     ptr += "        // 合并相同的数字\n";

  472.     ptr += "        for (let row = 0; row < 3; row++) {\n";

  473.     ptr += "          if (grid[row][col] !== 0) {\n";

  474.     ptr += "            for (let nextRow = row + 1; nextRow < 4; nextRow++) {\n";

  475.     ptr += "              if (grid[nextRow][col] !== 0) {\n";

  476.     ptr += "                if (grid[row][col] === grid[nextRow][col]) {\n";

  477.     ptr += "                  grid[row][col] *= 2;\n";

  478.     ptr += "                  grid[nextRow][col] = 0;\n";

  479.     ptr += "                  updateScore(grid[row][col]);\n";

  480.     ptr += "                  moved = true;\n";

  481.     ptr += "                }\n";

  482.     ptr += "                break;\n";

  483.     ptr += "              }\n";

  484.     ptr += "            }\n";

  485.     ptr += "          }\n";

  486.     ptr += "        }\n";

  487.     ptr += "        \n";

  488.     ptr += "        // 移动所有方块\n";

  489.     ptr += "        for (let row = 0; row < 3; row++) {\n";

  490.     ptr += "          if (grid[row][col] === 0) {\n";

  491.     ptr += "            for (let nextRow = row + 1; nextRow < 4; nextRow++) {\n";

  492.     ptr += "              if (grid[nextRow][col] !== 0) {\n";

  493.     ptr += "                grid[row][col] = grid[nextRow][col];\n";

  494.     ptr += "                grid[nextRow][col] = 0;\n";

  495.     ptr += "                moved = true;\n";

  496.     ptr += "                row--; // 重新检查当前行\n";

  497.     ptr += "                break;\n";

  498.     ptr += "              }\n";

  499.     ptr += "            }\n";

  500.     ptr += "          }\n";

  501.     ptr += "        }\n";

  502.     ptr += "      }\n";

  503.     ptr += "      \n";

  504.     ptr += "      return moved;\n";

  505.     ptr += "    }\n";

  506.     

  507.     ptr += "    // 向右移动\n";

  508.     ptr += "    function moveRight() {\n";

  509.     ptr += "      let moved = false;\n";

  510.     ptr += "      \n";

  511.     ptr += "      for (let row = 0; row < 4; row++) {\n";

  512.     ptr += "        // 合并相同的数字\n";

  513.     ptr += "        for (let col = 3; col > 0; col--) {\n";

  514.     ptr += "          if (grid[row][col] !== 0) {\n";

  515.     ptr += "            for (let prevCol = col - 1; prevCol >= 0; prevCol--) {\n";

  516.     ptr += "              if (grid[row][prevCol] !== 0) {\n";

  517.     ptr += "                if (grid[row][col] === grid[row][prevCol]) {\n";

  518.     ptr += "                  grid[row][col] *= 2;\n";

  519.     ptr += "                  grid[row][prevCol] = 0;\n";

  520.     ptr += "                  updateScore(grid[row][col]);\n";

  521.     ptr += "                  moved = true;\n";

  522.     ptr += "                }\n";

  523.     ptr += "                break;\n";

  524.     ptr += "              }\n";

  525.     ptr += "            }\n";

  526.     ptr += "          }\n";

  527.     ptr += "        }\n";

  528.     ptr += "        \n";

  529.     ptr += "        // 移动所有方块\n";

  530.     ptr += "        for (let col = 3; col > 0; col--) {\n";

  531.     ptr += "          if (grid[row][col] === 0) {\n";

  532.     ptr += "            for (let prevCol = col - 1; prevCol >= 0; prevCol--) {\n";

  533.     ptr += "              if (grid[row][prevCol] !== 0) {\n";

  534.     ptr += "                grid[row][col] = grid[row][prevCol];\n";

  535.     ptr += "                grid[row][prevCol] = 0;\n";

  536.     ptr += "                moved = true;\n";

  537.     ptr += "                col++; // 重新检查当前列\n";

  538.     ptr += "                break;\n";

  539.     ptr += "              }\n";

  540.     ptr += "            }\n";

  541.     ptr += "          }\n";

  542.     ptr += "        }\n";

  543.     ptr += "      }\n";

  544.     ptr += "      \n";

  545.     ptr += "      return moved;\n";

  546.     ptr += "    }\n";

  547.     

  548.     ptr += "    // 向下移动\n";

  549.     ptr += "    function moveDown() {\n";

  550.     ptr += "      let moved = false;\n";

  551.     ptr += "      \n";

  552.     ptr += "      for (let col = 0; col < 4; col++) {\n";

  553.     ptr += "        // 合并相同的数字\n";

  554.     ptr += "        for (let row = 3; row > 0; row--) {\n";

  555.     ptr += "          if (grid[row][col] !== 0) {\n";

  556.     ptr += "            for (let prevRow = row - 1; prevRow >= 0; prevRow--) {\n";

  557.     ptr += "              if (grid[prevRow][col] !== 0) {\n";

  558.     ptr += "                if (grid[row][col] === grid[prevRow][col]) {\n";

  559.     ptr += "                  grid[row][col] *= 2;\n";

  560.     ptr += "                  grid[prevRow][col] = 0;\n";

  561.     ptr += "                  updateScore(grid[row][col]);\n";

  562.     ptr += "                  moved = true;\n";

  563.     ptr += "                }\n";

  564.     ptr += "                break;\n";

  565.     ptr += "              }\n";

  566.     ptr += "            }\n";

  567.     ptr += "          }\n";

  568.     ptr += "        }\n";

  569.     ptr += "        \n";

  570.     ptr += "        // 移动所有方块\n";

  571.     ptr += "        for (let row = 3; row > 0; row--) {\n";

  572.     ptr += "          if (grid[row][col] === 0) {\n";

  573.     ptr += "            for (let prevRow = row - 1; prevRow >= 0; prevRow--) {\n";

  574.     ptr += "              if (grid[prevRow][col] !== 0) {\n";

  575.     ptr += "                grid[row][col] = grid[prevRow][col];\n";

  576.     ptr += "                grid[prevRow][col] = 0;\n";

  577.     ptr += "                moved = true;\n";

  578.     ptr += "                row++; // 重新检查当前行\n";

  579.     ptr += "                break;\n";

  580.     ptr += "              }\n";

  581.     ptr += "            }\n";

  582.     ptr += "          }\n";

  583.     ptr += "        }\n";

  584.     ptr += "      }\n";

  585.     ptr += "      \n";

  586.     ptr += "      return moved;\n";

  587.     ptr += "    }\n";

  588.     

  589.     ptr += "    // 向左移动\n";

  590.     ptr += "    function moveLeft() {\n";

  591.     ptr += "      let moved = false;\n";

  592.     ptr += "      \n";

  593.     ptr += "      for (let row = 0; row < 4; row++) {\n";

  594.     ptr += "        // 合并相同的数字\n";

  595.     ptr += "        for (let col = 0; col < 3; col++) {\n";

  596.     ptr += "          if (grid[row][col] !== 0) {\n";

  597.     ptr += "            for (let nextCol = col + 1; nextCol < 4; nextCol++) {\n";

  598.     ptr += "              if (grid[row][nextCol] !== 0) {\n";

  599.     ptr += "                if (grid[row][col] === grid[row][nextCol]) {\n";

  600.     ptr += "                  grid[row][col] *= 2;\n";

  601.     ptr += "                  grid[row][nextCol] = 0;\n";

  602.     ptr += "                  updateScore(grid[row][col]);\n";

  603.     ptr += "                  moved = true;\n";

  604.     ptr += "                }\n";

  605.     ptr += "                break;\n";

  606.     ptr += "              }\n";

  607.     ptr += "            }\n";

  608.     ptr += "          }\n";

  609.     ptr += "        }\n";

  610.     ptr += "        \n";

  611.     ptr += "        // 移动所有方块\n";

  612.     ptr += "        for (let col = 0; col < 3; col++) {\n";

  613.     ptr += "          if (grid[row][col] === 0) {\n";

  614.     ptr += "            for (let nextCol = col + 1; nextCol < 4; nextCol++) {\n";

  615.     ptr += "              if (grid[row][nextCol] !== 0) {\n";

  616.     ptr += "                grid[row][col] = grid[row][nextCol];\n";

  617.     ptr += "                grid[row][nextCol] = 0;\n";

  618.     ptr += "                moved = true;\n";

  619.     ptr += "                col--; // 重新检查当前列\n";

  620.     ptr += "                break;\n";

  621.     ptr += "              }\n";

  622.     ptr += "            }\n";

  623.     ptr += "          }\n";

  624.     ptr += "        }\n";

  625.     ptr += "      }\n";

  626.     ptr += "      \n";

  627.     ptr += "      return moved;\n";

  628.     ptr += "    }\n";

  629.     

  630.     // 修复事件***和初始化代码

  631.     ptr += "    // 加载最高分\n";

  632.     ptr += "    function loadBestScore() {\n";

  633.     ptr += "      const savedBestScore = localStorage.getItem('bestScore');\n";

  634.     ptr += "      if (savedBestScore) {\n";

  635.     ptr += "        bestScore = parseInt(savedBestScore);\n";

  636.     ptr += "        bestScoreElement.textContent = bestScore;\n";

  637.     ptr += "      }\n";

  638.     ptr += "    }\n";

  639.     

  640.     ptr += "    // 事件***\n";

  641.     ptr += "    newGameBtn.addEventListener('click', initGame);\n";

  642.     ptr += "    retryBtn.addEventListener('click', initGame);\n";

  643.     ptr += "    upBtn.addEventListener('click', () => move('up'));\n";

  644.     ptr += "    rightBtn.addEventListener('click', () => move('right'));\n";

  645.     ptr += "    downBtn.addEventListener('click', () => move('down'));\n";

  646.     ptr += "    leftBtn.addEventListener('click', () => move('left'));\n";

  647.     

  648.     ptr += "    // 键盘控制\n";

  649.     ptr += "    document.addEventListener('keydown', (e) => {\n";

  650.     ptr += "      if (gameOver || gameWon) return;\n";

  651.     ptr += "      \n";

  652.     ptr += "      switch (e.key) {\n";

  653.     ptr += "        case 'ArrowUp':\n";

  654.     ptr += "          move('up');\n";

  655.     ptr += "          break;\n";

  656.     ptr += "        case 'ArrowRight':\n";

  657.     ptr += "          move('right');\n";

  658.     ptr += "          break;\n";

  659.     ptr += "        case 'ArrowDown':\n";

  660.     ptr += "          move('down');\n";

  661.     ptr += "          break;\n";

  662.     ptr += "        case 'ArrowLeft':\n";

  663.     ptr += "          move('left');\n";

  664.     ptr += "          break;\n";

  665.     ptr += "      }\n";

  666.     ptr += "    });\n";

  667.     

  668.     ptr += "    // 触摸控制\n";

  669.     ptr += "    let touchStartX = 0;\n";

  670.     ptr += "    let touchStartY = 0;\n";

  671.     ptr += "    let touchEndX = 0;\n";

  672.     ptr += "    let touchEndY = 0;\n";

  673.     

  674.     ptr += "    document.addEventListener('touchstart', (e) => {\n";

  675.     ptr += "      touchStartX = e.touches[0].clientX;\n";

  676.     ptr += "      touchStartY = e.touches[0].clientY;\n";

  677.     ptr += "    }, false);\n";

  678.     

  679.     ptr += "    document.addEventListener('touchend', (e) => {\n";

  680.     ptr += "      if (gameOver || gameWon) return;\n";

  681.     ptr += "      \n";

  682.     ptr += "      touchEndX = e.changedTouches[0].clientX;\n";

  683.     ptr += "      touchEndY = e.changedTouches[0].clientY;\n";

  684.     ptr += "      \n";

  685.     ptr += "      const deltaX = touchEndX - touchStartX;\n";

  686.     ptr += "      const deltaY = touchEndY - touchStartY;\n";

  687.     ptr += "      \n";

  688.     ptr += "      // 确定滑动方向\n";

  689.     ptr += "      if (Math.abs(deltaX) > Math.abs(deltaY)) {\n";

  690.     ptr += "        // 水平滑动\n";

  691.     ptr += "        if (deltaX > 20) {\n";

  692.     ptr += "          move('right');\n";

  693.     ptr += "        } else if (deltaX < -20) {\n";

  694.     ptr += "          move('left');\n";

  695.     ptr += "        }\n";

  696.     ptr += "      } else {\n";

  697.     ptr += "        // 垂直滑动\n";

  698.     ptr += "        if (deltaY > 20) {\n";

  699.     ptr += "          move('down');\n";

  700.     ptr += "        } else if (deltaY < -20) {\n";

  701.     ptr += "          move('up');\n";

  702.     ptr += "        }\n";

  703.     ptr += "      }\n";

  704.     ptr += "    }, false);\n";

  705.     

  706.     ptr += "    // 阻止页面滚动\n";

  707.     ptr += "    document.addEventListener('touchmove', (e) => {\n";

  708.     ptr += "      if (e.target.closest('.grid-container')) {\n";

  709.     ptr += "        e.preventDefault();\n";

  710.     ptr += "      }\n";

  711.     ptr += "    }, { passive: false });\n";

  712.     

  713.     ptr += "    // 初始化\n";

  714.     ptr += "    loadBestScore();\n";

  715.     ptr += "    initGame();\n";

  716.     ptr += "  </script>\n";

  717.     ptr += "</body>\n";

  718.     ptr += "</html>\n";

  719.     

  720.     return ptr;

  721. }
复制代码

TueSeptember-202509233258..png
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
撰写新帖
关于楼主

楼主的其它帖子

background 创造力兑换 background 心愿单 background 创客导航
上海智位机器人股份有限公司 沪ICP备09038501号-4 备案 沪公网安备31011502402448

© 2013-2025 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail