猜数字游戏-------代码

于 2024-10-10 17:31:57 发布
阅读量548 收藏 7
点赞数 6
文章标签： 游戏 javascript 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shang_xuan/article/details/142827333
版权

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>猜数字游戏</title>

    <style>

        html, body {

            height: 100%;

            margin: 0;

            padding: 0;

            font-family: 'Arial', sans-serif;

        }

        body {

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: #f0f0f0;

        }

        .container {

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 20px;

            background-color: white;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        }

        h1 {

            text-align: center;

            color: #333;

        }

        .form {

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 10px;

        }

        .form input[type="number"] {

            width: 200px;

            padding: 10px;

            border: 1px solid #ccc;

            border-radius: 4px;

            font-size: 16px;

        }

        .form button {

            padding: 10px 20px;

            background-color: #007BFF;

            color: white;

            border: none;

            border-radius: 4px;

            cursor: pointer;

            font-size: 16px;

        }

        .form button:hover {

            background-color: #0056b3;

        }

        .result {

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 10px;

        }

        .lastResult {

            color: #333;

            background-color: #e0e0e0;

            padding: 10px;

            border-radius: 4px;

            font-size: 16px;

            text-align: center;

        }

        .lowOrHi {

            color: #333;

            background-color: #e0e0e0;

            padding: 10px;

            border-radius: 4px;

            font-size: 16px;

            text-align: center;

        }

        #resetButton {

            padding: 10px 20px;

            background-color: #28a745;

            color: white;

            border: none;

            border-radius: 4px;

            cursor: pointer;

            font-size: 16px;

        }

        #resetButton:hover {

            background-color: #218838;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>猜数字游戏</h1>

        <div class="form">

            <input type="number" class="guessField" placeholder="请输入你的猜测">

            <button class="guessSubmit">提交</button>

        </div>

        <div class="result">

            <div class="lastResult"></div>

            <div class="lowOrHi"></div>

        </div>

        <button id="resetButton">重置</button>

    </div>

    <script>

        const getRandomNumber = () => Math.floor(Math.random() * 100) + 1;

        const randomNumber = getRandomNumber();

        const guessesElement = document.querySelector(".guesses");

        const lastResultElement = document.querySelector(".lastResult");

        const lowOrHiElement = document.querySelector(".lowOrHi");

        const guessSubmitElement = document.querySelector(".guessSubmit");

        const guessFieldElement = document.querySelector(".guessField");

        let guessCount = 1;

        let resetButton;

        // 添加事件监听器

        guessSubmitElement.addEventListener("click", function() {

            const guess = parseInt(guessFieldElement.value);

            if (guess === randomNumber) {

                lastResultElement.textContent = "恭喜！你猜对了！";

                lowOrHiElement.textContent = "";

            } else if (guess < randomNumber) {

                lastResultElement.textContent = "错误！再试一次。";

                lowOrHiElement.textContent = "猜低了";

            } else {

                lastResultElement.textContent = "错误！再试一次。";

                lowOrHiElement.textContent = "猜高了";

            }

            guessCount++;

            guessFieldElement.value = "";

        });

        // 定义重置按钮

        resetButton = document.getElementById("resetButton");

        resetButton.addEventListener("click", function() {

            guessCount = 1;

            lastResultElement.textContent = "";

            lowOrHiElement.textContent = "";

            guessFieldElement.value = "";

            randomNumber = getRandomNumber();

        });

    </script>

</body>

</html>

