用html实现网页版的拼图游戏,jQuery实现网页拼图游戏
之前看了一个页面中将图片分割的效果,感觉不错,有些好奇他是怎么实现的。
跟搭档说了一下,大概明白。其实就是利用 overflow=hidden ,margin-left, margin-top 这三个属性的配合,让人感觉图片被一个个格子地分开了。
刚刚写了个 Jquery的小插件,处理了整个的图片分格化,用户只要指定一个图片就可以自动生成格子图片,还自动生成“打乱”,“复原”,行,列等按钮。同时具有提示位置正确的图片数的功能。
看效果:
1.生成格子图片成功:
2.打乱图片次序
3.手动设置行列,这里限定了最大的行列都是 10 ,最小是3,多了会眼花撩乱。
4.再次打乱
5.去除小格子的边框,去除了图片分格子就不明显了
在页面上这用调用:
$(document).ready(function(){
$("#origin").tablePic({
target: 'targetDiv',col:4,row:3,borderColor:'#fff',freeColor:'#cec'
});
});
完整的js:
(function($){
/*
* 坐标类
* @param {Object} x
* @param {Object} y
* @memberOf {TypeName}
*/
function Point(x,y){
this.top=x;
this.left=y;
}
/**
* 修正版本,原图右下角的小图不显示,是活动格子
* 添加 “打乱”,“换图按钮”
*
* @param {Object} options
* @memberOf {TypeName}
* @return {TypeName}
*/
$.fn.tablePic=function(options){
var DEFAULT={
target:'',
row:2,
col:2,
isBorder:true,
borderColor:'#f88',
mode:'strict',//是否严格判断格式相邻移到,如果不是strict,那么就是不管怎样都是直接和空白格式内容交换
freeColor:'#92cf28' //空白格子的背景颜色
}
var options=$.extend(DEFAULT,options);
//系统变量
var SYSTEM={
width:0,height:0,
//小格子的大小
sonWidth:0,sonHeight:0,
src:null,
current:'',correct:0,//正确个数
hits:0//步数
}
var parent=null;//这个是待分割的图片
var target=null;//这个是格子存放的容器,一般是一个div,也应该是!!!!!别搞独特=.=
//这个是左,上 的margin
var margin=new Array();
this.each(function(){
parent=$(this);
SYSTEM.src=parent.attr("src");
SYSTEM.width=parseInt(parent.css("width"));
SYSTEM.height=parseInt(parent.css("height"));
SYSTEM.sonWidth=Math.round(SYSTEM.width/options.col);
SYSTEM.sonHeight=Math.round(SYSTEM.height/options.row);
init();
initMargin();
});
//初始化目标
function init(){
target=$("#"+options.target);
initTarget();
//最后我们要添加一个空白的divprepend
target.append($("
.append($("").attr("id","correctInfo"))
.append($("").bind("click",function(){initMargin();}).append("复原"))
.append($("").bind("click",function(){mixMargin();}).append("打乱"))
.append($("").attr("id","isBorder").bind("click",function(){border();}).append(((options.isBorder)?"去除":"添加")+"边框"))
.append(" 行:")
.append($("").attr("id","rowSelect"))
.append("列:")
.append($("").attr("id","colSelect"))
);
initSelect();
}
function initTarget(){
SYSTEM.sonWidth=Math.floor(SYSTEM.width/options.col);
SYSTEM.sonHeight=Math.floor(SYSTEM.height/options.row);
target.css("width",SYSTEM.width+'px').css("height",SYSTEM.height+'px');
//是否显示边框
if(options.isBorder){
target.css("width",SYSTEM.width+options.col+'px').css("height",SYSTEM.height+options.row+'px');
}
target.css("position","relative");
}
/**
* 设置两个 select的属性,并添加事件
*/
function initSelect(){
for(var i=3;i<=10;i++){
$("#rowSelect").append($("").attr("vaule",i).append(i));
$("#colSelect").append($("").attr("vaule",i).append(i));
}
target.find("select").each(function(){
$(this).change(function(){
options.row=parseInt($("#rowSelect").val());
options.col=parseInt($("#colSelect").val());
initTarget();
initMargin();
});
});
}
/**
* 边框的设置
*/
function border(){
options.isBorder=!options.isBorder;
//initTarget();
//initMargin();
target.children(":not(#control)").children().each(function(){
$(this).css("border-top",(options.isBorder?"1px solid "+options.borderColor:"none")).css("border-left",(options.isBorder?"1px solid "+options.borderColor:"none"));
});
$("#isBorder").html(((options.isBorder)?"去除":"添加")+"边框");
}
function initImage(){
//清空 target
target.children(":not(#control)").remove();
$("#rowSelect").val(options.row);
$("#colSelect").val(options.col);
//生成格子,基本形式:
//
//
//
//
//为了兼容神奇的ie6,我们添加一个div在外围
var $temp=$("
target.append($temp);
for(var i=0;i
if(margin[i].left==options.col-1&&margin[i].top==options.row-1){
$temp.append($("
.append($("
SYSTEM.current='gz'+(i+1);
}
else{
$temp.append($("
$("
.append($("").attr("src",SYSTEM.src).css("width",SYSTEM.width+'px').css("height",SYSTEM.height+'px').css("display","block"))
));
}
}
initHandle();
checkRight();
}
//初始化 margin 这个属性
function initMargin(){
var temp=0;
for(var i=0;i
for(var j=0;j
margin[temp++]=new Point(i,j);
}
initImage();
}
//打乱图片次序
//使用 margin.splice 不能正确返回被删除的数组元素,这里使用一个 中间 数组进行随机排序
function mixMargin(){
var temp1=new Array();
var temp2=new Array();
for(var i=0;i
temp2[i]=i;
}
//使用 js 的splice 函数得到随机排序的数组
for(var i=0;i
temp1[i]=margin[temp2.splice(Math.floor(Math.random()*temp2.length),1)];
}
margin=temp1;
initImage();
}
/**
* 添加事件
* @memberOf {TypeName}
* @return {TypeName}
*/
function initHandle(){
for(var i=0;i<=options.col*options.row;i++){
$("#gz"+i).bind("click",function(){
var newId=$(this).attr("id");
if(newId==SYSTEM.current)
return false;
//如果设定了mode为strict,就判断是不是与空白格子相邻,只有相邻了才可以发生效果
if(options.mode=='strict'){
if(SYSTEM.current=='gz0'&&newId!=('gz'+options.col))
return false;
var ii=parseInt(newId.substring(2));
var jj=parseInt(SYSTEM.current.substring(2));
if(!(Math.abs(ii-jj)==1||Math.abs(ii-jj)==options.col))
return false;
}
var temp=$(this).html();
$(this).html($("#"+SYSTEM.current).html());
$("#"+SYSTEM.current).html(temp);
SYSTEM.current=$(this).attr("id");
checkRight();
});
}
}
/*
* 检查当前正确的图片数
*/
function checkRight(){
SYSTEM.correct=0;
for(var i=0;i
var $temp=$("#gz"+(i+1)).children(":first");
if($temp.html()!=''&&parseInt($temp.css("margin-left"))==(-1*SYSTEM.sonWidth*(i%options.col))&&parseInt($temp.css("margin-top"))==(-1*SYSTEM.sonHeight*Math.floor(i/options.col))){
SYSTEM.correct++;
}
}
showCorrect();
}
/*
* 显示正确的图片信息
*/
function showCorrect(){
$("#correctInfo").html("正确图片:"+SYSTEM.correct+"/"+(options.col*options.row-1)+" ");
}
}
})(jQuery);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
用html实现网页版的拼图游戏,jQuery实现网页拼图游戏相关推荐
- 2048网页版html项目报告,jQuery编写网页版2048小游戏
大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起 ...
- html5游戏割绳子源码,HTML5 网页版割绳子(Cut the Rope)游戏
Cut the Rope 是移动设备上的一款小游戏,十分招人喜欢.微软联合 Cut the Rope 团队将这个小游戏制成了网页版 Cut the Rope(割绳子),使用 HTML5 与 JavaS ...
- python登录网页版易信_易信网页版下载|易信网页版登陆客户端官方最新版 2.1.1103.0 - 系统天堂...
易信网页版登陆客户端是一款可以在pc电脑上直接登陆您的易信账号的一个客户端软件,它是一款能够真正免费聊天的即时通讯软件,小编今天就跟大家分享这款易信网页版登陆及其安装方法,本站提供本站提供易信网页版下 ...
- 梦幻西游网页版什么是通用服务器,梦幻西游网页版定神香S18526
游戏简介: <梦幻西游>网页版爆爽来袭,这是你从没见过的梦幻西游!极速节奏,超高爆率,前爽未有的冒险之旅,三界由你来主宰! 开局即可轻松获得无级别限制武器,还有各色极品召唤兽.神兽.伙伴. ...
- 镇魔曲网页版服务器选择,《镇魔曲网页版》角色选择新手攻略
原标题:<镇魔曲网页版>角色选择新手攻略 <镇魔曲网页版>新手玩什么角色比较好?<镇魔曲网页版>新手角色选择心得分享. 作为一款网页版游戏,从5月份的测试服开始,& ...
- 网页版登录入口_企业微信网页版怎么登录?企业微信客户端和网页版有什么区别?...
文丨语鹦企服私域管家原创,未经授权不得转载 企业微信有网页版也有客户端,很多小伙伴可能搞不清,今天语鹦企服就带你一起看看,企业微信客户端和网页版有什么区别?以及如何登录使用. ▎企业微信网页版: 与微 ...
- cad有没有网页版_在线CAD看图网页版,一样可以快速查看CAD图纸
CAD制图工作中,如果想要快 速查看CAD图纸,使用方便的CAD看图软件是常用的.CAD看图软件区别于AutoCAD复杂的程序,可以对dwg\dxf格式的CAD图纸进行浏览查看.同时可以完整的显示出图 ...
- Spring+Netty+Vue 网页版聊天应用,仿微信网页版聊天
1:前言 最近在学习网络知识,对于java开发来说,Netty是一个非常重要的框架,无论是为了面试还是日常工作中,如RPC框架Dubbo底层其实是用了Netty, 又或者我们的聊天通信功能,都可能有N ...
- 最新微软语音合成网页版源码+影视解说配音网页版
正文: 最新微软语音合成网页版源码,影视解说配音网页版,几个文件写成的微软语音合成接口,调用的是官方api,亲测合成很快,大家总听到的短视频电影解说与搞笑短视频,都是微软配音员,可以说是市面上语音合成 ...
- php编网页版计算器,php实现简单的网页版计算器功能的方法
这篇文章主要介绍了php编程实现简单的网页版计算器功能,涉及php简单表单操作与数值运算相关实现技巧,需要的朋友可以参考下 如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础 ...
最新文章
- scala学习笔记-过程、lazy值和异常(6)
- 团队项目第一阶段冲刺站立会议4(4月21日)
- androidannotations
- 创建函数查找上级_一文秒懂JavaScript中对象的7种创建方式
- sqli-lib1-36关 精选篇
- HDU 6071 Lazy Running
- DOM中Property与Attribute的区别
- 安卓中的布局属性详解
- mysql显示行号,通过表名模糊查找,通过列名模糊查找,常用sql
- 面试官最喜欢问的算法概念
- 组合数学+gcd BZOJ3505 [Cqoi2014]数三角形
- Centos下PHP5升级PHP7
- ps-通道+高低频磨皮去斑
- Linux 磁盘清理
- 腾创秒会达视频会议系统软件 安卓
- 私有CA搭建并将HTTPS应用于Tomcat、Springboot
- erc20根据合约地址获取所有交易记录
- (30)zabbix Trapper 监控项配置
- 用c语言计算运费.c
- 硅谷巨头千亿市值蒸发,科技泡沫要破?创业者该如何过冬?
热门文章
- SAP Spartacus delivery mode页面Cannot find control with的错误消息
- 如何查询编程语言或者网站里一些特殊符号的unicode编码
- SAP CRM IBASE read header debug
- 将SAP Cloud for Customer Customer视图的Account ID配置出来
- Hybris Commerce的 Master Tenant和Netweaver的System Client
- Settype COM_TA_MANUFAC - mapping between ERP Equipment and CRM Individual Object
- Hybris commerce里用web service为什么查询不到产品的描述信息
- perform build_lc_user_stat
- 为什么所有的React应用开头都有一行meta charset=utf-8语句?
- 使用report 打印category 03的IBASE hierarchy