【JS】从零开始编一个JS游戏(1)

写在前面的

   学了这么多的前端知识是时候总结一下了，经过了一个多星期的准备，并且看了一些数组的高级应用视频，就决定做一款JS+JQ的游戏了，中间经过了一些“闹心”的日子，终于也是成功了。之前最开始想做一个贪吃蛇，但是无奈自己对数组的应用还是不够好，代码一直跑不通，就只好先放弃了，先做一个简单点的游戏—测试你的思维定势，下面我就从最最开始写起，也帮助和我一样的游戏小白慢慢实现自己的梦想吧。

材料

JQ

• 做这个游戏对JQ的使用就是获取页面中的节点了，除此之外就是纯的JS了

DOM选择器扩展API

• DOM选择器的应用主要是将页面的节点信息获取之后返回到后台进行操作，所以就使用下面的方法就可以了。

• 方法举例

//DOM扩展API，selectors 选择API
function $(selector){
    //var doms = document.querySelector();  //返回与该模式匹配的第一个元素,没有则返回NULL,返回的是一个数组，包含了页面上所有的节点信息

    var doms = document.querySelectorAll(selector);
    return doms.length>1?doms:doms[0];
    }

//之后就是通过JQ来获取页面值了
var js = $("xxx");

CSS

• 游戏主界面基本分为6个部分，分别为上面两个标题栏，主界面的变换区域，规则区域，点击区域，重开区域，样式如下：
  

• 在CSS的设计中，为了让界面更好的贴合屏幕或者是浏览器的尺寸，经常需要进行兼容设计，这次也不例外，我们需要让游戏的界面根据浏览器的大小来进行变动所以CSS需要掌握的知识点如下：

/*初始化界面（都是需要背下来的）*/
@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;     
}

/*由于我们的需求，所以需要位置相对固定*/
position:absolute

• 其他的CSS代码在之后的文章中我们再贴出来。

Array

• 这也就是我为什么要做这个的理由了，因为我觉得数组学了之后应用的地方太少了，何况是带有一定目的的应用，所以就带着这个目的做了这个游戏，也是这个游戏的核心所在吧！

• 如上面的游戏界面所示我们需要两个数组，一个装“字”，一个装“颜色”，然后把“颜色”加在“字”上，随机产生，基本的游戏逻辑就产生了。

• 代码的知识点如下：

/*大致思路就是将定义好的“字”数组里面的元素打乱排序，然后选择其中一个显示在界面上，“颜色”数组同理，然后加在字上让其显示出不同的颜色。这里先写一中方法，在后面的总结中我再写出其他的方法。*/

/*首先需要了解一下数组的知识点*/
arr.push();     推入一项
arr.shift();    取得第一项
arr.pop();      取得最后一项
arr.unshift();    /*ECMAscript提供：在顶端推入一项*/

/*数组重排序方法：*/
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，两者不交换位置 */

• 代码的核心逻辑如下：

//下面是“字”数组和“颜色”数组的重排序
//字数组
var words = ['红','蓝','黄','绿','白'];
//颜色数组
var colors = ['red','blue','gold','green','white'];

//重新定义两个数组，作为words和colors的数组游标来获取index值
var words_index = arrs();
var colors_index = arrs();

//对数组里面的值进行重排序
function arrs(){
        var arr = new Array();
        for(var i=0;i<colors.length;i++){
            arr.push(i);   //装入游标
        }
        //让arr中的游标随机排序
        arr = arr.sort(function(){return 0.5 - Math.random()});    
        //返回一个含有5个随机排序元素的数组
        return arr;  
}

• 有了上面的随机游标，事情就成功了一大半，接下来的事情就是把随机游标代表的颜色或者字显示到界面上就可以了：

//list是界面上获取到的相应的数组，之后的文章中会讲到
list[i].innerHTML = words[words_index[i]];
list[i].style.color = colors[colors_index[i]];

Timer(计时器)

• 用来计算剩余时间，将游戏重置的重要部件，所以嘞直接看一下基础的代码吧：

//这里就先写一个interval的用法，由于写上游戏中的代码的话就不好解释了，所以下面的文章我再仔细说明
timer = setInterval(function(){},1000);

总结

   好了，基本上我所用到的材料都在上面了，剩下的就是添砖加瓦把整个游戏做出来了，接下来会分HTML，CSS，JS三个部分把整个游戏整个从无到有全部仔仔细细的总结一遍，源代码会贴在最后一篇文章，感兴趣的朋友可以持续关注一下。