页面小游戏 - 牛牛拼图

作者: 辽A丶孙悟空 | 来源:发表于2020-02-24 13:08 被阅读0次

背景介绍

基本介绍
拼图游戏是广受欢迎的一种智力游戏，它的变化多端，难度不一，让人百玩不厌。个性化的拼图，拼凑的不仅仅是一张照片，而是一个故事，一段回忆，一缕温情。每一片的单片都有它自己的位置，就像每段回忆都有它的故事，你要将它放在专属的地方，放对了就慢慢丰富起来，放错了就无法完整。你可以把你记忆中最深的片段，可以是你挚爱的照片，可以是你最难忘的一瞬留念，做成拼图，在思念的季节里一一拼起，把片片散落的记忆重新组合，用指尖温习甜蜜，把心湖里最美丽的涟漪荡漾开来。

拼图历史
拼图玩具已经有约235年的历史了。早在1760年，法英两国几乎同时出现这种既流行又有益的娱乐方式。把一张图片粘在硬纸板上，然后把它剪成不规则的小碎片。最初这些图片都是有教育意义的，要么附有适于年轻人阅读的短文，要么向新兴资产阶级传授历史或地理知识。
到19世纪初，新的大规模生产工业技术赋予了拼图明确的形式。以前庞大笨重的拼图由边缘光滑的碎片排列组成，轻微的震动就能使它们分开。在1840年左右，德国和法国的拼图制造商用联锁的咬接机来切割拼图，现代的拼图迷们都很熟悉这种形式。他们用软木材、夹板和纸板代替硬木薄板，大大降低了成本。最终价格低廉的拼图被各阶层的消费者接受，很快在孩子们、成年人和老年人中掀起玩拼图狂潮。
拼图很快成为发展成熟的、拥有广大市场的娱乐产品，消费者在任何地方都能买到拼图。此时拼图不仅用于教育和娱乐，也用于商业广告和政治宣传。第一次世界大战（1914-1918）就是一个很好的例子。廉价的拼图上画有勇敢的战士们奋不顾身地为国王和国家而战，拼图在交战双方都很流行，卖得很好。拼图已成为靠近人们内心世界、进入家庭和传播信息的方法。拼图与报纸、收音机及即将出现的第一代电视成为一种简单而又直接的大众传媒方式。人们应该被鼓励乘火车旅游吗？许多展示雄伟火车和幸福旅游者的拼图就此出现。每一项新发明和潮流——汽船、飞机、汽车以及最新、最大胆的女式泳衣——都曾出现在拼图上。

预备知识

HTML（超文本标记语言）
知识点还没掌握的小伙伴可以简单学习一下：HTML基础知识 - 笔记

CSS（层叠样式表）
知识点还没掌握的小伙伴可以简单学习一下：CSS基础知识 - 笔记

JQuery
知识点还没掌握的小伙伴可以简单学习一下：JQuery基础知识 - 笔记

成果展示

足不出户一台电脑打天下，窝宅在家两只巧手定乾坤；废话咱不多说，大家都准备好了么？直接看图，代码走起来......

简单级别

入门级别

中等级别

高难级别

外星人级别

代码如下：

HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>牛牛拼图</title>
      <link rel="stylesheet" href="css/play.css">
  </head>
  <body>
      <div class="wrap">
          <div class="btnBbox">
              <button class="btn" type="button">开始</button>
              <div class="selectbox">
                  <button class="text">简单</button>
                  <ul class="box">
                      <li>简单</li>
                      <li>入门</li>
                      <li>中等难度</li>
                      <li>高难</li>
                      <li>外星人</li>
                  </ul>
              </div>
          </div>
          <div class="picBox">
              <ul class="list"></ul>
          </div>
      </div>
      <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="js/index.js"></script>
  </body>
</html>

CSS代码：

* {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: 0
}

html,
body {
  height: 100%;
  height: 100%
}

.wrap {
  padding: 120px 0
}

.btnBbox {
  margin: 0 auto;
  width: 600px;
  text-align: center
}

.btnBbox .selectbox {
  display: inline-block;
  vertical-align: top
}

.btnBbox .selectbox {
  display: inline-block;
  position: relative;
  width: 120px
}

.btnBbox .selectbox .text {
  width: 100%;
  height: 40px;
  text-align: center;
  border: 0;
  background: #ececec;
  border-radius: 5px;
  display: block;
  line-height: 40px;
  color: #3f3f3f;
  cursor: pointer;
  font-size: 16px;
  transition: all ease .2s
}

.btnBbox .selectbox .text:hover {
  background: #e4e4e4
}

.btnBbox .selectbox .box {
  position: absolute;
  width: 100%;
  padding: 5px 0;
  background: #ececec;
  color: #666;
  border-radius: 5px;
  z-index: 10000;
  margin-top: 5px;
  display: none;
  font-size: 14px
}

.btnBbox .selectbox .box li {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  transition: all ease .2s;
  cursor: pointer
}

.btnBbox .selectbox .box li:hover {
  background: #1abb85;
  color: #fff
}

.btnBbox .selectbox.active .text {
  background: #1abb85;
  color: #fff
}

.btnBbox .btn {
  width: 120px;
  border: 0;
  background: #3386e6;
  color: #fff;
  border-radius: 5px;
  height: 40px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 10px
}

.btnBbox .btn:hover {
  background: #388cec
}

.picBox {
  text-align: center;
  margin-top: 30px
}

.picBox .list {
  display: inline-block;
  width: 600px;
  height: 600px;
  position: relative
}

.picBox .list li {
  position: absolute;
  overflow: hidden;
  border-radius: 0;
  background-image: url(../img/牛牛.png);
  box-shadow: 0 0 6px rgba(255, 255, 255, .6);
  cursor: pointer;
  overflow: hidden
}

