简单学习技术，写了一个小游戏，用html和js写一个简单的小游戏。玩家点击按钮出拳，玩家胜利结果显示绿色，玩家输了结果显示红色，平局结果显示蓝色。
页面效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>石头、剪刀、布 小游戏</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<style>
/* 添加样式以中心布局两个游戏并增加一些间距 */
.game-container {
text-align: center;
margin: 5% auto;
}
.game-container > button {
margin: 0 5px; /* 添加按钮间距 */
}
#result, #message {
margin: 20px 0;
}
</style>
</head>
<body>
<div class="game-container">
<h1>石头、剪刀、布 小游戏</h1>
<div id="choices">
<button onclick="play('石头')" class="layui-btn layui-btn-primary layui-border-blue">石头</button>
<button onclick="play('布')" class="layui-btn layui-btn-primary layui-border-orange">布</button>
<button onclick="play('剪刀')" class="layui-btn layui-btn-primary layui-border-green">剪刀</button>
</div>
<div id="result"></div>
</div>
<script src="./gamejs/game.js"></script>
</body>
</html>html解析：
1. `<!DOCTYPE html>`: 声明文档类型为 HTML5，告诉浏览器使用 HTML5 规范来解析页面。
2. `<html lang="en">`: HTML 标签，指定页面语言为英语。
3. `<head>`: 页面头部，包含了文档的元信息和引用的外部资源。
- `<meta charset="UTF-8">`: 声明文档使用 UTF-8 字符集编码。
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: 设置移动设备的视口大小，并且使用 1:1 的比例放大。
- `<title>石头、剪刀、布 小游戏</title>`: 设置页面标题为“石头、剪刀、布 小游戏”。
- `<link rel="stylesheet" href="../layui/css/layui.css" media="all">`: 引入外部样式表 layui.css，用于页面样式。
4. `<style>`: 内联样式，用于定义页面元素样式。
- `.game-container`: 设置游戏容器样式为居中布局，并增加一些间距。
- `.game-container > button`: 设置游戏按钮之间的间距。
- `#result, #message`: 设置结果和信息显示区域的样式。
5. `<body>`: 页面主体内容。
- `<div class="game-container">`: 游戏容器，包含了游戏标题、游戏选项按钮和结果显示区域。
- `<h1>石头、剪刀、布 小游戏</h1>`: 游戏标题。
- `<div id="choices">`: 游戏选项按钮容器。
- `<button οnclick="play('石头')" class="layui-btn layui-btn-primary layui-border-blue">石头</button>`: 选择石头的按钮，点击后执行 play 函数。
- `<button οnclick="play('布')" class="layui-btn layui-btn-primary layui-border-orange">布</button>`: 选择布的按钮，点击后执行 play 函数。
- `<button οnclick="play('剪刀')" class="layui-btn layui-btn-primary layui-border-green">剪刀</button>`: 选择剪刀的按钮，点击后执行 play 函数。
- `<div id="result"></div>`: 结果显示区域，用于显示游戏结果。
6. `<script src="./gamejs/game.js"></script>`: 引入外部 JavaScript 文件 game.js，用于实现游戏逻辑。
Js实现（game.js）：
function play(playerChoice) {
var choices = ['石头', '布', '剪刀']; // 可选择的选项
var computerChoice = choices[Math.floor(Math.random() * 3)]; // 电脑随机选择
var result;
if (playerChoice === computerChoice) {
result = '平手！';
document.getElementById('result').style.color = "blue"; // 玩家输时文字变成红色
} else if (
(playerChoice === '石头' && computerChoice === '剪刀') ||
(playerChoice === '剪刀' && computerChoice === '布') ||
(playerChoice === '布' && computerChoice === '石头')) {
result = '你赢了！';
document.getElementById('result').style.color = "green"; // 玩家赢时文字变成绿色
} else {
result = '你输了！';
document.getElementById('result').style.color = "red"; // 玩家输时文字变成红色
}
// 显示结果
document.getElementById('result').innerHTML = `
<div style="margin-left: 0%;margin-top: 1%;">
<span style="font-size:20px; font-style:normal;font-family:'宋体';color:#000000">你的选择: ${playerChoice} </span>
<br>
<span style="font-size:20px; font-style:normal;font-family:'宋体';color:#000000">电脑的选择: ${computerChoice} </span>
<br>
<span style="font-size:20px; font-style:normal;font-family:'宋体';">结果:${result} </span>
</div>
`;
}js解析：
-
function play(playerChoice) { ... }: 定义了一个名为 play 的函数，接受玩家选择的选项作为参数。 -
var choices = ['石头', '布', '剪刀'];: 创建一个包含可选择的选项的数组。 -
var computerChoice = choices[Math.floor(Math.random() * 3)];: 通过随机数生成电脑的选择，即从 choices 数组中随机选择一个选项作为电脑的选择。 -
var result;: 声明一个变量 result 用于存储游戏结果。 -
根据玩家和电脑的选择进行判断，更新结果和结果展示区域的文字颜色：
- 如果玩家和电脑选择相同，将结果设为平手，并将结果文字颜色设置为蓝色。
- 如果玩家胜利，将结果设为“你赢了！”，并将结果文字颜色设置为绿色。
- 如果玩家失败，将结果设为“你输了！”，并将结果文字颜色设置为红色。
-
使用
document.getElementById('result').innerHTML更新结果展示区域的内容，根据游戏结果和玩家与电脑的选择，动态生成展示的文本内容，并设置对应的字体样式和颜色。
目录结构：
效果：
