构建基础游戏框架
javascript的confirm和prompt函数是与用户进行简单交互的常用方式。confirm用于询问用户一个是非问题，返回true或false；prompt则用于获取用户的文本输入。一个基本的剪刀石头布游戏可以使用这两个函数作为入口点。
首先，我们通过confirm询问用户是否开始游戏，如果用户同意，则通过prompt获取用户的选择（石头R、剪刀S、布P）。
let playGame = confirm("您想玩剪刀石头布游戏吗？");
if (playGame) {
let startGame = prompt("请选择：r (石头), p (布), s (剪刀)");
// 后续逻辑将在这里展开
// ...
} else {
alert("好的，也许下次再玩！");
}处理用户输入：prompt的陷阱与健壮性设计
在使用prompt获取用户输入时，存在一些常见的陷阱，尤其是在用户没有输入任何内容就点击“确定”或直接点击“取消”时。
- 点击“取消”：如果用户点击prompt对话框的“取消”按钮，startGame变量的值将是null。
- 空输入点击“确定”：如果用户没有输入任何字符，直接点击prompt对话框的“确定”按钮，startGame变量的值将是一个空字符串""。
在JavaScript中，null和""（空字符串）都被认为是“假值”（falsy）。这意味着，如果您的条件判断是if (startGame)，那么在上述两种情况下，该条件都将为false。这会导致无法正确区分用户是取消了游戏（null）还是输入了无效的空值（""）。
为了健壮地处理这些情况，我们应该明确区分null和非null值，然后对非null值进行进一步的有效性检查。
立即学习“Java免费学习笔记（深入）”；
if (playGame) {
let startGame = prompt("请选择：r (石头), p (布), s (剪刀)");
if (startGame === null) { // 用户点击了“取消”
alert("改变主意了？没关系，下次再玩！");
} else { // 用户点击了“确定”，无论是否输入内容
let playerChoice = startGame.trim().toLowerCase(); // 清除空白并转为小写
if (playerChoice === "r" || playerChoice === "s" || playerChoice === "p") {
// 用户输入了有效选项，游戏逻辑继续
// ...
} else if (playerChoice === "") { // 用户输入为空，但点击了“确定”
alert("您没有输入任何选项！请选择 r, p, 或 s。");
} else { // 用户输入了无效选项
alert("您没有选择 r, p, 或 s。请重新输入。");
}
}
} else {
alert("好的，也许下次再玩！");
}通过startGame === null判断用户是否取消，然后对非null的情况进一步处理，可以确保所有用户交互路径都被正确覆盖。trim().toLowerCase()是处理用户输入的良好实践，可以避免因大小写或额外空格导致的问题。
完善游戏逻辑：确保所有胜负条件
原始的游戏逻辑在判断胜负时存在不完整的情况，这可能导致某些对局结果没有被正确判定，从而让用户感到游戏“卡住”或需要重复输入。剪刀石头布游戏有三种可能的结果：平局、玩家获胜、电脑获胜。所有这些情况都必须明确覆盖。
首先，我们需要生成电脑的选择。
// 生成电脑随机选择
let compChoiceNum = Math.floor(Math.random() * 3); // 0, 1, 2
let computerChoice;
if (compChoiceNum === 0) {
computerChoice = "r"; // 石头
} else if (compChoiceNum === 1) {
computerChoice = "p"; // 布
} else {
computerChoice = "s"; // 剪刀
}接下来是胜负判断逻辑。我们可以使用if/else if/else结构来确保所有情况都被覆盖。
// 胜负判断逻辑
if (playerChoice === computerChoice) {
alert(`平局！您选择了 ${playerChoice}，电脑也选择了 ${computerChoice}。`);
} else if (
(playerChoice === "r" && computerChoice === "s") || // 玩家：石头 vs 电脑：剪刀
(playerChoice === "p" && computerChoice === "r") || // 玩家：布 vs 电脑：石头
(playerChoice === "s" && computerChoice === "p") // 玩家：剪刀 vs 电脑：布
) {
alert(`恭喜您获胜！您选择了 ${playerChoice}，电脑选择了 ${computerChoice}。`);
} else {
// 剩余所有情况均为电脑获胜
alert(`很遗憾，电脑获胜！您选择了 ${playerChoice}，电脑选择了 ${computerChoice}。`);
}通过这种方式，我们清晰地定义了平局、玩家获胜的所有条件，并利用else捕获了所有剩余的电脑获胜情况，确保了逻辑的完整性。
完整示例代码
将上述改进整合到一起，就得到了一个功能更完善、用户体验更好的剪刀石头布游戏。
/**
* JavaScript剪刀石头布游戏
* 包含健壮的prompt输入处理和完整的胜负判断逻辑
*/
function playRockPaperScissors() {
let playGame = confirm("您想玩剪刀石头布游戏吗？");
if (playGame) {
let startGame = prompt("请选择：r (石头), p (布), s (剪刀)");
if (startGame === null) { // 用户点击了“取消”
alert("改变主意了？没关系，下次再玩！");
return; // 结束游戏
}
let playerChoice = startGame.trim().toLowerCase(); // 清除空白并转为小写
if (playerChoice === "r" || playerChoice === "s" || playerChoice === "p") {
// 生成电脑随机选择
let compChoiceNum = Math.floor(Math.random() * 3); // 0, 1, 2
let computerChoice;
if (compChoiceNum === 0) {
computerChoice = "r"; // 石头
} else if (compChoiceNum === 1) {
computerChoice = "p"; // 布
} else {
computerChoice = "s"; // 剪刀
}
// 胜负判断逻辑
if (playerChoice === computerChoice) {
alert(`平局！您选择了 ${playerChoice}，电脑也选择了 ${computerChoice}。`);
} else if (
(playerChoice === "r" && computerChoice === "s") || // 玩家：石头 vs 电脑：剪刀
(playerChoice === "p" && computerChoice === "r") || // 玩家：布 vs 电脑：石头
(playerChoice === "s" && computerChoice === "p") // 玩家：剪刀 vs 电脑：布
) {
alert(`恭喜您获胜！您选择了 ${playerChoice}，电脑选择了 ${computerChoice}。`);
} else {
// 剩余所有情况均为电脑获胜
alert(`很遗憾，电脑获胜！您选择了 ${playerChoice}，电脑选择了 ${computerChoice}。`);
}
// 可以在这里询问用户是否再玩一次
// let playAgain = confirm("再玩一局？");
// if (playAgain) {
// playRockPaperScissors(); // 递归调用以实现循环游戏
// }
} else if (playerChoice === "") { // 用户输入为空，但点击了“确定”
alert("您没有输入任何选项！请选择 r, p, 或 s。");
} else { // 用户输入了无效选项
alert("您输入了无效选项。请选择 r, p, 或 s。");
}
} else {
alert("好的，也许下次再玩！");
}
}
// 调用函数开始游戏
playRockPaperScissors();注意事项
- 循环游戏：上述代码只执行一局游戏。若要实现多局游戏，可以在游戏结束后添加一个confirm询问用户是否再玩一次，并根据结果递归调用playRockPaperScissors函数或使用while循环。
- 用户体验：alert和prompt是阻塞式的，在实际的Web应用中，通常会使用更友好的HTML界面元素（如按钮、文本输入框）来替代，以提供更好的用户体验和非阻塞式的交互。
- 输入校验：对于更复杂的应用，输入校验应该更加严格，例如使用正则表达式来确保输入格式的正确性。
- 代码可读性：将生成电脑选择和判断胜负的逻辑封装成单独的函数，可以提高代码的可读性和模块化。
总结
通过本文的指导，我们不仅修复了prompt输入处理的逻辑漏洞，使其能够正确区分用户取消和空输入，还完善了剪刀石头布游戏的胜负判断逻辑，确保了所有对战情况都能得到准确的结果。这些改进使得游戏更加稳定和用户友好。理解prompt的返回值特性以及如何构建全面的条件判断，是编写健壮JavaScript交互逻辑的关键。
