jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
更新时间：2017年09月12日 11:25:30 作者：ITzhongzi
这篇文章主要介绍了jQuery+vue.js实现的九宫格拼图游戏,结合完整实例形式分析了jQuery结合vue.js针对图片的相关操作技巧,需要的朋友可以参考下
本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
/*#piclist {
width: 600px;
height: 600px;
background-color: green;
}*/
.nitem {
/*width: 200px;*/
/*height: 200px;*/
float: left;
background: url(img/meinv.jpg) 0px 0px no-repeat;
-webkit-background-size: 600px 600px;
background-size: 600px 600px;
font-size: 33px;
color: red;
font-weight: bold;
cursor: pointer;
}
/*.nitem:nth-child(2){
background-position: -200px 0;
}
.nitem:nth-child(3){
background-position: -400px 0;
}
.nitem:nth-child(4){
background-position: 0px -200px;
}
.nitem:nth-child(5){
background-position: -200px -200px;
}
.nitem:nth-child(6){
background-position: -400px -200px;
}
.nitem:nth-child(7){
background-position: 0px -400px;
}
.nitem:nth-child(8){
background-position: -200px -400px;
}
.nitem:nth-child(9){
background-position: -400px -400px;
}*/
.fn-clear {
clear: both;
height: 0;
line-height: 0px;
font-size: 0px;
}
</style>
</head>
<body>
<div id="appbox" :style="{ width:width+'px',height:height+'px' }">
<div id="piclist">
<div class="nitem"
v-for="(item,index) in itemlist"
:class="{remove : index === 0}"
:index="index "
v-bind:style="{
'backgroundPosition':-px(index)+'px -' + py(index) + 'px',
width : width / rows + 'px',
height : height / cols + 'px'}">{{index}}
</div>
</div>
</div>
</body>
<script src=js/jquery-1.9.1.min.js></script>
<script src=js/vue.min.js></script>
<script>
var olen = 0, oi = 0, cindex = 0, oa = new Array(), oindex = 0, listarray = new Array();
var vm = new Vue({
el: "#appbox",
data: {
itemlist: [],
rows: 3,
cols: 3,
width: 600,
height: 600,
},
methods: {
px(index){
return (index % this.rows) * (this.width / this.rows)
},
py (index){
return parseInt((index / this.cols)) * (this.height / this.cols);
}
}
});
for (var i = 0; i < vm.rows * vm.cols; i++) {
vm.itemlist.push(i);
}
function getrow(index) {
return parseInt(index / vm.cols);
}
function getcols(index) {
return index % vm.rows;
}
function getBound(index) {
var left = index - 1;
var right = index + 1;
var top = index - vm.rows;
var bottom = index + vm.rows;
var len = vm.itemlist.length; //总长度
var currentRow = getrow(index);
var currentCol = getcols(index);
var roundArr = new Array();
if (left >= 0 && left < len && getrow(left) == currentRow) {
roundArr.push(left);
}
if (right >= 0 && right < len && getrow(right) == currentRow) {
roundArr.push(right);
}
if (top >= 0 && top < len && getcols(top) == currentCol) {
roundArr.push(top);
}
if (bottom >= 0 && bottom < len && getcols(bottom) == currentCol) {
roundArr.push(bottom);
}
return roundArr;
}
function box_switch(i, j) {
var iobj = $('#piclist .nitem').eq(i);
var jobj = $('#piclist .nitem').eq(j);
var tobj = iobj.clone();
jobj.after(tobj);
iobj.replaceWith(jobj);
}
vm.$nextTick(function () {
$('.remove').css({
background: 'none',
backgroundColor: 'green'
});
});
function box_rand(times) {
for (var i = 0; i < times; i++) {
oindex = $('.remove').index();
oa = getBound(oindex);
olen = oa.length;
oi = Math.floor(Math.random() * olen);
cindex = oa[oi];
box_switch(cindex, oindex);
}
listarray.length = 0;
$.each($('.nitem'), function (i, item) {
listarray.push($(item).attr('index'));
});
if (listarray.join(',') == vm.itemlist.join(',')) {
box_rand(times);
}
}
$(function () {
//打乱图片
box_rand(20);
$('.nitem').on('click ', function () {
var cindex = $(this).index();
var oindex = $('.remove').index();
var oRound = getBound(oindex); //空盒子四周的索引
if ($.inArray(cindex, oRound) < 0) { //不在
return false;
} else {
box_switch(oindex, cindex);
var listArray = new Array();
$.each($('.nitem'), function (i, item) {
listArray.push($(item).attr('index'));
})
if (listArray.join(',') == vm.itemlist.join(',')) {
alert('success')
} else {
console.log('失败')
}
}
});
})
</script>
</html>
附：完整实例代码点击此处本站下载。
PS：这里再为大家推荐两款相关图片类工具供大家参考：
在线美女拼图游戏：
http://tools.jb51.net/games/pintu
在线图片添加/解密隐藏信息(隐写术)工具：
http://tools.jb51.net/aideddesign/img_add_info
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
本文给大家汇总了下在jQuery中判断对象是否存在的方法以及用原生javascript实现的方法，有相同需求的小伙伴可以来参考下。2016-02-02
将this下的div轮番显示 dname指定需要执行此动作的元素，如果没有指定dname，将默认全部子元素2009-04-04
这篇文章主要介绍了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效,涉及jQuery插件jquery.kinMaxShow的相关使用技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
最近再做价值中国微博，从用户体验的角度，将很多常用的window.alert或者window.confirm之类比较生硬死板冷不丁的提示改为弹出层的方式实现。2010-10-10
jQuery如今已经成为Web开发中最流行的JavaScript库，通过jQuery和大量的插件，你可以轻松实现各种绚丽的效果。本文将为你介绍一些jquery实用的技巧，希望可以帮助你更加高效地使用jQuery。2015-11-11
这篇文章主要介绍了 jquery实现可编辑表格并生成json结果,该代码解析和加载功能都用前端js实现，简化了后台代码逻辑，非常不错，具有参考借鉴加载，需要的朋友可以参考下2017-07-07
这篇文章主要介绍了json格式的javascript对象用法,结合实例形式总结分析了javascript针对json格式数据操作的常见技巧,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jquery实现经典的淡入淡出选项卡效果代码,通过简单的jQuery鼠标事件及链式操作实现淡入淡出效果,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了 jquery实现图片跟随鼠标的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下2017-10-10
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度，这些在平时的项目中挺实用的，所以抽空封装了一个文本框根据输入内容自适应高度的插件，这里推荐给小伙伴们。2015-04-04
最新评论