抖音上情侣玩的小游戏--猜数字单身狗没朋友也能玩附HTML源码

最新推荐文章于 2024-03-11 12:53:07 发布

渣男

最新推荐文章于 2024-03-11 12:53:07 发布

阅读量3.8k

点赞数

文章标签： javascript html5 游戏

本文链接：https://blog.csdn.net/weixin_44670249/article/details/121615914

版权

先上图

代码如下直接运行即可欢迎各位大佬提意见

<!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>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        outline: unset;
        font-family: Menlo;
      }
      body {
        background-color: rgb(235, 234, 198);
      }
      .shadow {
        box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
      }
      .container {
        width: 800px;
        background-color: rgb(194, 214, 238);
        border-radius: 20px;
        margin: auto;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        /* border: 1px solid #222; */
      }
      .container > * {
        margin: 20px;
      }
      .btn-group {
        display: flex;
        justify-content: space-around;
        padding: 10px;
      }
      button {
        padding: 12px 10px;
        border-radius: 4px;
        border: none;
        box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
      }
      #answer {
        font-size: 18px;
        color: rgb(6, 19, 133);
        display: inline-block;
        width: 80px;
        text-align: center;
      }
      .middle {
        display: flex;
        justify-content: space-between;
        box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
        padding: 10px;
      }
      .main {
        width: 63%;
      }
      .desc {
        width: 35%;
      }
      #history {
        height: 500px;
        border: 1px dashed #ccc;
        box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, 0.2);
      }
      .history-item {
        text-align: center;
        font-size: 40px;
        color: #2c6030;
        letter-spacing: 30px;
        gin-right: 40px;
      }
      .history-result {
        color: tomato;
        letter-spacing: 10px;
      }
      .footer {
        margin: auto;
        text-align: center;
        margin: 20px;
      }
      #answerInput {
        outline: unset;
        padding: 12px 10px;
        margin-right: 20px;
        width: 33px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="btn-group">
        <div class="show-answer">
          <span id="answer">****</span>
          <button id="showAnswer" onclick="showAnswer()">显示答案</button>
        </div>
        <button onclick="restart()">重新开始</button>
      </div>
      <div class="middle">
        <div class="main">
          <div id="history"></div>
        </div>
        <div class="desc">
          玩法说明： <br />
          1A：<br />
          代表有一个数字猜对并且位置正确 <br />
          1B：<br />代表有一个数字对但是位置不正确 <br />
          如：<br />
          答案为 1234 猜测为 1246 <br />
          1 和 2 猜对了,且位置正确<br />
          所以为 2A <br />
          4 数字正确但位置不对<br />
          所以为 1B <br />
          所以显示结果为 2A1B
          <br />
          <br />
          <br />
          答案为1-9组成的不重复的四位数
        </div>
      </div>
      <div class="footer">
        <input id="answerInput" type="text" />
        <button onclick="judgeRest()">检查答案</button>
        <span id="res"></span>
      </div>
    </div>

    <script>
      let number
      // 生成随机数
      const initNum = (len = 4) => {
        const arr = []
        while (arr.length < len) {
          const num = ~~(Math.random() * 10)
          if (!arr.includes(num) && num > 0) {
            arr.push(num)
          }
        }
        return arr
      }

      // 显示/隐藏答案
      const showAnswer = flag => {
        const showAnswerBtn = document.getElementById('showAnswer')
        const answerEl = document.getElementById('answer')
        if (flag === false) {
          showAnswerBtn.innerText = '显示答案'
          answerEl.innerText = '****'
          return
        }
        if (showAnswerBtn.innerText === '显示答案') {
          showAnswerBtn.innerText = '隐藏答案'
          answerEl.innerText = number.toString().replace(/,/g, ' ')
        } else {
          showAnswerBtn.innerText = '显示答案'
          answerEl.innerText = '****'
        }
      }

      // 判断结果
      const judgeRest = () => {
        const str = document.getElementById('answerInput').value
        const inputReg = /^[1-9]{4}$/
        const isRepeat = new Set(str).size !== str.length
        if (!inputReg.test(str) || isRepeat) {
          alert(`请检查您的输入，输入的值只能为 1~9组成的不重复的4位数`)
          return
        }
        const strArr = str.split('')
        let numA = 0
        let numB = 0
        strArr.map((num, index) => {
          num = ~~num
          if (number.includes(num)) {
            if (number.indexOf(num) === index) {
              numA++
            } else {
              numB++
            }
          }
        })
        if (numA === 4) {
          const SUCCESSTIP =
            '牛逼，猜对了，但你还是单身狗，没人陪你玩游戏...不如再玩一局吧。'
          if (confirm(SUCCESSTIP)) {
            initNewGame()
          }
          return
        }
        setHistory(`${numA}A${numB}B`)
      }

      const setHistory = (str = '') => {
        const historyBox = document.getElementById('history')
        const answerInputEl = document.getElementById('answerInput')

        if (str) {
          historyBox.innerHTML += `<p class="history-item">
              <span class="history-text">${answerInputEl.value}</span>
              <span class="history-result">${str}</span>
            </p>`
        } else {
          historyBox.innerHTML = ''
        }
        document.getElementById('answerInput').value = ''
      }
      const restart = () => {
        if (confirm('确定要重新开始游戏吗？')) {
          initNewGame()
        }
      }
      const initNewGame = () => {
        number = initNum()
        showAnswer(false)
        setHistory('')
        document.getElementById('answerInput').value = ''
      }
      initNewGame()
    </script>
  </body>
</html>

渣男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
抖音上情侣玩的小游戏--猜数字单身狗没朋友也能玩附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-sca
复制链接

扫一扫