Skip to content

✊
✊✌️🖐️

Freshman小白 / ✊✌️🖐️
与 Fork 源项目一致

Fork自 inscode / HTML-CSS-JS

通知 1
Star 7
Fork 3
✊
✊✌️🖐️

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 361ad24e 编写于 作者: 6 62ba7085b5587201978beaa0
浏览文件
操作

Auto Commit

上级 ef53fd87
隐藏空白更改
内联 并排
Showing with 141 addition and 15 deletion
index.html
浏览文件 @ 361ad24e
<!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>
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%;
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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或