shang_xuan
关注
Java-Random生成随机数案例:猜数字游戏
weixin_52309279的博客
04-05 4130
需求: 随机生成一个1-100之间的数据,提示用户猜测,猜大提示过大,猜小提示过小,直到猜中结束游戏. 分析: ① 随机生成一个1-100之间的数据 ② 使用死循环让用户不断猜测并提示用户范围,猜大提示过大,猜小提示过小,猜中使用break结束游戏. public static void main(String[] args){ //1.随机生成一个1-100之间的幸运数字(0-99) + 1 Random r = new Random();//创建对象 int data
python实例 - 猜数字游戏
Cherish1ove的博客
08-09 4803
python 猜数游戏
Java-数组案例:猜数字游戏
weixin_52309279的博客
04-06 2241
需求: 开发一个幸运小游戏,游戏规则如下: 游戏后台随机生成1-20之间的五个数(无所谓是否重复),然后让大家来猜数字: ① 未猜中提示:"未命中",并继续猜测 ② 猜中提示:"运气不错,猜中了",并输出该数据第一次出现的位置,且输出全部5个数据,最终结束本游戏. 分析: (1) 随机生成5个1-20之间的数据存储起来==>使用数组 (2) 定义一个死循环,输入数据猜测,遍历数组,判断数据是否在数组中,如果在,进行对应提示并结束死循环;如果没有猜中,提示集训猜测直到猜中为止. 代码
JAVA-猜数字游戏
2201_76032321的博客
05-09 742
猜数字游戏
C语法（Java语法）---顺序循环选择+猜数字游戏实现
何春秋的博客
12-08 915
本次不会深挖这些函数体内部代码怎么实现，了解功能以及如何使用即可。
c语言1-99猜数,C语言猜数字游戏(1-100)
weixin_35997054的博客
05-20 614
完成1-100之间的猜数字游戏相关的知识点:计算机的随机数是通过算法返回一组看起来随机的数列 称为 伪随机数计算机生成随机数依赖数学变化,需要初始值初始值就是随机种子如果初始值是固定的那么生成的数字也就是随机的.一个随机种子对应一组序列计算机用整数表示时间 时间戳 以1970-1-1 0时0分0秒来计数代码讲解1.首先定义了一个打印菜单2.利用srand((unsigned int)time(NU...
Java-猜数字游戏
你好小怪兽的博客
10-30 2546
前言 90年代的同学一定看过香港节目，超级无敌奖门人，是否记得里面有个游戏是猜数字的，默认一个数字在1~100之间猜，每个人猜一个数字，没猜中就缩减数字范围，一直到猜中了头顶的气球就会爆开，是不是勾起很多回忆呢，下面让我们了解一下这个游戏的代码构成。 //import java.util.Scanner; //import java.util.Random; import java.util.*; public class Demo09{ public static void main(Stri..
C语言--猜数字游戏
Garbage_bin的博客
11-12 1077
初学者的第一个游戏--猜数字游戏
ChatGLM-6B 安装试用
Michael是个半路程序员
04-16 3169
vim cli_demo.py 修改模型下载的路径。在生成答案的过程中，GPU显存使用在一直上涨。他没有回答鱼香肉丝相关的做法。其余文件从 huggingface 下载。解方程的答案是错的，模型不擅长数学问题。加载完模型后 GPU 使用情况。不懂前端，不好判断正确与否。试用以下代码，下载模型。模型记忆了上下文的 菜名。
66-猜数字游戏-少儿编程scratch项目源代码文件案例素材.zip
11-06
《66-猜数字游戏-少儿编程scratch项目源代码文件案例素材》是一个针对儿童编程教育的项目，旨在通过趣味性的游戏方式，引导孩子们学习和掌握编程基础知识。Scratch是一款由麻省理工学院（MIT）媒体实验室 Lifelong ...
C语言猜数字游戏-源代码
01-07
C语言猜数字游戏-源代码
猜数字游戏-少儿编程scratch项目源代码文件案例素材.zip
11-07
《猜数字游戏——少儿编程Scratch项目源代码解析》 Scratch是一款由麻省理工学院(MIT)媒体实验室“终身幼儿园”团队开发的图形化编程工具，专为儿童设计，旨在帮助他们学习编程思维，激发创新意识。在这个“猜数字...
python猜数字游戏-13-列表简介.ev4.rar
09-22
标题中的“python猜数字游戏-13-列表简介”表明这是一个关于Python编程的教程，具体是涉及到了使用Python实现一个猜数字游戏，并且在这一部分中重点介绍了列表（List）这种数据结构。列表是Python中非常基础且重要的...
python猜数字游戏-09-函数的说明文档.ev4.rar
10-23
【标题】"Python猜数字游戏-09-函数的说明文档"揭示了本课程的核心内容，即使用Python编程语言设计一个猜数字的游戏，并且重点介绍了如何为自定义函数编写清晰的说明文档。在这个游戏中，程序将随机生成一个整数，...
【Python游戏开发】贪吃蛇游戏demo拓展
最新发布
qq_40878316的博客
10-05 827
拓展上一项目。
Unity 快速定位到目标文件夹
zhuanggenhua的博客
10-05 554
主要给习惯垂直布局用的，文件多了滚动都要滚半天。"快捷方式/定位到GameData &G""快捷方式/定位到Scripts &S""快捷方式/定位到ArtRes &A""快捷方式/定位到Plugin &P""快捷方式/定位到Setting""快捷方式/定位到预制体 &P""快捷方式/打开工程目录 &O"
【leetcode】 45.跳跃游戏 ||
weixin_66400112的博客
10-02 581
在遍历数组时，我们不访问最后一个元素，这是因为在访问最后一个元素之前，我们的边界一定大于等于最后一个位置，否则就无法跳到最后一个位置了。例如，对于数组 [2,3,1,2,4,2,3]，初始位置是下标 0，从下标 0 出发，最远可到达下标 2。下标 0 可到达的位置中，下标 1 的值是 3，从下标 1 出发可以达到更远的位置，因此第一步到达下标 1。从下标 1 出发，最远可到达下标 4。下标 1 可到达的位置中，下标 4 的值是 4 ，从下标 4 出发可以达到更远的位置，因此第二步到达下标 4。
Python编写的贪吃蛇小游戏
WwLK123的博客
10-03 618
Python编写贪吃蛇小游戏。
python猜数字游戏0-9代码
09-30
当然可以。这是一个简单的Python猜数字游戏代码示例，范围从0到9： ```python import random def guess_number_game(): number_to_guess = random.randint(0, 9) attempts = 0 print("欢迎来到猜数字游戏！我正在想一个0到9之间的整数，你可以尝试猜测。") while True: user_guess = input("请输入你的猜测（输入q退出游戏）：") if user_guess.lower() == 'q': print("谢谢玩儿！再见。") break if not user_guess.isdigit(): print("输入无效，请输入一个0到9的数字。") continue attempts += 1 guess = int(user_guess) if guess < number_to_guess: print("太小了，再试一次。") elif guess > number_to_guess: print("太大了，再试试。") else: print(f"恭喜你，猜对了！你用了{attempts}次就找到了答案。") break guess_number_game() ``` 在这个游戏中，程序会随机生成一个0到9的数字，然后让用户输入他们的猜测。如果用户输入的是数字并且猜测的数字不在范围内，程序会给出提示。直到用户猜出正确的数字或者选择退出游戏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值