Auto Commit

361ad24e · 62ba7085b5587201978beaa0 · ef53fd87 · 361ad24e · 361ad24e · 361ad24e
隐藏空白更改
内联并排

Showing with 141 addition and 15 deletion

index.html index.html +21 -11

script.js script.js +60 -0

style.css style.css +60 -4

未找到文件。
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
-<html lang="en">
+<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">
-    <link href="style.css" rel="stylesheet" type="text/css" />
-    <title>InsCode</title>
+  <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 class="container">
-        <img src="src/assets/logo.svg" alt="InsCode">
-        <div>欢迎来到 InsCode</div>
+  <div id="result">
+    <div id="players">
+      <div id="player-icon" class="player">😶</div>
+      <div id="computer-icon" class="player">🤖️</div>
    </div>
-    <script src="script.js"></script>
+    <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>
\ No newline at end of file
+</html>
--- a/script.js
+++ b/script.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];
+}
+
+// 定义函数，用于开始游戏
+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.querySelector("#player-icon div");
+  playerIcon.style.color = "#3498db";
+  playerIcon.style.fontSize = "6rem";
+  const computerIcon = document.querySelector("#computer-icon div");
+  computerIcon.style.color = "#e74c3c";
+  computerIcon.style.fontSize = "6rem";
+}
+
+
+// 定义函数，用于将出拳转为 Emoji 显示
+function emojiOf(choice) {
+  switch (choice) {
+    case "scissors":
+      return "✌️";
+    case "rock":
+      return "✊";
+    case "paper":
+      return "🖐️";
+    default:
+      return "";
+  }
+}
+
+function determineOutcome(playerChoice, computerChoice) {
+  if (playerChoice === computerChoice) {
+    return "打平了！";
+  } else if (
+    (playerChoice === "scissors" && computerChoice === "paper") ||
+    (playerChoice === "rock" && computerChoice === "scissors") ||
+    (playerChoice === "paper" && computerChoice === "rock")
+  ) {
+    return "你赢了！";
+  } else {
+    return "你输了！";
+  }
+}
+
--- a/style.css
+++ b/style.css
-html{
+html,
+body {
  height: 100%;
  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }

-.container {
-  text-align: center;
-  padding: 64px;
+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;
+}
+
+
+#result {
+  font-size: 2rem;
+  margin: 10px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+
+
+#players{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 80%;
+}
+
+
+
+#choices{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 80%;
 }
\ No newline at end of file