使用HTML制作猜拳小游戏，用1-3来代替

在HTML中制作猜拳小游戏，通常我们会简化为1-3代表“石头”、“剪刀”和“布”。以下是基本的步骤：

1. **HTML结构**:
- 创建一个表单，包括两个输入框分别用于用户输入和一个隐藏的按钮用于提交：

   <form id="guessForm">
     <input type="number" id="userGuess" placeholder="请输入1-3">
     <button type="submit" id="submitBtn" style="display:none;">猜拳</button>
   </form>
   <p id="result"></p>

2. **CSS样式**:
- 可以对表单元素进行基本的样式调整：

   form {
     display: flex;
     justify-content: center;
   }
   input {
     margin-right: 10px;
   }

3. **JavaScript逻辑**:
- 获取表单元素，设置提交事件监听器，模拟计算机出拳并在获胜判断后更新结果显示：

   const guessForm = document.getElementById('guessForm');
   const userGuessInput = document.getElementById('userGuess');
   const resultElement = document.getElementById('result');

   guessForm.addEventListener('submit', function(event) {
     event.preventDefault(); // 阻止表单默认提交行为
     const userGuess = parseInt(userGuessInput.value); // 转换输入为整数
     if (userGuess >= 1 && userGuess <= 3) { // 检查是否在1-3范围内
       resultElement.innerHTML = "计算机出了..."; // 显示等待信息
       setTimeout(() => {
         const randomComputerGuess = Math.floor(Math.random() * 3) + 1; // 1-3之间的随机数
         if (userGuess === randomComputerGuess) {
           resultElement.innerHTML = `平局！您选择了${userGuess}，计算机也选了${randomComputerGuess}`;
         } else {
           resultElement.innerHTML =
             `${(userGuess > randomComputerGuess ? '您' : '计算机')}赢了！您选择了${userGuess}，计算机选择了${randomComputerGuess}`;
         }
       }, 500); // 延迟一段时间展示结果
     } else {
       alert('请输入1到3之间的数字！');
     }
   });

这个简单版本的游戏中，用户通过输入1-3猜测，电脑随机出拳，然后在一定延迟后显示结果。