js小游戏游戏代码大全简单,用js做小游戏加解析

最新推荐文章于 2024-08-12 03:46:42 发布

gpt886

最新推荐文章于 2024-08-12 03:46:42 发布

阅读量1.1k

点赞数

文章标签：人工智能

本文链接：https://blog.csdn.net/2301_79533350/article/details/133903079

版权

本文介绍了如何使用JavaScript编写一个简单的猜数字小游戏。游戏规则是在1~100之间随机选择一个数字，玩家有10次机会猜测，每次猜测后会得到提示数字是高了还是低了。文章提供游戏代码实现，并分析了代码逻辑，包括输入处理、结果反馈和游戏结束条件。通过这个游戏，读者可以更好地理解和应用JS前端开发知识。

摘要由CSDN通过智能技术生成

大家好，小编为大家解答js小游戏游戏代码大全简单的问题。很多人还不知道用js做小游戏加解析，现在让我们一起来看看吧！

【前言】

离公司近的好处，就在于每天都能利用自己的下班时间，更好地查漏补缺，充实技能。

最近小编做的项目需要写js偏多，而我不擅长写前端js，利用工作之余，开始学习，下面通过一个成型的js小游戏，开始我的js再次学习之旅Deepl降重。

【需求】

创建一个可以猜数字的游戏，它会在1~100以内随机选择一个数, 然后让玩家挑战在10轮以内猜出这个数字，每一轮都要告诉玩家正确或者错误，如果出错了，则告诉他数字是低了还是高了，并且还要告诉玩家之前猜的数字是什么。一旦玩家猜测正确，或者他们用完了回合，游戏将结束。游戏结束后，可以让玩家选择再次开始。

界面基本如上所示。

【思路】

因为我是在MDN论坛里学习到的这个小游戏，他给出了很好的设计思路：

1.生成1到100之间的随机数。
2.记录玩家在第几轮。从1开始。
3.为玩家提供一种猜测数字的方法。
4.一旦提交了猜测，首先将它记录在某处，以便用户可以看到他们先前的猜测。
5.接下来检查它是否是正确的数字。
6.如果是正确的：
   1.显示祝贺消息。
   2.阻止玩家输入更多的猜测（这会使游戏混乱）。
   3.显示控制允许玩家重新开始游戏。
7.如果它错了，并且玩家有剩余轮次：
   1.告诉玩家他们错了。
   2.允许他们输入另一个猜测。
   3.将圈数增加1。
8.如果它是错误的，并且玩家没有剩余轮次：
   1.告诉玩家游戏结束。
   2.阻止玩家输入更多的猜测（这会使游戏混乱）。
   3.显示控制允许玩家重新开始游戏。
9.一旦游戏重新启动，请确保游戏逻辑和用户界面完全重置，然后返回步骤1。

因为是为了学习js，就按照MDN给出的思路来写。

【实现】

1.静态网页：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Number guessing game</title>

    <style>
      html {
        font-family: sans-serif;
      }
      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      .lastResult {
        color: white;
        padding: 3px;