翻转拼图网页小游戏制作

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

先上最终成品

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

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

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

逐步实现：
1：点击按钮实现变色，
2：点击按钮实现旁边按钮的变色
3：实现变色的重复性，
4：设置边界，
5：设置成功条件。

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

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

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

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

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

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

 

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

有代码有真相

<div class="main">
    <button class="butt" id="but1" onclick="myFunction(this)"></button>
    <button class="butt" id="but2" onclick="myFunction(this)"></button>
    <button class="butt" id="but3" onclick="myFunction(this)"></button>
    <button class="butt" id="but4" onclick="myFunction(this)"></button>
    <br>
    <button class="butt" id="but5" onclick="myFunction(this)"></button>
    <button class="butt" id="but6" onclick="myFunction(this)"></button>
    <button class="butt" id="but7" onclick="myFunction(this)"></button>
    <button class="butt" id="but8"  onclick="myFunction(this)"></button>
    <br>
    <button class="butt" id="but9"  onclick="myFunction(this)"></button>
    <button class="butt" id="but10" onclick="myFunction(this)"></button>
    <button class="butt" id="but11" onclick="myFunction(this)"></button>
    <button class="butt" id="but12" onclick="myFunction(this)"></button>
    <br>
    <button class="butt" id="but13" onclick="myFunction(this)"></button>
    <button class="butt" id="but14" onclick="myFunction(this)"></button>
    <button class="butt" id="but15" onclick="myFunction(this)"></button>
    <button class="butt" id="but16" onclick="myFunction(this)"></button>
</div>

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给他美工一下，就加了点变化的特效，还把方形改成圆角的，再加了几个交互的按钮，这就可以算是完工了。。感觉学以致用，学了什么，还是喜欢马上去运用，这能够很快的掌握这些知识。。