页面小游戏 - 牛牛拼图

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

页面小游戏 - 牛牛拼图
学习制作拼图小游戏总结
微信拼图小游戏
基于lufylegend和cropper自定义图片的拼图华容道小
拼图小游戏
拼图小游戏的简单制作
Flutter 拼图小游戏
有你才完美
拼图复杂度
和我一起学编程

背景介绍

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

拼图历史
拼图玩具已经有约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) : ''
  })
}

页面小游戏 - 牛牛拼图
背景介绍基本介绍拼图游戏是广受欢迎的一种智力游戏，它的变化多端，难度不一，让人百玩不厌。个性化的拼图，拼凑的不仅...
学习制作拼图小游戏总结
学习制作拼图小游戏总结 �hyman的拼图小游戏传送类的简介 ImagePiece类没太多代码很简单，包含两个...
微信拼图小游戏
一款微信拼图小游戏
基于lufylegend和cropper自定义图片的拼图华容道小
前几天公司要做一个拼图的小游戏，我看到了《速度挑战 - 2小时完成HTML5拼图小游戏》，照着写完了一个小游戏以后...
拼图小游戏
写在开头：本人初入iOS，想借此系列的文章记录自己的学习过程，同时也和大家分享一些学习心得，作为一个刚学编程的新...
拼图小游戏的简单制作
闲暇时光，有人会用拼图、扫雷等等小游戏来打发时间，今天我就做了一下拼图小游戏，下面分享一下写js的过程和一点心得。...
Flutter 拼图小游戏
效果图主要实现功能选取系统相册图片切割图片打乱图片移动图片选取系统相册用的是flutter的imag...
有你才完美
应用场景：室内项目性质：破冰小游戏/分组技巧活动时间：15分钟使用道具：制作几套拼图，每套拼图由4块板组成（...
拼图复杂度
提出问题最近在做一个拼图的小游戏，在如何将拼图打乱的方式上，采用将完整拼图以白块为主体对象，白块可以移动到相邻的...
和我一起学编程
拼图小游戏-掌握操作小技巧第一个小程序 - 愤怒的小鸟走迷宫