【JS】从零开始编一个JS游戏（4）

写在前面的

   接下来就是最最重要的JS代码了，话不多说，直接贴。

JS篇

• 为了缩短篇幅，核心的数组部分这篇文章先解释第一种方法，另一种下篇和源码文件一起贴出来。

window.onload = function(){
    document.onselectstart = function(){return false;};     //禁止选中事件，对游戏会产生干扰，你要是玩着玩着突然蓝一片，你试试

    //DOM扩展API，selectors 选择API
    function $(selector){
        //var doms = document.querySelector();      //返回与该模式匹配的第一个元素,没有则返回NULL
        var doms = document.querySelectorAll(selector);
        return doms.length>1?doms:doms[0];
    }

    //获取界面
    var time=$(".time");
    var score=$(".score");
    var show=$(".content");
    var list=$(".colorButtons>span");
    var again=$(".again");
    var rule=$(".rule");
    var wrap=$(".wrap");


    //定义颜色
    var colors = ['red','blue','gold','green','white'];
    var words = ['红','蓝','黄','绿','白'];

    //初始化游戏时间,分数，以及颜色的游标以便来标记选用数组中的颜色
    var times = 20,scores = 0,colorIndex = 0;

    //初始化定时器
    var timer = null;

    //在拖动浏览器窗口的时候让界面自适应窗口的变化,自动扩展元素到全部的显示区域
    function fillToBody(ele){
        ele.style.width = document.documentElement.clientWidth + 'px';
        ele.style.height = document.documentElement.clientHeight + 'px';
    }   
    //然后把warp（最外层）的参数获取
    fillToBody(wrap);
    //重新绘制窗口
    window.onresize = function(){
        fillToBody(wrap);
    }

    //改变大屏显示文字,在words中随机取一个，在color中随机取一个元素，组合，放置到大屏幕中
    function showChange(){
        //随机生成数组游标
        colorIndex=rand();  //rand需要自己来定义在下面
        var wordsIndex = rand();
        show.innerHTML = words[wordsIndex]; //由于我们的游戏规定只与字的颜色有关，与字无关，所以没有定义字体游标为全局变量
        show.style.color = colors[colorIndex];
    }showChange();

    /*好了，到这里我们游戏的主界面的变化就做好了，同理，
    下面的那一堆按钮也需要颜色或者字的重排列，这样可以增加游戏难度*/

    /*这里就需要用到我们在数据结构中的方法了，由于我们不能改变数组的大小，但是又需要
     调整数组里面原始元素的排序。虽然和进出栈比较类似，但也没有那么复杂，所以我们可以继续换一种算法来实现*/
    /*数组重排序方法：
     var ary = [1,2,3,4,5,14,23]
     ary.sort();    升序
     ary.reserve();     降序
     由于数组的排序是转换成字符串的如下
     [1,14,2,23,3,4,5]所以就需要借助函数来进行重排
     ary.sort(function compare(a,b){return a-b})如果是-1则返回false，两者不交换位置 
     */

    //颜色选择器重排序
    //arrs()是一个辅助函数，在下面有写
    function listChange(){
        //文字下标随机
        var words_index = arrs();
        //颜色下表随机
        var colors_index = arrs();

        //遍历红黄绿蓝白的字，并且给每个字加上颜色，list为页面获取的DOM
        for(var i=0;i<list.length;i++){
            //让SPAN中的文字，以及文字的颜色随机进行变换
            list[i].innerHTML = words[words_index[i]];
            list[i].style.color = colors[colors_index[i]];
            //取出这个字的数组下标
            list[i].sIndex = words_index[i];
        }
    }listChange(); 

    //单击颜色判断事件
    var flag = false;
    for (var i=0;i<list.length;i++) {
        list[i].onclick = function(){
            if(this.sIndex == colorIndex&&times!=0){
                showChange();
                listChange();
                flag = true;
                scores ++;
                score.innerHTML = '完成：' + scores;
            }
        }
    }

    //定时器
    timer = setInterval(function(){
        if(flag){
            if(times==0){
                flag = false;
                alertCase(scores);
            }else{
                times--;
                time.innerHTML = '剩余时间：' + times;
            }
        }
    },1000);

    //最终提示框
    function alertCase(n){
        if(n<10){
            alert("Game Over,你也太菜了吧！才得了：" + scores + "分!");
        };
        if(n<15&&n>=10){
            alert("Game Over,你也就这样了！敢不敢再快点！你瞅瞅！才得了：" + scores + "分！");
        };
        if(n>=15){
            alert("Game Over,我就是开玩笑，你这也太快了吧！！！你竟然得了：" + scores + "分！");
        };

    }


    //重新开始
    again.onclick = restart;
    function restart(){
        times = 20;
        scores = 0;
        showChange();
        listChange();
        flag = false;
        time.innerHTML = '剩余时间：20';
        score.innerHTML = '完成：0';
    }

    //数组的重排序,获取随机下标和随机数组
    /*arr.push()；推入一项
     arr.shift();取得第一项
     arr.pop();取得最后一项
     arr.unshift();ECMAscript提供：在顶端推入一项*/
    function arrs(){
        var arr = new Array();
        for(var i=0;i<colors.length;i++){
            arr.push(i);
        }
        arr = arr.sort(function(){return 0.5 - Math.random()});
        return arr;
    }

    //自定义随机数
    function rand(){
        //math.random---->0-1
        //math.random()*5       //>0,<5
        var num = Math.floor(Math.random()*5)       //0-4这样的随机数
        return num;
    };
}

总结

   这里的核心算法大家也看的出来，就是将页面获取的DOM元素在原数组中进行直接位置变换，类似于构造函数中的“出入栈”的基本算法，这种方法需要对原数组进行直接操作，另外一种方法就是对数组的副本进行操作，这样就可以直接获取到原数组和改变以后的数组两种情况，更加方便对其进行取值和操作，还请大家继续关注吧！