更多>
最新下载
24小时阅读排行榜
- 1 安卓追书神器免费下载_官方网页版小说阅读链接
- 2 Linux命令行中ifconfig与ip命令的区别
- 3 如何自己缴纳社保?
- 4 Java中字符串常量池的核心作用
- 5 AdobeFirefly模型怎么创建民间故事艺术_AdobeFirefly模型创建民间故事艺术全面指导
- 6 Java中注解的核心概念和使用价值
- 7 PHP代码怎么连接数据库_ PHP数据库连接配置与查询执行步骤
- 8 HTML与D3.js数据可视化前端库结合_HTML与D3.js数据可视化前端库结合详解
- 9 Snakemake在Slurm环境下实时输出与规则优化:深度教程
- 10 Java 项目 Makefile 指南:编译、执行与命令行参数处理
- 11 安装Java时如何避免与已有软件冲突
- 12 Java 项目 Makefile 实践:编译、运行与命令行参数处理
- 13 php怎么输出helloworld_php输出helloworld的基础语法详解
- 14 SQL 分组查询多条件筛选怎么写?
- 15 PHP如何处理错误和异常_PHP错误与异常处理机制详解
更多>
最新教程
-
- Node.js 教程
- 2750 2025-08-28
-
- CSS3 教程
- 280276 2025-08-27
-
- Rust 教程
- 3331 2025-08-27
-
- Vue 教程
- 4065 2025-08-22
-
- PostgreSQL 教程
- 4212 2025-08-21
-
- Git 教程
- 3219 2025-08-21
jQuery人物图片拼图游戏代码
这是一款简单好玩的jQuery人物图片拼图游戏代码,点击开始游戏随机打乱图片,有时间和操作步数记录。
js代码
<script type="text/javascript">
$(function(){
var tt=null;
// 游戏完成时间和步数
var times=0;
var time=0;
// 打乱之前的图片数组准备加油
var src= Array();
src.push("images/201.png");
src.push("images/202.png");
src.push("images/203.png");
src.push("images/204.png");
src.push("images/205.png");
src.push("images/206.png");
src.push("images/207.png");
src.push("images/208.png");
src.push("images/209.png");
// 按钮事件加油。。。开始游戏
$('#button').click(function(){
clearInterval(tt)
// 时间归0
time=0;
times=0;
// 来来来设置时间;了
tt=setInterval(shij,1000)
function shij(){
time++;
$(".time>p>span").text(time)
}
// 乱序排列
var srcUsing= new Array();
for(var p=0; p<src.length;p++){
srcUsing[p]=src[p];
}
var newArry= new Array();
for(var i=0;i< $("#box img").length;i++){
newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));
}
for(var j=0;j<newArry.length;j++){
$("#box img").eq(j).attr("src",String(newArry[j]));
}
// 设置一个空白图片,
var Arrps=document.getElementById("box").getElementsByTagName("img");
for(var i=0;i<Arrps.length;i++){
Arrps[i].onclick=function(){
if (this.getAttribute("src")=="images/201.png");
changeP(this,Arrps);
};
}
})
// 判断位置
function changeP(ob,Arrps){
var Ni=0;
var Nj=0;
for(var i=0;i<Arrps.length;i++){
if(Arrps[i]==ob)
{
// alert(ob)
Ni=i;
}
if(Arrps[i].getAttribute("src")=="images/201.png")
{
Nj=i;
}
}
// 绝对值
if(Math.abs(Ni-Nj)==3)
{
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}else if((Ni-Nj)==1&&(Ni%3)!=0){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}else if((Ni-Nj)==-1&&(Ni%3)!=2){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}
$(".bu>p>span").text(times)
}
function ifright(){
var ps=document.getElementById("box");
var Arrps=ps.getElementsByTagName("img");
for(var i=0;i<src.length;i++){
if(src[i]!=Arrps[i].getAttribute("src")) return;
}
alert("恭喜,你成功了。。"+"\n"+"用了"+times+"步")
}
})
</script>
js代码
<script type="text/javascript">
$(function(){
var tt=null;
// 游戏完成时间和步数
var times=0;
var time=0;
// 打乱之前的图片数组准备加油
var src= Array();
src.push("images/201.png");
src.push("images/202.png");
src.push("images/203.png");
src.push("images/204.png");
src.push("images/205.png");
src.push("images/206.png");
src.push("images/207.png");
src.push("images/208.png");
src.push("images/209.png");
// 按钮事件加油。。。开始游戏
$('#button').click(function(){
clearInterval(tt)
// 时间归0
time=0;
times=0;
// 来来来设置时间;了
tt=setInterval(shij,1000)
function shij(){
time++;
$(".time>p>span").text(time)
}
// 乱序排列
var srcUsing= new Array();
for(var p=0; p<src.length;p++){
srcUsing[p]=src[p];
}
var newArry= new Array();
for(var i=0;i< $("#box img").length;i++){
newArry.push(srcUsing.splice(Math.floor(Math.random()*srcUsing.length), 1));
}
for(var j=0;j<newArry.length;j++){
$("#box img").eq(j).attr("src",String(newArry[j]));
}
// 设置一个空白图片,
var Arrps=document.getElementById("box").getElementsByTagName("img");
for(var i=0;i<Arrps.length;i++){
Arrps[i].onclick=function(){
if (this.getAttribute("src")=="images/201.png");
changeP(this,Arrps);
};
}
})
// 判断位置
function changeP(ob,Arrps){
var Ni=0;
var Nj=0;
for(var i=0;i<Arrps.length;i++){
if(Arrps[i]==ob)
{
// alert(ob)
Ni=i;
}
if(Arrps[i].getAttribute("src")=="images/201.png")
{
Nj=i;
}
}
// 绝对值
if(Math.abs(Ni-Nj)==3)
{
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}else if((Ni-Nj)==1&&(Ni%3)!=0){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}else if((Ni-Nj)==-1&&(Ni%3)!=2){
var temperOb=ob.getAttribute("src");
ob.setAttribute("src","images/201.png");
Arrps[Nj].setAttribute("src",temperOb);
times++;
ifright();
}
$(".bu>p>span").text(times)
}
function ifright(){
var ps=document.getElementById("box");
var Arrps=ps.getElementsByTagName("img");
for(var i=0;i<src.length;i++){
if(src[i]!=Arrps[i].getAttribute("src")) return;
}
alert("恭喜,你成功了。。"+"\n"+"用了"+times+"步")
}
})
</script>


本站所有资源都是由网友投搞发布,或转载各大下载站,请自行检测软件的完整性!本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架,联系方式:admin@php.cn