【益智游戏】开锁小游戏+ChatGPT写html代码

本文链接：https://blog.csdn.net/qq_21201267/article/details/131305657

跟军哥吃饭聊天，说到一些个有意思的思维题目，说是小学五年级的题目，我竟然想了好久，问的GPT才恍然大悟！哈哈，记录下，顺便给小孩讲讲 + 在网页上玩一玩！

游戏规则：
密码锁有3位，每位只能是0或者1，现在锁坏掉了，你只要猜对密码的任意两位数字，就可以打开这把锁。

请你尽可能用最少的次数打开它！

解题思路：
一共有8种可能的密码：

注意：我们只要任意答对2位就可以了。

如果我们一开始第一次猜就打开了锁。恭喜你运气超级好！
如果第一次没有打开锁，说明我们只猜对了1位或者0位数字，那我们对所有的数字取反（0变成1，1变成0），是不是就可以在第二次猜对2位或者3位数字，即满足要求（猜对任意两位数字）打开了锁

所以我们最多只需要2次就可以打开这把锁哦！

下面我们用 chatgpt 来生成一个网页版的小游戏
在这里插入图片描述

然后粘贴到一个txt文档里，再简单修改下+改下后缀名为 html就可以了。

在这里插入图片描述
直接贴出html代码

<!DOCTYPE html>
<html>
<head>
  <title>密码游戏</title>
  <style>
    .button {
      width: 100px;
      height: 50px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>密码游戏</h1>
  <h2>游戏规则：密码锁有3位，每位只能是0或者1，现在锁坏掉了，你只要猜对密码的任意两位数字，就可以打开这把锁。请你尽可能用最少的次数打开它！</h2>
  
  <button class="button" id="startButton" onclick="startGame()">开始</button>
  <button class="button" id="resetButton" onclick="resetGame()" disabled>重玩</button>
  <br><br>
  
  <button class="button" id="button1" onclick="toggleButton(1)">*</button>
  <button class="button" id="button2" onclick="toggleButton(2)">*</button>
  <button class="button" id="button3" onclick="toggleButton(3)">*</button>
  <br><br>
  
  <button class="button" id="confirmButton" onclick="confirmPassword()" disabled>确认密码</button>
  <br><br>
  
  <h3>确认次数: <span id="counter">0</span></h3>
  
  <script>
    var password = generateRandomBinaryPassword(3);  // 设置密码
    var guess = "abc";                              // 用户猜测的密码
    var counter = 0;                                // 确认次数

    function generateRandomBinaryPassword(length) {
      var password = "";
      for (var i = 0; i < length; i++) {
        password += Math.round(Math.random());
      }
      return password;
    }

    function startGame() {
      document.getElementById("startButton").disabled = true;
      document.getElementById("resetButton").disabled = false;
      document.getElementById("button1").disabled = false;
      document.getElementById("button2").disabled = false;
      document.getElementById("button3").disabled = false;
      document.getElementById("confirmButton").disabled = false;
    }

    function resetGame() {
      document.getElementById("startButton").disabled = false;
      document.getElementById("resetButton").disabled = true;
      document.getElementById("button1").innerHTML = "*";
      document.getElementById("button2").innerHTML = "*";
      document.getElementById("button3").innerHTML = "*";
      document.getElementById("button1").disabled = true;
      document.getElementById("button2").disabled = true;
      document.getElementById("button3").disabled = true;
      document.getElementById("confirmButton").disabled = true;
      document.getElementById("counter").innerHTML = "0";
      guess = "abc";
      counter = 0;
      password = generateRandomBinaryPassword(3);
    }

    function toggleButton(buttonId) {
      var button = document.getElementById("button" + buttonId);
      if (button.innerHTML === "0") {
        button.innerHTML = "1";
      } else {
        button.innerHTML = "0";
      }
    }

    function confirmPassword() {
      var button1Value = document.getElementById("button1").innerHTML;
      var button2Value = document.getElementById("button2").innerHTML;
      var button3Value = document.getElementById("button3").innerHTML;
      guess = button1Value + button2Value + button3Value;
      counter++;
      document.getElementById("counter").innerHTML = counter;
      
      if (hasMatchingDigits(guess, password)) {
        alert("您猜对至少两位密码已打开锁。\n原密码是: " + password + "\n您猜的是: " + guess + "\n共猜了" + counter + " 次。");
      } else {
        alert("密码错误！请重新尝试。");
      }
    }
    
    function hasMatchingDigits(str1, str2) {
      var matchingDigits = 0;
      for (var i = 0; i < str1.length; i++) {
        if (str1[i] === str2[i]) {
          matchingDigits++;
        }
      }
      return matchingDigits >= 2;
    }
  </script>
</body>
</html>