使用 jQuery（逻辑无关框架，可复用）

1587959622720923.mp4 (993.26KB)

HTML 模板结构

  1. <div class="main play-page">
  2.   <div class="main-content">
  3.     // 用于游戏计时
  4.     <div class="count-time prompt"><i class="prompt-icon"></i><span class="prompt-text">用时 <span class="j-time-number">0</span> 秒</span></div>
  5.     // 拼图父元素
  6.     <div class="puzzle-box">
  7.       // 拼图原图，用于拼图九宫格渲染未完成前展示
  8.       <img class="puzzle-preview" src="" alt="预览图">
  9.       // 拼图容器
  10.       <ul class="puzzle-content" style="display: none;">
  11.         // 九宫格
  12.         <li class="debris"><img src=""></li>
  13.         <li class="debris"><img src=""></li>
  14.         <li class="debris"><img src=""></li>
  15.         <li class="debris"><img src=""></li>
  16.         <li class="debris"><img src=""></li>
  17.         <li class="debris"><img src=""></li>
  18.         <li class="debris"><img src=""></li>
  19.         <li class="debris"><img src=""></li>
  20.         <li class="debris"><img src=""></li>
  21.       </ul>
  22.     </div>
  23.     // 利用 canvas 生成九宫格
  24.     <canvas style="display: none;" id="puzzle-board" style="width:318px; height:318px;"></canvas>
  25.   </div>
  26.   <div class="prompt"><i class="prompt-icon"></i><span class="prompt-text">点击图片交换位置</span></div>
  27.   <div class="quit-game btn j-quit-game">放弃挑战</div>
  28. </div>

