翻转拼图网页小游戏制作

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

先上最终成品

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

1

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

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

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

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

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

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

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

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

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

1

 

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

 

posted on 2015-07-28 15:35  陆熠十四  阅读(871)  评论(0编辑  收藏  举报

导航