简单用JavaScript做一个猜数字小游戏

目录

前言

一、猜1-100中的数字

二、实现效果图

三、实现方法

四,实现代码


前言

今天我们使用JavaScript来做一个猜数字小游戏。


一、猜1-100中的数字

实现效果:随机生成一个一到一百的整数,由玩家进行猜测,总共设置了五次机会,每次猜完结束都要提醒玩家是否猜对,猜的结果是大了还是小了并将结果显示出来。

二、实现效果图

效果图如下:


我将设置游戏次数为5次 玩家用完则弹出游戏结束并设置玩家不能再次输入,禁用表单文本输入和按钮,防止用户在游戏结束后提交更多的猜测,否则游戏的规则将会被破坏。



三、实现方法

1.随机生成一个1到100的整数,使用Math.random()方法。

2.需要一直猜到正确为止,所以使用的是while循环更简单

3.核心方法:使用else if多分支语句来判断大于,小于,等于

四,实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字小游戏</title>
    <style>
      body{
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
    </style>

</head>
<body>
    <h1>猜数字游戏</h1>
    <div>
        我随机选定了一个100以内的数字,看你是否能在10次以内猜中,
        每次我都会告诉你所猜的结果是大了还是小了
        <p>你总共有5次机会哦!</p>
    </div>
    <br>
    <div class="s1">
        <label for="guessfiled">请猜数:</label>
        <input type="text" id="guessfiled" class="Guessfiled">
        <input type="submit" value="确定" id="guesssubmit" class="Guesssubmit">
    </div>

    <div id="resultparas">
        <p id="lastresult"></p>
        <p class="guess"></p>
        <p id="low"></p>
        <p id="low1"></p>
    </div>
    
</body>
</html>
<script>

    const guess1=document.querySelector('.guess')
    let secret=Math.floor(Math.random()*100)+1;
    let guesscount=1;

    function Random(){
       var userguess=Number(guessfiled.value);

        if(guesscount===1){
                guess1.textContent='上次猜的数:'
        }
        guess1.textContent += userguess + ' ';
        if(userguess===secret){
            lastresult.textContent= '猜对了'
           lastresult.style.backgroundColor='green'     //将<p>标签改颜色
        }else if(guesscount===5){
            lastresult.textContent='!!!GAME OVER!!!'
            guessfiled.disabled=true
            guesssubmit.disabled=true
            lastresult.style.backgroundColor = 'yellow';
            }
            else{
            lastresult.textContent = '你猜错了!';
            lastresult.style.backgroundColor = 'red';
            if(userguess>secret){
                low.textContent='你猜大了'
            }else if(userguess<secret){
                low.textContent='你猜小了'
            }
        }
        guesscount++;
        guessfiled.value=' '
        guessfiled.focus()
    }
    guesssubmit.addEventListener('click',Random);

</script>



 

  • 2
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及以上版本 2.本书所附光盘范例 第1章(\1) 示例描述:变量。 1_1.htm 变量声明。 1_2.htm 局部变量和全局变量。 1_3.htm JavaScript中的强制类型转换。 1_4.htm 在HTML中为JavaScript传递变量。 1_5.htm 在HTML中引用JavaScript的变量。 1_6.htm 比较undefined和"undefined"。 第2章(\2) 示例描述:客户端的流程控制。 2_1.htm 条件判断语句if…else 2_2.htm 多条件判断语句switch。 2_3.htm 嵌套循环语句for。 2_4.htm 循环语句while。 2_5.htm 控制循环过程break和continue。 2_6.htm 利用流程控制语句实现冒泡排序。 第3章(\3) 示例描述:字符串操作。 3_1.htm 连接字符串。 3_2.htm 在字符串中查找指定字符。 3_3.htm 提取字符串中的字串。 3_4.htm 替换字符串中的指定字符。 3_5.htm 将字符串分解为数组。 3_6.htm 字符串大小写的书写和判断。 第4章(\4) 示例描述:数组技术。 4_1.htm 创建空数组。 4_2.htm 创建带初始值的数组。 4_3.htm 将数组转换为字符串。 4_4.htm 遍历数组中的元素。 4_5.htm 合并两个数组。 4_6.htm 创建多维数组。 4_7.htm 数组排序。 第5章(\5) 示例描述:JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示日期。 5_6.htm 标题栏显示时间。 5_7.htm 不同时间的不同问候。 第6章(\6) 示例描述:JavaScript页面处理技巧。 6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面中的tooltip提示。 6_6.htm 在Web页面中控制其元素的选择状态。 第7章(\7) 示例描述:JavaScript的鼠标事件和键盘事件。 7_1.htm 按钮的鼠标单击事件。 7_2.htm 用鼠标点亮文本。 7_3.htm 渐显图片。 7_4.htm 跟随鼠标的图片。 7_5.htm 跟随鼠标的*。 7_6.htm 跟随鼠标的文字。 7_7.htm 判断Ctrl键是否被按下。 7_8.htm 设置页面中某按钮的热键。 第8章(\8) 示例描述:窗口大小自动化管理。 8_1.htm 按指定要求打开的窗口。 8_2.htm 控制窗口的打开和关闭。 8_3.htm 从天而降的窗口。 8_4.htm 打开慢慢变大的窗口。 8_5.htm 打开一个四面变大的窗口。 8_6.htm 页面左右分开。 8_7.htm 定时打开网页。 8_8.htm 自动打开新的窗口。 第9章(\9) 示例描述:JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 9_6.htm 打字效果的文字特效。 9_7.htm 淡入淡出的文字效果。 9_8.htm 炽热文字的特殊效果。 第10章(\10) 示例描述:页面中的链接地址个性化。 10_1.htm 按时消失的链接。 10_2.htm 带滚动提示的链接。 10_3.htm 动态变换的链接。 10_4.htm 滚动链接。 10_5.htm 不断闪动的链接。 10_6.htm 在按钮上显示不同的链接。 10_7.htm 带链接的滚动字幕。 第11章(\11) 示例描述:在HTML中用JavaScript控制图像页面。 11_1.htm 不停闪烁的图片。 11_2.htm 图片展示选项。 11_3.htm 图片的渐显播放。 11_4.htm 将图片固定在页面左上角。 11_5.htm 左右移动的图片。 11_6.htm 图像滚动公告版。 11_7.htm 跟随屏幕移动的图像。 第12章(\12) 示例描述:菜单特效。 12_1.htm 左键弹出式菜单 12_2.htm 推拉门式样的菜单。 12_3.htm 浮动顶部的菜单。 12_4.htm 浮动底部的菜单。 12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景图片。 13_3.htm 随机显示的背景图片。 13_4.htm 不停变换的背景颜色。 13_5.htm 背景颜色自己选。 第14章(\14) 示例描述:页面特效。 14_1.htm 页面全屏显示。 14_2.htm 显示器检测代码(给出提示)。 14_3.htm 浏览器检测后自动跳转相应界面。 14_4.htm 检测浏览器相应版本。 14_5.htm 页面停留时间1。 14_6.htm 页面停留时间2。 14_7.htm 检测浏览器类型并调用不同的背景音乐。 14_8.htm 将站点加入频道栏。 14_9.htm 将站点加入收藏夹。 14_10.htm 禁止察看源代码。 14_11.htm 自动弹出式窗口。 14_12.htm 自动滚屏。 第15章(\15) 示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4.htm 锁定表格的表头。 15_5.htm 简单的表格排序。 15_6.htm 表格翻页。 第16章(\16) 示例描述:AJAX应用特效。 16_1.htm 无刷新实现图片切换。 16_2.htm 很酷的导航特效。 16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP一个HEAD的请求。 16_6.htm 通过XML HTTP一个特殊HEAD的请求。 16_7.htm 显示XML数据表格。 16_8.htm 服务器端的动态建议。 第17章(\17) 示例描述:Prototype基础应用。 17_1.htm 使用$()得到html元素。 17_2.htm 使用$F()返回表单输入控件的值。 17_3.htm 使用$A()将单个的参数转换成Array对象。 17_4.htm 使用$H()把一些对象转换成Hash对象。 17_5.htm 使用$R()创建新的对象域。 17_6.htm 使用Ajax.Request类进行异步调用。 17_7.htm 使用Ajax.Updater类填充html。 第18章(\18) 示例描述:jQuery应用特效。 18_1.htm 动态表格和动态表单。 18_2.htm 输入框获得焦点、点击、划过时全选。 18_3.htm CSS 样式表动态选择。 18_4.htm jQuery的选择器之变态演示。 18_5.htm 让链接打开一个新窗口。 18_6.htm 键盘控制选择表格并编辑。 18_7.htm 下拉框的值同时给文本框和文本域。 18_8.htm 基于jQuery的折叠菜单。 18_9.htm 可编辑的表格数据。 第19章(\19) 示例描述:其他特效。 19_1.htm 中文日期。 19_2.htm 现在的日期及星期。 19_3.htm 带链接的滚动字幕。 19_4.htm 垂直滚动公告板。 19_5.htm 关闭窗体。 19_6.htm 分时问候。 19_7.htm 密码保护页面。 19_8.htm 当前的时间。 第20章(\20) 示例描述:正则表达式。 20_1.htm 校验是否全由数字组成。 20_2.htm 校验登录名。 20_3.htm 校验用户姓名。 20_4.htm 校验普通电话、传真号码。 20_5.htm 校验中文字符。 20_6.htm 校验邮件地址的有效性。 20_7.htm 校验腾讯QQ号。
猜数字游戏是一种简单但受欢迎的游戏。在web前端开发中,我们可以使用一些技术来实现这个游戏。以下是一个使用HTML、CSS和JavaScript实现猜数字游戏的例子。 首先,我们需要创建一个HTML页面,用于展示游戏的界面。在页面中,我们可以添加一个标题,用来说明游戏的名称,以及一个用于显示猜测结果的元素和一个用于获取用户输入的文本框。我们还可以添加一个按钮,用于提交用户的猜测。 在CSS中,我们可以对游戏界面进行样式设置,例如设置背景颜色、字体大小等。 接下来,我们需要使用JavaScript来处理用户的输入和游戏逻辑。首先,在加载页面时,我们可以生成一个随机数字作为答案,并将其存储在变量中。然后,我们可以添加一个事件监听器,以便在用户点击提交按钮时执行相应的函数。 在函数中,我们可以获取用户输入的猜测并与答案进行比较。根据比较的结果,我们可以在页面上显示相应的提示,例如“猜对了”、“猜大了”、“猜小了”。同时,我们可以记录用户猜测的次数,并在页面上显示。 如果用户猜对了答案,我们可以通过JavaScript向页面中添加一个新的元素,以显示恭喜消息和用户猜测的次数。 总之,通过HTML、CSS和JavaScript,我们可以实现一个简单的web前端猜数字游戏。用户可以在页面上输入猜测,然后根据答案比较的结果显示相应的提示。最后,我们可以向用户显示猜对答案的消息以及猜测的次数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值