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

最新推荐文章于 2024-06-16 17:04:32 发布

Freshman小白

最新推荐文章于 2024-06-16 17:04:32 发布

阅读量1.5k

点赞数 5

文章标签： html 前端 css javascript

本文链接：https://blog.csdn.net/weixin_67016521/article/details/130907062

版权

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

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

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

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

1.编写html代码

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

<!DOCTYPE html>
<html>
<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>在线石头剪刀布</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="result">
    <div id="players">
      <div id="player-icon" class="player"></div>
      <div id="computer-icon" class="player"></div>
    </div>
    <div id="choices"></div>
    <div id="outcome"></div>
  </div>  
  <div >
    <button id="scissors" onclick="playTurn('scissors')">✌️</button>
    <button id="rock" onclick="playTurn('rock')">✊</button>
    <button id="paper" onclick="playTurn('paper')">🖐️</button>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

body部分有一下组成：

1.显示结果的result框：

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

<div id="players">
      <div id="player-icon" class="player"></div>
      <div id="computer-icon" class="player"></div>
    </div>

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

<div id="choices"></div>

2.显示输出的outcome框：

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

<div id="outcome"></div>

3.选择出拳的按钮框

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

并添加onclick点击事件

<div >
    <button id="scissors" onclick="playTurn('scissors')">✌️</button>
    <button id="rock" onclick="playTurn('rock')">✊</button>
    <button id="paper" onclick="playTurn('paper')">🖐️</button>
  </div>

那么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 = `
    <div>${emojiOf(playerChoice)}</div>
    <div>${emojiOf(computerChoice)}</div>
  `;
  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 !";
  }
}