本文将指导您如何使用JavaScript的confirm和prompt函数构建一个基本的剪刀石头布游戏。我们将深入探讨prompt输入处理的常见陷阱，特别是当用户取消或提交空值时，并提供健壮的错误处理方案。同时，文章还将完善游戏的胜负判断逻辑，确保所有对战情况都能正确判定，避免重复输入，从而提升游戏的稳定性和用户体验。
构建基础游戏框架
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, 2let 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交互逻辑的关键。
以上就是优化JavaScript剪刀石头布游戏：prompt输入处理与胜负逻辑完善的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524628.html
微信扫一扫 
支付宝扫一扫 
