原生js写的一个拼图小游戏

最新推荐文章于 2023-10-29 09:22:58 发布

能跑就行，。

最新推荐文章于 2023-10-29 09:22:58 发布

阅读量312

点赞数 1

分类专栏：写杂文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/whtis666/article/details/125304214

版权

写杂专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原生js写的一个拼图小游戏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拼图游戏</title>
  <style>
    .game {   
      border: 2px solid black;
      margin: 0 auto;
      position: relative;
    }

    .kuai {     
      border: 1px solid black;
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="game"></div>
  <script>
    class Game {
      constructor() {
        // 先清除
        this.clear()
        // 然后开始游戏
        this.game()
      }
      // 清除元素
      clear() {
        document.querySelector('.game').innerHTML = ''
      }
      game() {
        let path = prompt('请输入图片的网络地址')
        // 每个块的宽高都是kuai的值
        let kuai = 300
        // 获取game元素
        let game = document.querySelector('.game')

        // 声明新老数组
        let lao = []
        let xin = []

        // 全局变量 用户交换两个块之间的坐标
        let context = null

        // 脚本中生成 img
        let img = new Image()
        img.src = path
        img.onload = function () {
          // 块的个数
          let hang = parseInt(this.height / kuai)
          let lie = parseInt(this.width / kuai)

          // game区域的宽度随着图片大小变化 将多余的边切割掉
          game.style.width = lie * kuai + 'px'
          game.style.height = hang * kuai + 'px'

          // 摆放
          for (let i = 0; i < hang; i++) {
            for (let j = 0; j < lie; j++) {
              // 创建块元素
              let kuaiEle = document.createElement('div')
              // 每个块的样式
              kuaiEle.className = 'kuai'
              kuaiEle.style.width = kuai + 'px'
              kuaiEle.style.height = kuai + 'px'
              // kuaiEle.style.left = j * kuai + 'px'
              // kuaiEle.style.top = i * kuai + 'px'

              // 最开始的时候每个块的坐标
              kuaiEle.x = j * kuai + 'px'
              kuaiEle.y = i * kuai + 'px'

              // 背景样式
              kuaiEle.style.backgroundImage = "url(" + this.src + ")"
              kuaiEle.style.backgroundPosition = "-" + j * kuai + "px -" + i * kuai + 'px'
              kuaiEle.style.backgroundSize = lie * kuai + 'px ' + hang * kuai + 'px'

              // 展示到 game中
              // game.append(kuaiEle)

              // 将生成的块元素放到 lao数组
              lao.push(kuaiEle)
              // 用 0 占位 xin数组
              xin.push(0)
            }
          }

          // 打乱lao数组 将打乱后的数组存储到 xin数组
          for (let i = 0; i < lao.length; i++) {
            // 随机数
            let ran = myRandom(0, xin.length)
            while (xin[ran] != 0) {
              ran = myRandom(0, xin.length)
            }
            xin[ran] = lao[i]
          }

          // 将打乱后的 xin数组展示到界面
          // 要根据 xin数组计算新的行 列  
          for (let i = 0; i < xin.length; i++) {
            let xin_hang = parseInt(i / lie)
            let xin_lie = i % lie
            // 利用新的行列坐标来摆放新块的位置
            xin[i].style.left = xin_lie * kuai + 'px'
            xin[i].style.top = xin_hang * kuai + 'px'

            // 设置拖拽属性 使所有新块都具有拖拽属性
            xin[i].setAttribute('draggable', 'true')

            // 绑定拖拽属性的三个事件 dragstart  dragover  drop
            // 交换他们拖拽的块的坐标
            xin[i].ondragstart = function () {
              context = this
            }
            xin[i].ondragover = function () {
              event.preventDefault()
            }
            xin[i].ondrop = function () {
              // 定义中间变量 交换坐标
              let swap = {
                x: 0,
                y: 0
              }
              swap.x = this.style.left
              swap.y = this.style.top

              this.style.left = context.style.left
              this.style.top = context.style.top

              context.style.left = swap.x
              context.style.top = swap.y

              // 判断游戏是否结束
              let isGameOver = true
              for (let j = 0; j < xin.length; j++) {
                // 将块拖动交换后的坐标赋值给 x y
                let x = xin[j].style.left
                let y = xin[j].style.top
                // console.log(x, y);
                // console.log(xin[j].x, xin[j].y);
                // if (j == xin.length - 1) {
                //   console.log('------');
                // }
                if (!(x == xin[j].x && y == xin[j].y)) {
                  isGameOver = false
                  break
                }
                // alert('游戏结束！！')
              }
              if (isGameOver) {
                console.log('游戏结束!!');
                new Game()
              }
            }
            game.append(xin[i])
          }

        }

        // 生成随机数函数
        function myRandom(min, max) {
          return parseInt(Math.random() * (max - min) + min)
        }
      }
    }
    new Game()
  </script>
</body>

</html>