翻转拼图网页小游戏制作

咱们学东西的时候,往往喜欢玩点有趣的,这次就参考别人的创意,做了一个小游戏,虽然在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给他美工一下,就加了点变化的特效,还把方形改成圆角的,再加了几个交互的按钮,这就可以算是完工了。。感觉学以致用,学了什么,还是喜欢马上去运用,这能够很快的掌握这些知识。。

时间: 2024-10-10 04:26:13

翻转拼图网页小游戏制作的相关文章

【HTML】【实践】使用Canvas制作网页小游戏

HTML5中新增了Canvas元素,这个元素非常好玩,使用Canvas,我们可以使用代码绘制出我们想要的图形,用代码绘图,光是想想就兴奋啊. 于是我在学习了Canvas的部分内容后,动手制作了一款小游戏,这也是本人第一次独立开发web项目,所以内行人看到细节肯定忍不住吐槽,希望大家批评指正,给出宝贵意见,我们共同进步. 一.游戏介绍: 这个游戏的界面非常简单,左边一块用Canvas绘制的画布,右边有4个按钮,左边的画布上有一个红色的方块和一个黑色的方块,红色的方块是我们操作的对象,它是一个1×1

【网时】网页小游戏为什么如此盛行

现在市面上各种游戏纵横,细心观察就会发现,几乎只要你打开一个网页,下方就会出现一些小广告,以一些不可描述的图片和夸大事实的文字来吸引网友的注意. 你可能会疑惑,那种靠博人眼球获得点击率的小广告真的赚得到钱吗?答案是肯定的,甚至比客户端游戏简单得多.一位做网页游戏的代理在交流心得时提到,网页游戏虽然设计比较低端,但有一个特点就是,只要用户迷上游戏之后就会无法自拔.所谓升级打怪爆装备,都是为了用户充值做铺垫,或为了爆装备而充值,或为了高等级充面子而充值,但不管是为了什么,只要用户开始充值,就是运营商

极客学院前端实战开发 网页小游戏/网页布局/导航/标签页/语音识别

===============课程目录===============<实战开发教程>├<1 围住神经猫-HTML5实战游戏开发教程>│  ├1. 围住神经猫-游戏玩法.mp4│  ├2.围住神经猫-使用createjs.mp4│  ├3. 围住神经猫-绘制页面元素.mp4│  ├4.围住神经猫-添加监听事件.mp4│  ├5.围住神经猫-简单的逻辑实现游戏效果.mp4│  ├6. 围住神经猫-完整游戏效果实现.mp4│  └<source>├<10 回到顶部功能实

节奏大师小游戏制作流程

当我接到这个小游戏的时候,让我在那一瞬间不知所措.但总是要尝试,尝试后你会发现,只要思路理清楚,一步步走下来,效果自然的就实现了起来. 下面简单讲下自己做这个的一个思路. HTML实现:页面上有4个点击的按钮和4条轨道,4条轨道的倾斜度可通过transform: rotate();样式来实现. js实现:首先我们定义一个随机落下的物体的一个方法: 1 randoms: function() { 2 num++; 3 number = (1 + Math.random() * (4 - 1)).t

h5小游戏制作

编译环境 sublime text3 很久以前看了一个“看看你有色”的游戏,学习这个游戏的制作我让学会了框架的服用,游戏逻辑代码,游戏设计代码分离式编程,于是我便根据这个游戏改写了一个寻找包包的游戏,功能设计思路来自12306买票试图,失物寻领中如果失物属于你你需要五次从不同包包中找的你的包方可领取. 修订规则:1:30s内连续找对五次你的包包 2: 不满5次或时间用完则提示你该物品不属于你. 3:寻包次数不得高于5次即停止 游戏在网页上完成通过JQuary框架编写自适应布局 此段为游戏修改规则

Java从基础到进阶学习之路----数独小游戏制作(一)

前言 数独这个游戏大多数人都玩过,所以具体的游戏本身就不描述了. 详见百度百科:http://baike.baidu.com/subview/961/10842669.htm 规则和目标 数独的规则很简单,就是在每一行,每一列,每个小宫格区(3X3)内不可以出现重复的数字. 先贴一下大概的游戏界面样子: 需求功能分析 站在学习者的角度来说 练下手,学习一下MVC框架模式 这个项目涉及的Java的主要内容有: 1.Java基础语法,特别是Java集合的部分. 2.Java内置的Observer模式

Java从基础到进阶学习之路----数独小游戏制作(二)

详细设计 游戏数据结构设计 显然,需要存储数据的地方只有九宫格地图部分. 对于地图,很明显我们可以采用二维数组int [] [] game;来存储地图中的数据.但是int的二维数组虽然直接简单,但是还是有一定不便之处,比如没有集合的内置处理方法丰富.所以,显然,在游戏地图的生成过程中,一些辅助数据我们可以采用Java的集合. 地图生成算法 对于数独而言,游戏的成功的最根本的保证就是当前的地图有一个存在的解.这就像是解方程,如果不存在解,那么这个游戏本身就是失败的. 所以,重点在于如何产生一个存在

半期考html5小游戏制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

前端小游戏制作【戳泡泡】

最近捣鼓花了一周时间捣鼓了一个游戏引擎[白鹭],游戏原型是公司一个专题的游戏,戳泡泡,中间断断续续捣鼓了一周,终于正常运行游戏了. 游戏有两个版本:纯白鹭引擎和添加了p2物理引擎两个. 有喜欢的可以去研究下[白鹭引擎] 废话不多说,上图上代码. main.ts 红框内的是我写的代码,tool是我的一个工具集合,infoui是界面,gamFrameUI和gameFrameUI_p2是游戏界面逻辑的类,第二个使用了p2物理引擎的. _engine变量是定义使用的引擎,现在只有两个,一个是为空,另一个