咱们学东西的时候，往往喜欢玩点有趣的，这次就参考别人的创意，做了一个小游戏，虽然在css和JavaScript上我都算是新手，不过辛苦一天还是还超哥和各位师兄的帮助下弄出来了，就把这次开发分享一下吧。

先上最终成品

http://luyishisi.github.io/test.html

在准备写这个之前至少要有html，css和JavaScript的知识，如果会jQuery最好。

首先贴上一开始想的开发规划：

逐步实现：

1：点击按钮实现变色，

2：点击按钮实现旁边按钮的变色

3：实现变色的重复性，

4：设置边界，

5：设置成功条件。

所以，一开始是先画一个按钮，加入JavaScript函数，触发点击事件修改按钮的背景颜色。再次点击则再次修改。

当实现这两个的时候，时间已经过去一个多小时，在午饭前一直郁闷于如何让旁边的按钮也变色。

一开始的思路是每一个按钮设置id，分别处理，可以想象这是一个很糟糕的思路，于是开始考虑别的方案。

开始吃午饭了，一路上我就如何把按钮旁边的颜色变化这个问题，求教大师兄。他提供的解决方案，是运用jQuery的遍历，刚好昨天学了jQuery，这个思路是不错的。

后来超哥也提供一个思路，就是用二维数组表示数值，点击按钮修改数租参数，再调用一个函数，刷新所有按钮的值。

好就决定是他了，上吧，皮卡丘

 

再次奋战一小时，弄出来一个4*4的矩阵，画了16个按钮，

有代码有真相

function myFunction(x){    var id = x.id;//获取id    var num=(id.substr(3))-1;    var x_top_id = num-4;//算出上下左右的id    var x_left_id = num-1;    var x_right_id = num+1;    var x_bottom_id = num+4;    ar[x_top_id]++;    ar[x_bottom_id]++;    ar[num]++;    if(x_left_id!=3&&x_left_id!=7&&x_left_id!=11)    ar[x_left_id]++;    if(x_right_id!=4&&x_right_id!=8&&x_right_id!=12)    ar[x_right_id]++;    shuaxin();    win();}

上面这个就是主要的处理函数。点击后获取当前id，去掉前3个字符，然后变化成数字处理二维数组中的变化。可以看出方法还是比较笨的，因为边界是自己算出来的，最后添加刷新函数，和判断胜利函数，。

function shuaxin(){   for(var i = 1;i <=16;i++)    {   var id="but"+i;        x0=document.getElementById(id)        if(ar[i-1]%2==0)            x0.style.background="#e6ab5e";        else            x0.style.background="rgb(92,144,255)";    }}

function win(){   for(var i = 0 ; i < 16; i++)    {   if(ar[i]!=1){break;}        else if(i==15)alert("恭喜胜利");    }}

然后超哥的牛逼代码也弄出来大家看一下，这个是运用框架弄出来的，我加了一点注释，还是由超哥来说说吧。

<script>

var vm = avalon.define('model', function(vm) {

vm.sz = 0;//设置大小

vm.grid = [];//设定数组

vm.tile_click = function() {//设置点击函数

var col = $(this).index() % vm.sz;//知道第几列

var row = parseInt($(this).index() / vm.sz);//获取行

var dx = [0, 0, 1, 0, -1];//用于找上下左右格子

var dy = [0, 1, 0, -1, 0];//用于找上下左右格子

var buf;

var k=0;

for(var d = 0; d < 5; ++d) { col += dx[d]; row += dy[d];//五个位置都找一遍 if(col >=0 && col < vm.sz && row >=0 && row < vm.sz) {

//设置边界

buf = 1 - vm.grid[row*vm.sz+col];

// buf暂时存储数值

vm.grid.splice(row*vm.sz+col, 1, buf);

//替换进入

}

col -= dx[d]; row -= dy[d];//再回归到中间位置

}

for(var j=0; j < vm.sz*vm.sz;j++)

{

if(vm.grid[j]==1)k++;

if(k==(vm.sz*vm.sz))

{alert("恭喜胜利"); vm.sz++;}

}

}

});

vm.$watch('sz', function(val) {

var i, j, row;

val = parseInt(val) || 4;

vm.grid.clear();

for(i = 0; i < val * val; ++i) vm.grid.push(0); }); vm.sz = 3; function up(){ vm.sz++; if(vm.sz>15){alert("别乱点");vm.sz=14;}

}

function down(){

vm.sz--;

if(vm.sz==1){alert("不能再降了");vm.sz=2;}

}

</script>

 

最后关于这次的小开发。，在第二天我还试着用jQuery给他美工一下，就加了点变化的特效，还把方形改成圆角的，再加了几个交互的按钮，这就可以算是完工了。。感觉学以致用，学了什么，还是喜欢马上去运用，这能够很快的掌握这些知识。。