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程序设计有所帮助。
相关推荐
-
基于vue组件实现猜数字游戏
本文实例为大家分享了vue猜数字游戏的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>vue组件猜数字游戏</title> <script src="js/vue.js"></script> </head> <body> <div id
-
基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析 当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列在下了: 1.随机生成1~15的数字格子,每一个数字都必须出现且仅出现一次 2.点击一个数字方块后,如其上下左右有一处为空,则两者交换位置 3.格子每移动一步,我们都需要校验其是否闯关成功 4.点击重置游戏按钮后需对拼图进行重新排序 以上便是本实例的主要功能点,可见游戏功能并不复杂,我们只需一个个攻
-
使用vue编写一个点击数字计时小游戏
使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束. 1.首先下载vue源码,下载地址http://cn.vuejs.org 2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解) 3.建立一个普通的ht
-
使用vue.js编写蓝色拼图小游戏
之前在网上看到<蓝色拼图>这款小游戏,作者是用jquery写的.于是便考虑能不能用vue.js优雅简单的编写出来呢? Later equals never!说干就干.首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推 该图为第三关3*3的方块.点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了. 现在规则清楚了,开动吧! /*style*/ .game_bg{ background: #333; width: 600px; height: 600p
-
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: 600p
-
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片.图片集.Ajax数据,还能加载SWF影片,iframe页面等等. 效果演示 源码下载 fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse
-
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示 源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><
-
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
首先给大家展示下效果图: 查看效果 源码下载 html代码部分: 代码如下: <!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
-
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 效果展示 源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet"
-
基于jquery实现可定制的web在线富文本编辑器附源码下载
今天给大家介绍一款非常棒的WEB在线富文本编辑器--UMeditor,它是由百度web前端研发部开发所见即所得富文本web编辑器UEditor演变的迷你版编辑器,具有轻量,可定制,注重用户体验等特点,允许自由使用和修改代码,适用于前台快速简单回复框或后台内容编辑器. 在线预览 源码下载 如何使用? 建立一个demo.html文件,首先在需要添加编辑器的地方加入以下代码,使用style可以设置编辑器的宽度和高度. <script type="text/plain" id=&
-
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
CSS3和jquery都可以实现缓动追逐效果,但是考虑到浏览器的兼容性,建议使用jquery animate方法来实现. 先给大家展示下实现效果如下: 效果演示 源码下载 引用文件: jquery-1.11.1.min.js html <div id="container"> <div id="first"></div> <div id="second"></div> &l
-
Dropzone.js实现文件拖拽上传功能(附源码下载)
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示 源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&
-
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示 源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l
-
Jquery效果大全之制作电脑健康体检得分特效附源码下载
jquery制作电脑健康体检得分效果图如下所示,喜欢的朋友可以下载源码哦. 查看效果图 源码下载 文件引用: <script type="text/javascript" src="js/jquery-...min.js"></script> <script type="text/javascript"> var current = ; $(document).ready(function(){ $