jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】


Posted in jQuery onSeptember 12, 2017

本文实例讲述了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>
jQuery 相关文章推荐
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 #jQuery
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
You might like
PHP新建类问题分析及解决思路
2015/11/19 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
vue实现虚拟列表功能的代码
2020/07/28 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
党员思想汇报范文
2013/12/30 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
主题班会演讲稿
2014/05/22 职场文书
物资采购方案
2014/06/12 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
女性励志书籍推荐
2019/08/19 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
Python语言中的数据类型-序列
2022/02/24 Python