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