JavaScript（三）——实现猜数字小游戏

小耿i

已于 2024-03-22 08:54:55 修改

阅读量890

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言学习前端

于 2023-06-06 16:02:25 首次发布

本文链接：https://blog.csdn.net/geng_____/article/details/131068919

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍了如何使用JavaScript创建一个简单的GuesstheNumber游戏。游戏逻辑包括生成1到100的随机数作为目标，接收用户输入的猜测，提示用户猜测过高或过低，直到猜中为止。代码中涉及的关键元素有HTML布局、CSS样式以及JavaScript事件处理和条件判断。

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

下面是游戏设计要求：

游戏随机选择一个 100 以内的自然数, 然后让玩家猜出这个数字。每轮告诉玩家他猜数字高了还是低了，直到猜出数字为止。

代码实现

通过上述游戏要求，我们来探索如何将上述要求转换为代码。

初始设置

包含一个游戏标题，一个用于输入内容输入框，一个提交按钮，以及
一个提示游戏的游戏说明

<body>
<h1>Guess the Number</h1>
<div class="input-group">
    <input type="number" id="guessInput" placeholder="Enter you guess" min="1" max="100">
    <button id="submitBtn">submit</button>
</div>
<div class="result" id="result"></div>
</body>

下面是添加的css样式。

    <style>
        h1{
            position: absolute;
            left: 40%;
            color: #1b44ee;
        }
        .input-group{
            position: relative;
        }
        #guessInput{
            width: 111px;
            height: 60px;
            position: absolute;
            top: 80px;
            left: 41%;
            border-radius: 50px;
        }
        #submitBtn{
            width: 111px;
            height: 60px;
            background: #1b44ee;
            color: #ffffff;
            position: absolute;
            top: 80px;
            left: 51%;
            border-radius: 50px;

        }
        .result{
            text-align: center;
            position: absolute;
            left: 38%;
            top: 170px;
        }
    </style>

最终实现效果。
在这里插入图片描述
JS部分
首先声明一个100以内的随机数
Math.floor是向下取整这样2.1与2.9就没有区别了然后使用 Math.random() 函数生成一个介于 0 和 1 之间的随机数，乘以 101 并向下取整，得到一个介于 0 和 100 之间的随机整数，并将其赋值给变量 targetNumber。
然后定义一个guessCount 用来记录游戏次数，初始值为0，当游戏结束时输出。

const targetNumber = Math.floor(Math.random()*101)

let guessCount = 0
const guessInput = document.getElementById('guessInput')
const submitBtn= document.getElementById('submitBtn')
const result= document.getElementById('result')

const guess = parseInt(guessInput.value);

这一行将输入框中的值转换为整数，并将其赋值给变量 guess。

if (isNaN(guess) || guess < 0 || guess > 100) {
  return (result.textContent = "Please enter a valid number between 0 and 100.");
}

这一行检查输入是否合法。如果输入不是一个数字，或者数字不在 0 到 100 的范围内，函数将返回一个错误消息，并且不会执行后面的代码。

guessCount++;

这一行将猜测次数加 1。

if (guess === targetNumber) {
  result.textContent = `Congratulations! You guessed the correct number in ${guessCount} attempts`;
  submitBtn.disabled = true;
  return;
}

这一行检查猜测是否正确。如果猜测正确，函数将返回一个祝贺消息，并且禁用提交按钮。

if (guess < targetNumber) result.textContent = "Too Low. Try again";
else result.textContent = "Too High. Try again";

这一行告诉用户他们的猜测是高了还是低了，并提示他们再试一次。

guessInput.value = "";
guessInput.focus();

这两行清空输入框并将焦点放回到输入框中，以便用户可以继续猜测。

小耿i

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（三）——实现猜数字小游戏

使用Javascript实现猜数字的功能。
复制链接

扫一扫

专栏目录