JavaScript代码：

var list = $('.picBox .list');
var listW = list.width();
var listH = list.height();
var imgW = listW / 3;
var imgH = listH / 3;
var origArr = [];
var randArr = [];
var key = true;
var imgCell;
var num = 3;
var seleBox = $('.selectbox');
var seleLi = seleBox.find('li');
var seleBtn = seleBox.find('.text');
init()

function init() {
  render(num)
  gameState()
  select()
}

function render(n) {
  list.html('')
  imgW = listW / n;
  imgH = listH / n;
  origArr = [];
  for(var i = 0; i < n; i++) {
      for(var j = 0; j < n; j++) {
          origArr.push(i * n + j);
          var li = $('<li>')
          li.css({
              left: j * imgW + 'px',
              top: i * imgH + 'px',
              backgroundPosition: -j * imgW + 'px ' + -i * imgH + 'px',
              width: imgW + 'px',
              height: imgH + 'px'
          })
          list.append(li)
          imgCell = list.find('li')
      }
  }
}

function select() {
  seleBtn.on('click', function() {
      $(this).siblings('.box').slideToggle()
      seleBox.toggleClass('active');
  })
  seleLi.on('click', function() {
      var index = $(this).index();
      var text = $(this).text();
      seleBtn.text(text)
      seleBox.find('.box').slideUp()
      seleBox.removeClass('active')
      if(index == seleLi.length - 1) {
          num = 12
          return
      } else if(index == seleLi.length - 2) {
          num = 8
          return
      }
      num = Math.floor(index * 1.5) + 3;
  })
}

function gameState() {
  $('.btn').on('click', function() {
      if(key) {
          key = false;
          $(this).text('复原')
          render(num)
          randomArr()
          cellOrder(randArr, num)
          drag()
          seleBtn.attr('disabled', 'disabled')
          $(imgCell).css('cursor', 'move')
          seleBox.find('.box').slideUp()
          seleBox.removeClass('active')
      } else {
          key = true
          $(this).text('开始')
          cellOrder(origArr, num)
          imgCell.off('mousemove mouseup mousedown mouseover mouseout')
          seleBtn.attr('disabled', false)
          $(imgCell).css('cursor', 'pointer')
      }
  })
}

function randomArr() {
  randArr = [];
  var len = origArr.length;
  var order;
  var temp = {}
  for(var i = 0; i < len; i++) {
      order = Math.floor(Math.random() * len)
      if(randArr.length > 0) {
          while($.inArray(order, randArr) > -1) {
              order = Math.floor(Math.random() * len)
          }
      }
      randArr.push(order)
  }
  return
}

function cellOrder(arr, n) {
  var len = arr.length;
  for(var a = 0; a < len; a++) {
      var j = arr[a] % n;
      var i = Math.floor(arr[a] / n);
      animateFn(a, j, i, n)
  }
}

function drag() {
  var disX, disY
  var initL = list.offset().left;
  var initT = list.offset().top;
  imgCell.on('mousedown', function(e) {
      var e = e || window.e;
      disX = e.pageX - $(this).offset().left
      disY = e.pageY - $(this).offset().top
      var self = this
      var index1 = $(this).index()
      $(document).on('mousemove', function(e) {
          e.preventDefault()
          var e = e || window.e
          var l = e.pageX - disX - initL
          var t = e.pageY - disY - initT
          $(self).css({
              left: l + 'px',
              top: t + 'px',
              zIndex: 1000,
              opacity: '0.6'
          })
      }).on('mouseup', function(e) {
          var e = e || window.e
          var l = e.pageX - initL
          var t = e.pageY - initT
          var index2 = changeIndex(l, t, index1, num)
          if(index1 == index2) {
              cellReturn(index1, num)
          } else {
              cellChange(index1, index2, num)
          }
          $(this).off('mousemove').off('mouseup')
      })
  }).on('mouseover', function() {
      $(this).css({
          opacity: '0.8'
      })
  }).on('mouseout', function() {
      $(this).css({
          opacity: '1'
      })
  })
}

function changeIndex(x, y, index, n) {
  if(x < 0 || x > listW || y < 0 || y > listH) {
      return index
  }
  var row = Math.floor(y / imgH);
  var col = Math.floor(x / imgW);
  var l = row * n + col;
  var i = 0;
  len = randArr.length;
  while((i < len) && (randArr[i] !== l)) {
      i++
  }
  return i;
}

function cellReturn(index, n) {
  var i = Math.floor(randArr[index] / n);
  var j = randArr[index] % n;
  animateFn(index, j, i, num)
}

function cellChange(from, to, n) {
  var fromI = Math.floor(randArr[from] / n);
  var fromJ = randArr[from] % n;
  var toI = Math.floor(randArr[to] / n);
  var toJ = randArr[to] % n;
  var temp = randArr[from];
  animateFn(from, toJ, toI, num)
  animateFn(to, fromJ, fromI, num, function() {
      randArr[from] = randArr[to]
      randArr[to] = temp
      check()
  })
}

function check() {
  if(origArr.toString() == randArr.toString()) {
      alert('厉害了老铁')
  }
}

function animateFn(index, j, i, n, callBack) {
  imgW = listW / n;
  imgH = listH / n;
  imgCell.eq(index).animate({
      left: j * imgW + 'px',
      top: i * imgH + 'px'
  }, function() {
      $(this).css({
          zIndex: '0',
          opacity: '1'
      })
      typeof callBack == 'function' ? callBack.call(this, arguments) : ''
  })
}

页面小游戏 - 牛牛拼图

背景介绍

预备知识

成果展示

代码如下：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

初见