Skip to content

✊
✊石头✌️剪刀🖐️布

宝璐 / ✊石头✌️剪刀🖐️布
与 Fork 源项目一致

Fork自 Freshman小白 / ✊✌️🖐️

通知 1
Star 0
Fork 0
✊
✊石头✌️剪刀🖐️布
提交 361ad24e 编写于 作者: 6 62ba7085b5587201978beaa0
浏览文件
操作

Auto Commit

上级 ef53fd87
显示空白变更内容
内联 并排
Showing with 141 addition and 15 deletion
index.html
浏览文件 @ 361ad24e
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线石头剪刀布</title>
<link href="style.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" />
<title>InsCode</title>
</head> </head>
<body> <body>
<div class="container"> <div id="result">
<img src="src/assets/logo.svg" alt="InsCode"> <div id="players">
<div>欢迎来到 InsCode</div> <div id="player-icon" class="player">😶</div>
<div id="computer-icon" class="player">🤖️</div>
</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> <script src="script.js"></script>
</body> </body>
</html> </html>
script.js
浏览文件 @ 361ad24e
// 定义变量，记录双方出拳
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 "你输了！";
}
}
style.css
浏览文件 @ 361ad24e
html{ html,
body {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.container { button {
text-align: center; font-size: 3rem;
padding: 64px; 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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或