数字炸弹小游戏js用基础代码完成

最新推荐文章于 2022-10-22 10:19:37 发布

hahihei

最新推荐文章于 2022-10-22 10:19:37 发布

阅读量4.4k

点赞数 4

文章标签： javascript 开发语言 ecmascript 正则表达式

本文链接：https://blog.csdn.net/hahihei/article/details/121670832

版权

这是一个关于数字炸弹游戏的网页实现。游戏规则是玩家在0-100的范围内猜测一个随机数字，每次猜测会根据数字大小缩小范围。页面包含输入框、提示信息和背景音乐。当玩家猜中数字时，背景会显示特定图像并播放声音，然后在1.6秒后恢复原状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数字炸弹是一款猜数字的游戏，游戏规则是定义一个数字区间，然后从中随机选择一个数字作为本局的“炸弹”（这个玩家们是不知道的），玩家们需要在这个数字区间不断地猜测，令数字区间的范围不断地变小，最终猜出正确的数字

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           body{ background-color: #000000; color:white}
           #box{ text-align: center;
           height: 590px; background-size: cover;}
           h1{ padding-top: 100px;}
       </style>
   </head>
   <body>
       <div id="box">
           <h1>数字炸弹</h1>
           <input id="number" type="number" min="0" max="99" οnkeydοwn="guess(event)" />
           <p id="tips">数据范围0-100</p>
           <audio id="mp3" src="mp3/14438.wav"></audio>
       </div>
   </body>
   <script type="text/javascript">
       //获取input输入框对象
       var number=document.querySelector("#number");
       var tips=document.querySelector("#tips");
       var box=document.querySelector("#box");
       var mp3=document.querySelector("#mp3");

       var sysNumber=Math.ceil(Math.random()*99);//生成1-99的随机数     77
       var min=1;//最小范围
       var max=99; //最大范围
       function guess(event){
           if(event.keyCode==13){//按下回车键
               //获取input输入框的内容
               var usernum=number.value;     //66-88      55
               number.value="";//清空原本的数字
               //判用户输入的数据与系统生成的随数
               if(sysNumber==usernum){
                   tips.innerHTML="恭喜你，猜对了";
                   box.style.backgroundImage="url(img/zcool.gif)";
                   //播放声音
                   mp3.play();
                   //使用定时器实现去掉背景图
                   setTimeout(function(){
                       box.style.backgroundImage="none";
                   },1600);
               }
               if(usernum>sysNumber && usernum<=max){
                   max=usernum;
                   tips.innerHTML=`数据范围${min}-${max}`;
               }
               if(usernum<sysNumber && usernum>=min){
                   min=usernum;
                   tips.innerHTML=`数据范围${min}-${max}`;
               }
           }
       }
   </script>
</html>