HTML5小游戏–数字炸弹

数字炸弹简介

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

例如：数字区间是1-100 ，，最终的数字是67，有三个玩家，游戏开始
玩家A：12
裁判：错误，新的数字区间是12-100；
玩家B：34
裁判：错误，新的数字区间是34-100；
玩家C：87
裁判：错误，新的数字区间是34-87；
玩家A：70
裁判：错误，新的数字区间是34-70；
玩家B：56
裁判：错误，新的数字区间是56-70；
玩家C：65
裁判：错误，新的数字区间是65-70；
玩家A：68
裁判：错误，新的数字区间是65-68；
玩家B：67
裁判：正确，恭喜踩中炸弹了，boom

那么这个游戏使用HTML5以及JS是很容易实现的；；

游戏开发（分简化版和进阶版）

简化版：

html代码：

html代码非常简单，一个input输入框用于数字的输入（猜数字）,一个button按钮用于对输入的数字给JS进行验证。

JS代码：

1、首先我们需要获取输入框和按钮这两个元素

var txt = document.getElementById('numBox');
 var btn = document.getElementById('btn');

2、我们需要定义一个随机数字，我定义的数字范围是0-100，因此

var num = parseInt(Math.random()*101);
console.log(num);

console.log(num)是测试当前代码有无报错，随机数字是否生成成功，开发完毕可删除这行代码；

3、为按钮添加点击事件，当按钮被点击时，验证输入的数字是否合法以及验证输入的数字是否在有效的数字区间内

btn.onclick = function(){
            if(!txt.value){
                alert('请输入内容');
            }else if(isNaN(txt.value)){
                alert('请输入数字');
            }else{
                if(txt.value > num){
                    alert('你输入的数字太大，请重新输入');
                    txt.value = '';
                }else if(txt.value < num){
                    alert('你输入的数字太小，请重新输入');
                    txt.value = '';
                }else if(txt.value == num ){
                    alert('恭喜。你猜对了,点击确定可进入下一局');
                    window.location.reload();
                }
            }
        }

以上的JS代码已经能够实现这个游戏的基本功能了，我在js用的if判断是双等号，只需要判断数值是否相等，如需判断类型也相同，需要给文本框的值进行数值类型的转换，并且把双等号改为全等。

以下为进阶版

我们看到，虽然简化版能实现基本的效果，但是距离真正的游戏规则还是差了一点，因此，下面进阶版的代码效果更加接近游戏规则，甚至是完整的呈现出来。

html代码

对于html代码，我们增加了两个span元素，用于呈现当前的数字区间。

js代码

let beforeNum = document.getElementById('before');
let afterNum = document.getElementById('after');
let txt = document.getElementById('txt');
let mytimer = null;

同样的，获取两个span标签和一个input标签，并且定义mytimer变量，给下面的定时器使用。

const num = parseInt(Math.random()*99)+1;

定义随机数字，我的数字区间是1-99，并且使用const定义变量，目的防止这个数字被修改。

function checkNum(chNum,endNum){
            let beforeText = parseInt(beforeNum.innerHTML) ;
            let afterText = parseInt(afterNum.innerHTML);
            if(chNum < beforeText || chNum > afterText){
                alert('请输入'+ beforeText + '-' + afterText + '之间的数字');
            }else {
                if(chNum > endNum){
                    mytimer = setInterval(()=>{
                        afterText --;
                        if(chNum >= afterText){
                            afterText = chNum;
                            clearInterval(mytimer);
                            mytimer = null;
                        }
                        afterNum.innerHTML = afterText;
                    },50)
                }else if(chNum < endNum){
                    mytimer = setInterval(()=>{
                        beforeText ++;
                        if(chNum <= beforeText){
                            beforeText = chNum;
                            clearInterval(mytimer);
                            mytimer = null;
                        }
                        beforeNum.innerHTML = beforeText;
                    },50)
                }else if(chNum == endNum){
                    alert('恭喜,你猜对了,boom');
                    location.reload();
                }
            }
        }

在这个函数里面，定义两个形参，第一个形参是用于获取文本框的值，第二个形参是目标数字，也就是上面定义的随机数字（本局炸弹）。
1.先获取两个span标签的值，接下来对被检测的数字进行区间检测，如果超过本区间，弹出提示框提示。
2.区间检测通过后，判断输入的数字与目标数字的大小，对最小区间的值或最大区间的值进行修改，形成新的区间，在形成新区间的时候，启动定时器让数字不断加大或减少，增加体验效果。
3.如果猜中数字，弹出提示框，刷新页面。

txt.onchange = function(){
            if(!this.value){
                alert('请输入数字');
            }else if(isNaN(this.value)){
                alert('请输入数字');
            }else {
                checkNum(this.value,num);
            }
        }

最后，先对文本框的值进行合法性判断，如果不合法弹出提示框提示，合法则调用函数，开始游戏。