CSS 样式

  1. .prompt {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   margin-top: .28rem;
  6.   &-icon {
  7.     display: inline-block;
  8.     margin-right: .06rem;
  9.     width: .22rem;
  10.     height: .22rem;
  11.     background: url(https://img1.dxycdn.com/2020/0424/126/3409583174073156416-2.png) no-repeat center center;
  12.     background-size: contain;
  13.   }
  14.   &-text {
  15.     font-size:.24rem;
  16.     font-family:PingFangSC-Regular,PingFang SC;
  17.     font-weight:400;
  18.     color:rgba(255,224,189,1);
  19.   }
  20. }
  21. .play-page {
  22.   position: relative;
  23.   width: 100%;
  24.   height: 100%;
  25.   overflow: hidden;
  26.   background: url(https://img1.dxycdn.com/2020/0424/066/3409601700414728802-2.png) no-repeat center 0;
  27.   background-size: contain;
  28.   background-color: #9d2729;
  29.   .main-content {
  30.     margin: 2.28rem auto 0;
  31.     border-radius: .12rem;
  32.     width: 6.86rem;
  33.     height: 7.24rem;
  34.     background:rgba(255,232,232,1);
  35.     .count-time {
  36.       padding: .1rem 0;
  37.       .prompt-icon {
  38.         width: .24rem;
  39.         height: .24rem;
  40.         background-image: url(https://img1.dxycdn.com/2020/0424/785/3409601623105175531-2.png);
  41.       }
  42.       .prompt-text {
  43.         font-size: .28rem;
  44.         color:rgba(51,51,51,1);
  45.       }
  46.     }
  47.     .puzzle-box {
  48.       margin: 0 auto;
  49.       width: 318px;
  50.       height: 318px;
  51.       .puzzle-content {
  52.         position: relative;
  53.         display: flex;
  54.         flex-wrap: wrap;
  55.         width: 100%;
  56.         height: 100%;
  57.         .debris {
  58.           position: absolute;
  59.           border-radius: .08rem;
  60.           border: .02rem solid transparent;
  61.           width: 106px;
  62.           height: 106px;
  63.           transition: left 0.5s ease, top 0.5s ease;
  64.           &:nth-of-type(1) {
  65.             top: 0;
  66.             left: 0;
  67.           }
  68.           &:nth-of-type(2) {
  69.             top: 0;
  70.             left: 106px;
  71.           }
  72.           &:nth-of-type(3) {
  73.             top: 0;
  74.             left: 212px;
  75.           }
  76.           &:nth-of-type(4) {
  77.             top: 106px;
  78.             left: 0;
  79.           }
  80.           &:nth-of-type(5) {
  81.             top: 106px;
  82.             left: 106px;
  83.           }
  84.           &:nth-of-type(6) {
  85.             top: 106px;
  86.             left: 212px;
  87.           }
  88.           &:nth-of-type(7) {
  89.             top:212px;
  90.             left: 0;
  91.           }
  92.           &:nth-of-type(8) {
  93.             top: 212px;
  94.             left: 106px;
  95.           }
  96.           &:nth-of-type(9) {
  97.             top: 212px;
  98.             left: 212px;
  99.           }
  100.           &.active{
  101.             z-index: 99;
  102.             border-color: #9d2628;
  103.           }
  104.           img {
  105.             border-radius: 4px;
  106.             width: 100%;
  107.             height: 100%;
  108.           }
  109.         }
  110.       }
  111.     }
  112.   }
  113.   .quit-game {
  114.     margin: .53rem auto 0;
  115.     border-radius: 1rem;
  116.     border: .02rem solid rgba(199,164,105,1);
  117.     width: 3.4rem;
  118.     height: .8rem;
  119.     line-height: .8rem;
  120.     text-align: center;
  121.     font-size: .32rem;
  122.     font-family: PingFangSC-Medium,PingFang SC;
  123.     font-weight: 500;
  124.     color: rgba(207,171,113,1);
  125.     letter-spacing: .02rem;
  126.   }
  127. }

JavaScript 游戏逻辑

  1. import '@/css/play.less'
  2. import $ from 'jquery'
  4. const H5App = {
  5.   // 获取 cavans DOM 对象
  6.   puzzleBoardCanvas: null,
  7.   // 2d 绘画上下文
  8.   ctx: null,
  9.   // 拼图正确顺序
  10.   passArr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  11.   // 保存九宫格碎片打乱后的顺序
  12.   imgArr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  13.   // 经过碎片图位置交换后的最新顺序
  14.   resArr: [],
  15.   // 原图地址
  16.   originImgUrl: '',
  17.   // 九宫格拼图元素集合
  18.   debrisSet: null,
  19.   // 位置交换元素中转站
  20.   transferStation: [],
  21.   // 游戏完成结束回调
  22.   gamePassedCallback: () => {},
  23.   // 放弃挑战回调
  24.   quitGameCallback: () => {},
  25.   // 游戏中回调
  26.   inTheGame: () => {},
  27.   // 游戏时间
  28.   gameTime: 0,
  29.   // 游戏计时定时器
  30.   gameTimer: null,
  31.   /**
  32.    * 给九宫格碎片图绑定 touch 事件
  33.   */
  34.   bind () {
  35.     const self = this
  36.     self.debrisSet.on('click', function (evt) {
  37.       evt.preventDefault()
  39.       // 处理当前碎片的信息
  40.       const $this = $(this)
  41.       $this.addClass('active')
  43.       // 当前碎片信息对象 => 下标 && 位置信息
  44.       const currentDebrisMsg = {}
  46.       // index
  47.       const selfIndex = $this.index()
  48.       currentDebrisMsg.index = selfIndex
  50.       // position
  51.       currentDebrisMsg.position = {
  52.         x: $this.position().left,
  53.         y: $this.position().top
  54.       }
  56.       // 将信息对象推入中转站数组中
  57.       self.transferStation.push(currentDebrisMsg)
  59.       // 当中转站有两个碎片时，开始交换位置
  60.       if (self.transferStation.length === 2) {
  61.         /**
  62.          * 交换数据信息 position 信息互换
  63.          * origin
  64.          * [
  65.          * 0: {index: 0, position: {x: 0, y: 0}},
  66.          * 1: {index: 4, position: {x: 106, y: 106}}
  67.          * ]
  68.          * transfer
  69.          * [
  70.          * 0: {index: 0, position: {x: 106, y: 106}},
  71.          * 1: {index: 4, position: {x: 0, y: 0}}
  72.          * ]
  73.         */
  74.         // 调换位置 position 信息
  75.         let tempPosition = {}
  76.         tempPosition = self.transferStation[0].position
  77.         self.transferStation[0].position = self.transferStation[1].position
  78.         self.transferStation[1].position = tempPosition
  80.         // 排序 imgArr
  81.         let tempSeq = ''
  82.         tempSeq = self.imgArr[self.transferStation[0].index]
  83.         self.imgArr[self.transferStation[0].index] = self.imgArr[self.transferStation[1].index]
  84.         self.imgArr[self.transferStation[1].index] = tempSeq
  86.         // 绝对定位，css 交换位置
  87.         // 并且重置激活状态的碎片
  88.         self.transferStation.map((item) => {
  89.           $(self.debrisSet[item.index]).css({
  90.             top: item.position.y,
  91.             left: item.position.x
  92.           }).removeClass('active')
  93.         })
  95.         // 清空中转站，重新开始
  96.         self.transferStation.length = 0
  97.         console.log(self.imgArr)
  98.         // 判断是否通关
  99.         self.checkPass()
  100.       }
  101.     })
  103.     $('.j-quit-game').on('click', function (evt) {
  104.       evt.preventDefault()
  105.       clearInterval(self.gameTimer)
  106.       self.quitGameCallback()
  107.     })
  108.   },
  110.   /**
  111.    * 游戏开始
  112.   */
  113.   gameStart () {
  114.     this.gameTimer = setInterval(() => {
  115.       this.inTheGame(this.gameTime++)
  116.     }, 1000)
  117.   },
  119.   /**
  120.    * 判断拼图游戏是否通关
  121.   */
  122.   checkPass () {
  123.     if (this.imgArr.join('') === this.passArr.join('')) {
  124.       clearInterval(this.gameTimer)
  125.       this.gamePassedCallback(this.gameTime - 1)
  126.     }
  127.   },
  129.   /**
  130.    * 九宫格渲染完成
  131.   */
  132.   renderfinished () {
  133.     $('.puzzle-preview').css('display', 'none')
  134.     $('.puzzle-content').css('display', 'block')
  135.     // 游戏计时开始
  136.     this.gameStart()
  137.   },
  139.   /**
  140.    * 打乱九宫格碎片图
  141.   */
  142.   randomImage () {
  143.     this.imgArr.sort(function (a, b) {
  144.       return Math.random() - Math.random()
  145.     })
  146.   },
  148.   /**
  149.    * 切割原图形成碎片图
  150.    * @param {object} img - 图片元素 dom 对象
  151.   */
  152.   splitImage (img) {
  153.     this.randomImage()
  154.     let index = 1
  155.     for (let i = 0; i < 3; i++) {
  156.       for (let j = 0; j < 3; j++) {
  157.         this.ctx.drawImage(img, 318 * j, 318 * i, 318, 636, 0, 0, 318, 318)
  158.         this.debrisSet.eq(this.imgArr[index - 1] - 1)
  159.         .find('img')
  160.         .attr('src', this.puzzleBoardCanvas.toDataURL('image/jpeg'))
  161.         index++
  162.       }
  163.     }
  164.     // 九宫格绘制完成
  165.     this.renderfinished()
  166.   },
  168.   /**
  169.    * 绘制九宫格图片
  170.   */
  171.   render () {
  172.     const self = this
  173.     const img = new Image()
  174.     img.crossOrigin = 'anonymous'
  175.     img.onload = function () {
  176.       self.splitImage(img)
  177.     }
  178.     img.src = this.originImgUrl
  179.   },
  181.   /**
  182.    * 数据初始化
  183.    * @param {object} opts - 九宫格游戏初始化配置项
  184.    * --> @param {object} puzzleBoardCanvas - canvas 容器 dom 对象
  185.    * --> @param {string} originImgUrl - 九宫格原图地址
  186.    * --> @param {array} debrisSet - 九宫格格子碎片 dom 数组集合
  187.    */
  188.   init (opts) {
  189.     if (opts.puzzleBoardCanvas) {
  190.       this.puzzleBoardCanvas = opts.puzzleBoardCanvas
  191.     } else {
  192.       console.error('puzzleBoardCanvas 参数错误')
  193.     }
  195.     if (opts.originImgUrl !== '') {
  196.       this.originImgUrl = opts.originImgUrl
  197.       $('.puzzle-preview').attr('src', this.originImgUrl)
  198.     } else {
  199.       console.error('originImgUrl 参数错误')
  200.     }
  202.     if (opts.debrisSet && opts.debrisSet.length === 9) {
  203.       this.debrisSet = opts.debrisSet
  204.     } else {
  205.       console.error('debrisSet 参数错误')
  206.     }
  208.     if (opts.quitGameCallback && typeof opts.quitGameCallback === 'function') {
  209.       this.quitGameCallback = opts.quitGameCallback
  210.     } else {
  211.       console.error('quitGameCallback 参数错误')
  212.     }
  214.     if (opts.inTheGame && typeof opts.inTheGame === 'function') {
  215.       this.inTheGame = opts.inTheGame
  216.     } else {
  217.       console.error('inTheGame 参数错误')
  218.     }
  220.     if (opts.gamePassedCallback && typeof opts.gamePassedCallback === 'function') {
  221.       this.gamePassedCallback = opts.gamePassedCallback
  222.     } else {
  223.       console.error('gamePassedCallback 参数错误')
  224.     }
  225.   },
  227.   /**
  228.    * H5 游戏启动
  229.   */
  230.   startDraw (opts) {
  231.     // 九宫格配置初始化
  232.     this.init(opts)
  233.     // 判断浏览器是否支持 canvas
  234.     if (this.puzzleBoardCanvas.getContext) {
  235.       // 访问 2d 绘画上下文
  236.       this.ctx = this.puzzleBoardCanvas.getContext('2d')
  237.       this.render()
  238.     } else {
  239.       alert('您的浏览器不支持 Canvas，请换一个浏览器再尝试')
  240.     }
  241.     // 绑定事件
  242.     this.bind()
  243.   }
  244. }
  246. const debrisSet = $('.puzzle-box .puzzle-content .debris')
  247. const originImgUrl = 'https://img1.dxycdn.com/2020/0423/836/3409374155194655434-2.jpeg'
  248. const puzzleBoardCanvas = document.getElementById('puzzle-board')
  250. H5App.startDraw({
  251.   puzzleBoardCanvas,
  252.   originImgUrl,
  253.   debrisSet,
  254.   inTheGame: function (countTime) {
  255.     $('.j-time-number').text(countTime)
  256.   },
  257.   quitGameCallback: function () {
  258.     window.open('/index', '_self')
  259.   },
  260.   gamePassedCallback: function (countTime) {
  261.     setTimeout(() => {
  262.       window.open(`/survey?time=${countTime}`, '_self')
  263.     }, 1500)
  264.   }
  265. })