
在学习javascript并尝试构建一个简单的“剪刀石头布”游戏时,开发者常常会利用confirm和prompt等浏览器内置函数与用户进行交互。然而,这些函数在特定场景下的行为特性,如果处理不当,可能会导致一些意料之外的问题。本教程将针对两个常见问题进行深入分析和修复,以帮助您构建一个更健壮、更完整的游戏。
原始代码在用户点击prompt对话框的“确定”按钮但未输入任何内容时,以及点击“取消”按钮时,都未能正确地引导用户或处理输入。具体表现为:
问题分析:
prompt函数在不同操作下的返回值有所不同:
在JavaScript中,null和空字符串 "" 都被认为是“假值”(falsy values)。因此,原始代码中的 if (startgame) 条件在用户点击“确定”但未输入,或者点击“取消”时,都会被评估为 false,导致逻辑分支未能按预期执行。
立即学习“Java免费学习笔记(深入)”;
解决方案:
我们需要区分用户是点击了“取消”还是点击了“确定”但输入为空。
我们可以通过检查 startgame !== null 来判断用户是否点击了“取消”,然后进一步检查 playerchoice 是否为空或无效。
示例代码:
let playgame = confirm("Do you want to play game?");
if (playgame) {
let startgame = prompt("Choose from r, p, s?");
// 检查用户是否点击了“取消”
if (startgame !== null) { // 用户没有点击“取消”
let playerchoice = startgame.trim().toLowerCase(); // 清除空格并转小写
// 检查玩家输入是否有效
if (playerchoice === "r" || playerchoice === "s" || playerchoice === "p") {
// 游戏核心逻辑
// ... (此处省略,将在问题二中详细说明)
} else {
// 用户输入无效(包括空字符串)
alert("你没有选择 r, p, s");
}
} else {
// 用户点击了“取消”
alert("改变主意了?没关系");
}
} else {
alert("下次再玩吧!");
}注意事项:
原始代码在判断游戏结果时,只覆盖了平局和部分玩家获胜的情况,导致许多对战组合未能正确判定胜负,有时甚至需要重复输入才能看到结果。
问题分析:
剪刀石头布游戏有九种可能的对战组合(玩家出拳3种 × 电脑出拳3种):
| 玩家出拳 | 电脑出拳 | 结果 |
|---|---|---|
| r (石头) | r (石头) | 平局 |
| r (石头) | p (布) | 电脑获胜 |
| r (石头) | s (剪刀) | 玩家获胜 |
| p (布) | r (石头) | 玩家获胜 |
| p (布) | p (布) | 平局 |
| p (布) | s (剪刀) | 电脑获胜 |
| s (剪刀) | r (石头) | 电脑获胜 |
| s (剪刀) | p (布) | 玩家获胜 |
| s (剪刀) | s (剪刀) | 平局 |
原始代码只处理了平局,以及 playerchoice === "p" && computer === "r" 和 playerchoice === "s" && computer === "p" 这两种玩家获胜的情况。它错误地将 playerchoice === "r" && computer === "s" 判断为电脑获胜,并且遗漏了所有电脑获胜的情况。
解决方案:
我们需要使用 if...else if...else 结构来确保所有可能的对战结果都被正确覆盖,并且逻辑是互斥的。
示例代码:
// ... (接问题一的输入处理代码)
if (playerchoice === "r" || playerchoice === "s" || playerchoice === "p") {
// 电脑随机选择
let compchoiceNum = Math.floor(Math.random() * 3); // 0, 1, 2
let computer;
if (compchoiceNum === 0) {
computer = "r";
} else if (compchoiceNum === 1) {
computer = "p"; // 修正:原来是s,应该对应p
} else { // compchoiceNum === 2
computer = "s"; // 修正:原来是p,应该对应s
}
// 提示电脑的选择
alert(`玩家选择了: ${playerchoice.toUpperCase()}\n电脑选择了: ${computer.toUpperCase()}`);
// 判断胜负
if (playerchoice === computer) {
alert("平局!");
} else if (
(playerchoice === "r" && computer === "s") || // 石头胜剪刀
(playerchoice === "p" && computer === "r") || // 布胜石头
(playerchoice === "s" && computer === "p") // 剪刀胜布
) {
alert("玩家获胜!");
} else {
// 其他所有情况都是电脑获胜
alert("电脑获胜!");
}
} else {
alert("你没有选择 r, p, s");
}
// ... (接问题一的输入处理代码)代码修正说明:
将上述两部分的修复合并,可以得到一个更完善的剪刀石头布游戏代码:
let playgame = confirm("你想玩游戏吗?");
if (playgame) {
let isValidInput = false;
let playerchoice;
// 使用循环确保玩家输入有效
while (!isValidInput) {
let startgame = prompt("请选择:r (石头), p (布), s (剪刀)");
if (startgame === null) { // 用户点击了“取消”
alert("改变主意了?没关系,下次再玩。");
playgame = false; // 退出游戏
break; // 退出循环
}
playerchoice = startgame.trim().toLowerCase();
if (playerchoice === "r" || playerchoice === "s" || playerchoice === "p") {
isValidInput = true; // 输入有效,退出循环
} else {
alert("无效输入。请选择 r, p, 或 s。");
}
}
if (playgame) { // 只有当用户没有取消游戏时才继续
// 电脑随机选择
const compchoiceNum = Math.floor(Math.random() * 3); // 0, 1, 2
let computer;
if (compchoiceNum === 0) {
computer = "r";
} else if (compchoiceNum === 1) {
computer = "p";
} else {
computer = "s";
}
// 提示玩家和电脑的选择
alert(`你选择了: ${playerchoice.toUpperCase()}\n电脑选择了: ${computer.toUpperCase()}`);
// 判断胜负
if (playerchoice === computer) {
alert("平局!");
} else if (
(playerchoice === "r" && computer === "s") || // 石头胜剪刀
(playerchoice === "p" && computer === "r") || // 布胜石头
(playerchoice === "s" && computer === "p") // 剪刀胜布
) {
alert("恭喜你,玩家获胜!");
} else {
alert("很遗憾,电脑获胜!");
}
}
} else {
alert("下次再玩吧!");
}通过本教程,我们解决了JavaScript剪刀石头布游戏中常见的两个问题:prompt输入处理的健壮性以及游戏胜负判断逻辑的完整性。关键在于理解prompt在不同用户操作下的返回值,并利用if...else if...else结构确保所有游戏逻辑分支都被正确覆盖。此外,引入输入验证循环和清晰的提示信息,能够显著提升用户体验和代码的可靠性。这些改进不仅修复了现有问题,也为构建更复杂的交互式Web应用奠定了基础。
以上就是JavaScript剪刀石头布游戏:优化prompt输入处理与完善胜负判断逻辑的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号