- 欢迎来到 InsCode
+
+
+
+
-
+
+
+ 😶
+ 🤖️
+
+
+
+
+
+
-
\ No newline at end of file
+
diff --git a/script.js b/script.js
index e69de29..bdfd375 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1,60 @@
+// 定义变量，记录双方出拳
+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 = `
+ ${emojiOf(playerChoice)}
+ ${emojiOf(computerChoice)}
+ `;
+ 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 "你输了！";
+ }
+}
+
diff --git a/style.css b/style.css
index b71aefe..6182b47 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,65 @@
-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
--
GitLab