数字炸弹游戏
2017-06-07 本文已影响0人
A落儿
大哥考我的小游戏，当练手了（装逼ing....）效果图如下
222.gif
游戏规则：模仿快乐大本营
?选手背对大屏幕，大屏?幕会随机的出现1—100?中的任一数字，选手依?次说出数字，主持人根据?选手说出的数字，逐渐递减?直至有位同学说出“数字炸弹”?者，即被淘汰。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>数字炸弹</title>
<style type="text/css">
*{margin：0px;padding: 0px;font-family: "微软雅黑";}
a{text-decoration: none;}
ul li{list-style: none;}
.allContent{margin: 25px auto;width:350px;height: 600px;background: #ece4e4;position: relative;}
.boomImg{width: 100%;height: 200px;}
.boomImg img{display: block;max-width: 100%;max-height: 100%;margin:0px auto;}
.range{width: 100%;height: 200px;}
.range h1,.range form{text-align: center;font-family: "华文行楷"}
.range form input{border: 1px solid #ccc;line-height: 25px;width: 90px;padding-left: 10px;}
.enter{margin-top: 30px;}
.enter p{font-size: 26px;font-family: "华文行楷"}
#btn1{width: 35px;height: 25px;line-height: 25px;border: 1px solid #ccc;cursor: pointer;}
#btn2{line-height: 25px;height: 25px;border: 1px solid #ccc;cursor: pointer;}
#back{position: absolute;bottom: 30px;right: 25px;font-size: 20px;}
.boom{position: absolute;top:0;left:0;width: 100%;height: 100%;z-index: 99;background: url(image/bg.png);}
.boom img{display: block;max-width: 70%;margin: 0px auto;}
</style>
</head>
<body>
<div class="allContent">
<div class="boomImg">
</div>
<!-- 炸弹范围 -->
<div class="range">
<h1>炸弹范围</h1>
<form>
<div class="rangeInput">
<input type="text" value="0" disabled="disabled" id="box1">
--<input type="text" value="100" disabled="disabled" id="box2">
</div>
<div class="enter">
<p>输入数字</p>
<input type="text" value="" id="box3">
<input type="hidden" value="" id="hide">
<span id="btn1">确定</span>
<!-- <span id="btn2">查看炸弹数字</span> -->
</div>
</form>
</div>
<!-- 炸弹范围 -->
<!-- <a href="javascript:;" id="back">再来一局</a> -->
<!-- 爆炸图片 -->
<div class="boom" id="boom"></div>
</div>
<script type="text/javascript">
window.onload = function(){
var boom = document.getElementById("boom");//获取炸弹层
var boomImg = document.getElementById("boomImg");//炸弹曾图片
var boomImgH = boomImg.offsetHeight;//炸弹图片高度
var boomTop = (600-boomImgH)/2;//水平居中炸弹图片
var btn1 = document.getElementById("btn1");//确定按钮
boomImg.style.marginTop = boomTop + "px";//炸弹图片水平居中
var box3 = document.getElementById("box3");//获取输入框
var num = Math.ceil(Math.random()*100);//生成随机整数
boom.style.display="none";
document.getElementById("hide").value = num;//将随机数赋值
var hide = document.getElementById("hide").value;//炸弹数字
//alert(hide);
//
//
//炸弹层点击消失
boom.onclick = function(){
boom.style.display = "none";
}
// 确定按钮点击事件
btn1.onclick = function(){
var box3Value = parseInt(box3.value);//获取输入框输入的数字
//alert(typeof(box3Value));
if (box3Value==hide) {//判断输入的数字和炸弹数字是否相等
boom.style.display = "block";
}
else{//输入数字和炸弹数字不相等执行的代码
//alert("6");
var prevNum = parseInt(document.getElementById("box1").value);//最小范围数字
//alert(prevNum);
var nextNum = parseInt(document.getElementById("box2").value);//最大范围数字
if (box3Value<hide&&box3Value>prevNum){
//alert("1");
document.getElementById("box1").value = box3Value;
}
else if (box3Value>hide&&box3Value<nextNum){
//alert("2");
document.getElementById("box2").value = box3Value;
}
else{
var text = "请输入" + prevNum +"~" + nextNum + "区间的数字" ;
alert(text);
}
}
}
}
</script>
</body>
</html>
