数字炸弹小游戏js用基础代码完成
数字炸弹是一款猜数字的游戏，游戏规则是定义一个数字区间，然后从中随机选择一个数字作为本局的“炸弹”（这个玩家们是不知道的），玩家们需要在这个数字区间不断地猜测，令数字区间的范围不断地变小，最终猜出正确的数字
<!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>