用Html做一个石头剪刀布小游戏

小白最近发现csdn文章可以嵌入inscode，并且读者阅读时直接可以点击运行，十分有趣！所以小白就尝试做了一个石头剪刀布的小游戏项目在inscode，顺便体验一回在博客中使用:

(挺弱智的，大家当作六一回味童真吧哈哈)

​​​​​​​建议全屏或打开网页查看哦

简单讲讲制作流程，你也能轻松学会：

1.编写html代码

html部分我设计的非常简单，简单的模版加几个标签：

  
  
  
  
  


  

    

      

      

    
    

    

  
  
  

    ✌️
    ✊
    ️
  
  
  

body部分有一下组成：

1.显示结果的result框：

这是用来显示电脑和玩家图标的标签

下面是显示双方出拳的标签，在js中可以给这个标签添加文本

2.显示输出的outcome框：

同理在js中可以显示双发的胜负结果

3.选择出拳的按钮框

用三个emoji✊✌️️作为按钮图标

并添加onclick点击事件

    ✌️
    ✊
    ️
  

那么html就做好了

2.编写界面css

我让chatgpt帮我编写了按钮的css，效果还是不错的

1.按钮css

button {
  font-size: 3rem;
  margin: 10px;
  padding: 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

button:hover {
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.7);
}

#scissors {
  background-color: #f5f5f5;
  color: #555;
}

#rock {
  background-color: #e74c3c;
  color: white;
}

#paper {
  background-color: #3498db;
  color: white;
}

2. result框样式

关于水平对齐居中等一些就不多说了，通过设置可以让所有元素都在页面居中了

html,
body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#result {
  font-size: 2rem;
  margin: 10px;
  width: 60%;
  text-align: center;
  height: 50%;
}



#players{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}



#choices{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20%;
}

3.编写js脚本

首先定义变量记录电脑和玩家出拳

// 定义变量，记录双方出拳
let playerChoice = "";
let computerChoice = "";

电脑出拳函数：

是用随机数生成出拳，结果返回出拳的文本

function computerPlay() {
  // 随机生成整数 0、1、2 分别代表剪刀、石头、布
  const choices = ["scissors", "rock", "paper"];
  const randomIndex = Math.floor(Math.random() * 3);
  return choices[randomIndex];
}

用函数把输出转化为emoji：

// 定义函数，用于将出拳转为 Emoji 显示
function emojiOf(choice) {
  switch (choice) {
    case "scissors":
      return "✌️";
    case "rock":
      return "✊";
    case "paper":
      return "️";
    default:
      return "";
  }
}

玩家出拳函数（游戏主函数）：

首先函数获取到点击按钮获得的出拳参数choice，再根据emojiOf(playerChoice)获取对应的emoji

其中通过document.getElementById("choices").innerHTML = 来给标签添加文本内容，也就是emoji：

function playTurn(choice) {
  playerChoice = choice;
  computerChoice = computerPlay();
  const iconsHTML = `
    
${emojiOf(playerChoice)}
    
${emojiOf(computerChoice)}
  `;
  const outcomeMessage = determineOutcome(playerChoice, computerChoice);
  document.getElementById("choices").innerHTML = iconsHTML;
  document.getElementById("outcome").innerHTML = outcomeMessage;
  const playerIcon = document.getElementById("player-icon");
  playerIcon.innerHTML = ''
  const computerIcon = document.getElementById("computer-icon");
  computerIcon.innerHTML = '️'
}

判断游戏结果的函数：

这里只需要简单的判断逻辑就好啦！

function determineOutcome(playerChoice, computerChoice) {
  if (playerChoice === computerChoice) {
    return " draw ";
  } else if (
    (playerChoice === "scissors" && computerChoice === "paper") ||
    (playerChoice === "rock" && computerChoice === "scissors") ||
    (playerChoice === "paper" && computerChoice === "rock")
  ) {
    return " wins !";
  } else {
    return "️ wins !";
  }
}

最后项目就完成啦！

当然你也可以把所有代码直接整合到一个html，然后用浏览器打开然后就能随时体验啦！

最后欢迎大家体验，克隆，修改我的项目，祝大家61愉快！