H5原生js简单拼图游戏

最新推荐文章于 2024-08-02 13:35:44 发布

温泉里的鱼

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量1.1k

点赞数 2

分类专栏： h5游戏文章标签： html5 前端 javascript css

本文链接：https://blog.csdn.net/weixin_44067333/article/details/119885672

版权

h5游戏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

H5原生js简单拼图游戏

演示地址
效果展示
源码
源码下载

演示地址

链接: 演示地址

效果展示

在这里插入图片描述

源码

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

  <title>puzzle</title>
  <link rel="stylesheet" href="./css/puzzle.css">
</head>

<body>
  <div id="app">
    <!-- 头部数据 -->
    <div class="head">
      <span id="count">步数: 0</span>
      <span id="time">用时: 00:00</span>
      <button id="set" class="finger" onclick="setGame()">设置</button>
    </div>

    <div class="selectImg">
      <div class="selectImgMsg">
        <img src="./img/puzzle/img1.jpg" alt="">
        <img class="puzzleImg" src="./img/puzzle/img2.jpg" alt="">
        <img class="puzzleImg" src="./img/puzzle/img3.jpg" alt="">
        <img class="puzzleImg" src="./img/puzzle/img4.jpg" alt="">
        <img class="puzzleImg" src="./img/puzzle/img5.jpg" alt="">
        <img class="puzzleImg" src="./img/puzzle/img6.jpg" alt="">
        <img class="puzzleImg" src="./img/puzzle/img7.jpg" alt="">
      </div>

    </div>
    <!-- 拼图区域 -->
    <div class="newImg" id="newImg">
      <img id="startImg" src="./img/puzzle/img1.jpg" alt="">
    </div>

    <!-- 底部功能按钮 -->
    <div class="end">
      <button id="resetGame" onclick="resetGame()" disabled class="disable buttonH">重置</button>
      <button id="startGame" onclick="startGame()" class="finger buttonH">开始游戏</button>
      <button id="suspendGame" onclick="suspendGame(true)" disabled class="disable buttonH">暂停</button>
    </div>

    <!-- 暂停模态框 -->
    <div class=" suspend mask">
      <button onclick="suspendGame(false)" class="centerDiv finger">开始</button>
    </div>

    <!-- 游戏设置模态框 -->
    <div class="setGame mask">
      <div class="centerDiv setGameContent">
        <button id="closeSet" class="finger" onclick="closeModal()">关闭</button>
        <h3>设置</h3>
        <h4>游戏难度: </h4>
        <div class="levelGame">
          <label for="esay" class="finger">简单:</label>
          <input type="radio" id='esay' name="level" value="0" checked class="finger">
          <br />
          <label for="medium" class="finger">中等:</label>
          <input type="radio" id="medium" name="level" value="1" class="finger">
          <br />
          <label for="difficult" class="finger">困难:</label>
          <input type="radio" id="difficult" name="level" value="2" class="finger">
          <button id="saveSet" class="finger bottomEnd" onclick="saveSet()">保存</button>
        </div>

      </div>
    </div>

    <!-- 过关模态框 -->
    <div class="mask pass ">
      <div class="centerDiv passGame">
        <h2>恭喜过关!</h2>
        <img id="passImg" src="./img/puzzle/demo.jpg" alt="">
        <p id="passCount">总步数: 00:00</p>
        <p id="passTime">用时: 0</p>
        <button class="bottomEnd" onclick="closeModal()">关闭</button>
      </div>
    </div>
  </div>

  <script src="./js/puzzle.js"></script>
</body>

</html>

puzzle.css

* {
  /* 去除移动端点击高亮效果 */
  -webkit-tap-hight-color: transparent;
  margin: 0;
}


#app{
  margin: auto;
  background: url('../img/background/background.png') no-repeat;
  background-size:100% 100%;
  height: 100vh;
  width: 100vw;
}

.newImg {
  margin: auto;
  width: 70vw;
  height: 70vw;
  border: 2px solid #999;
  border-radius: 10px;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  margin-top: 50px;
  background-color: #F7F4F4;
}



button{
  background-color: #1F8BF5;
  border: 0;
  border-radius: 10px;
  color: #F7F4F4;
}


.head,.end {
  padding: 5px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  color: #F7F4F4;
}
.puzzleImg{
  margin-left: 5px;
}
.end {
  margin-top: 20px;
  justify-content: space-around
}
.end button{
  height: 30px;
}
#startImg {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.mask {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(5, 5, 5, .8);
  display:none;
}

.suspend button {
  background-color: #489FF5;
  box-shadow: 0px 3px 8px 3px rgba(255, 255, 255, 0.2);
  width: 100px;
  height: 30px;
  border: 0px;
  border-radius: 10px;
}

.finger{
  cursor: pointer;
}
.disable{
  cursor: not-allowed;
  color: #010;
  background-color: #CECED1;
}
.centerDiv{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #F7F4F4;
}

.setGameContent{
  box-shadow: 0px 3px 8px 3px rgba(5, 5, 5, 0.2);
  width: 50vw;
  height: 80vw;
  border-radius: 10px;
  padding: 5px;
}

#closeSet{
  position: absolute;
  right: 0;
  margin-right: 5px;
  
}
.setGameContent h3{
  margin: 10px 0;
  text-align: center;
}
.bottomEnd{
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80px;
}

.setGameContent h4{
  margin: 0;
  margin-bottom: 5px;
}
.levelGame{
  margin-left: 10px;
}

.passGame{
  width: 200px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  text-align: center;
  color: #FA0606;
}
.passGame img{
  width: 100%;
  border-radius: 10px;
}

.selectImg{
  margin: auto;
  margin-top: 30px;
  width: 80vw;
  height: 100px;
  border: 1px solid #F7F4F4;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 5px;
  overflow: hidden;
}
.selectImgMsg{
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
}
.selectImgMsg img{
  width: 100px;
  height: 100%;
  background-color: antiquewhite;
  flex-shrink: 0;
  border-radius: 10px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
	width: 5px;
	height: 8px;
	background-color: transparent;
  border-radius:20px;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius:20px;
	background-color: transparent;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
	border-radius: 20px;
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}
@media screen and (min-width:400px) {
  .selectImg{
    width: 350px;
  }
  #app{
  width: 400px;
  }
  .newImg {
    margin: auto;
    width: 300px;
    height: 300px;
    border: 2px solid #999;
    border-radius: 10px;
    padding: 2px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin-top: 50px;
    background-color: #F7F4F4;
  }

  .setGameContent{
    width: 200px;
    height: 300px;
  }
}

puzzle.js

let num = 3//难度 3 * 3 
let count = 0//记录步数
let time = 1 //记录时间
let puzzleImgsSrc = [] //所有拼图地址
let puzzleImgSrc = '' //拼图地址
let setIntervalTime = '' //定时器
let img = document.getElementById("startImg")
let newImg = document.getElementById('newImg') //拼图区域
let a = 0
//存储开始和结束循序，以此来判断是否过关
let gameStart = []//开始循序
let gameOld = []//结束循序


//选择所有拼图添加事件
let puzzleImgs = document.querySelector('.selectImgMsg').children //获取所有拼图

for (let i = 0; i < puzzleImgs.length; i++) {
  const dom = puzzleImgs[i];
  //获取拼图地址
  if (dom.classList.length > 0) {
    puzzleImgsSrc.push(dom.attributes[1].nodeValue)
  }
  else {
    puzzleImgsSrc.push(dom.attributes[0].nodeValue)
  }

  //为每一个拼图添加事件选择事件
  dom.onclick = function () {
    //替换拼图
    puzzleImgSrc = puzzleImgsSrc[i]
    document.getElementById('startImg').src = puzzleImgSrc //原图替换
    document.getElementById('passImg').src = puzzleImgSrc //过关图片替换

    // 判断是否已开始游戏 如果已经开始，游戏复位
    let dom = document.getElementById('startGame')
    if (dom.disabled) {
      //关闭定时器
      closeTimer()
      a = 0
      time = 1
      document.getElementById('count').innerHTML = "步数: " + 0
      document.getElementById('time').innerHTML = "用时: 00:00"

      //重新选择拼图，页面重绘
      newImg.innerHTML = ''
      let img = document.createElement('img')
      img.setAttribute("id", "startImg")
      img.setAttribute("src", puzzleImgSrc)
      newImg.appendChild(img)
      dom.className = "finger"
      dom.removeAttribute('disabled') 
      document.getElementById('resetGame').classList.add("disable")
      document.getElementById('suspendGame').classList.add("disable")
    }
  }
}
//随机产生的拼图地址
puzzleImgSrc = puzzleImgsSrc[Math.floor(Math.random()*7)];
document.getElementById('startImg').src = puzzleImgSrc //原图替换
    document.getElementById('passImg').src = puzzleImgSrc //过关图片替换

//初始化
function InitPuzzle() {
  let w = img.width / num //计算每一个切图大小 宽
  let h = img.height / num//计算每一个切图大小 高

  let imgNewW = newImg.clientWidth / num - 5 //保证所有切图可以在盒子中放下

  for (let i = 0; i < num; i++) {
    for (let j = 0; j < num; j++) {
      //绘制切图，并用div包裹
      let div = document.createElement('div')
      div.setAttribute('id', 'div' + a) //动态为div添加id
      newImg.appendChild(div)

      document.getElementById('div' + a).style.width = imgNewW + 'px' //设置 宽度
      document.getElementById('div' + a).style.height = imgNewW + 'px'//设置 高度
      document.getElementById('div' + a).style.margin = 1 + 'px' //设置 切图间隙
      //添加 canvas 元素用于绘制切图
      let canvas = document.createElement('canvas')
      canvas.setAttribute('id', 'canvas' + a) //动态为canvas添加id
      document.getElementById('div' + a).appendChild(canvas)

      //canvas 的大小必须用属性width，height，通过style添加的无效
      document.getElementById('canvas' + a).setAttribute('width', imgNewW)
      document.getElementById('canvas' + a).setAttribute('height', imgNewW)

      // //动态为canvas添加id
      // document.getElementsByTagName('canvas')[a].id = 'canvas' + a

      //创建点击事件用于移动
      document.getElementById('div' + a).onclick = function () {
        //判断是否可以移动，并移动
        Blank(this.offsetLeft, this.offsetTop, this)
      }

      if (!(j == num - 1 && i == num - 1)) {
        //绘制图片 最后一张留白
        document.getElementById('canvas' + a).getContext("2d").drawImage(img, w * j, h * i, w, h, 0, 0, imgNewW, imgNewW)
      }
      a++;//用于设置id
    }
  }
}

/**
 * 空白区域位置与滑动区域比较判断是否可以移动
 * 
 *  width:切图与左边框的距离
 *  height:切图与上边框的距离
 *  clickImg: 切图dom
 *  isStart: 是否为点击开始按钮时调用的，默认 false
 **/
function Blank(width, height, clickImg, isStart = false) {
  //留白切图dom
  let blank = document.getElementById('div' + (num * num - 1))

  //判断与留白切图 x轴或y轴是否有相同(相同才有可能移动)
  if (width == blank.offsetLeft || height == blank.offsetTop) {
    if (width == blank.offsetLeft) {//当x轴相同时 进一步判断是否是相邻切图（相邻才能移动）
      if ((blank.offsetTop - height) / clickImg.clientWidth < 2) {

        moveDiv(clickImg.id, blank.id)
        if (!isStart) {//不是点击开始按钮时调用
          count++ //步数加一
          document.getElementById('count').innerHTML = "步数: " + count
          successGame()//判断是否过关
        }
      }
    }
    else {//当y轴相同时 进一步判断是否是相邻切图（相邻才能移动）
      if ((blank.offsetLeft - width) / clickImg.clientWidth < 2) {
        moveDiv(clickImg.id, blank.id)//调用移动函数
        if (!isStart) {//不是点击开始按钮时调用
          count++ //步数加一
          document.getElementById('count').innerHTML = "步数: " + count
          successGame()//判断是否过关
        }
      }
    }
  }
  else {
    return false
  }
}

/**
 * 移动，与空白区域互换
 * 
 *  id_1:第一个div id
 *  id_2:第二个div id
 **/
function moveDiv(id_1, id_2) {
  var insert = function (nodeInsert, nodeTo) {
    if (nodeInsert.insertAdjacentElement) {
      nodeTo.insertAdjacentElement('beforeBegin', nodeInsert);
    }
    else {
      nodeTo.parentNode.insertBefore(nodeInsert, nodeTo);
    }
  }
  //通过第三个元素来实现交换
  var obj = document.createElement("a");
  var t1 = document.getElementById(id_1);
  var t2 = document.getElementById(id_2);
  insert(obj, t2);
  insert(t2, t1);
  insert(t1, obj);
  //移除第三个元素
  newImg.removeChild(newImg.getElementsByTagName('a')[0])
}

/**
 * 
 * 判断闯关是否成功
 * 
 * **/
function successGame() {
  let ids = newImg.getElementsByTagName("div")
  gameOld = []//将结束时的顺序清空重新赋值防止数据重复
  for (let index = 0; index < ids.length; index++) {
    gameOld.push(ids[index].id)
  }
  // 判断是否过关，并给出过关提示
  if (gameOld.toString() == gameStart.toString()) {
    closeTimer()//关闭定时器
    //设置过关提示
    document.getElementById("passCount").innerHTML = count
    document.getElementById("passTime").innerHTML = time
    document.querySelector(".pass").style.display = 'block'//显示模态框
    pass
  }
}

//开启定时器
function openTimer() {
  setIntervalTime = setInterval(() => {
    document.getElementById('time').innerHTML = "用时: " + timeGame()
  }, 1000)
}

//关闭定时器
function closeTimer() {
  if (setIntervalTime != '') {
    clearInterval(setIntervalTime)
  }
}


/**
* 开始游戏
**/
function startGame() {
  document.getElementById('time').innerHTML = "用时: 00:01"

  openTimer()//开启定时器

  document.getElementById('startImg').style.display = 'none' //原图隐藏
  document.getElementById("startGame").setAttribute('disabled', "disabled")//开始按钮禁用
  document.getElementById("startGame").className = 'disable'//开启禁用标志

  // 重置，暂停按钮开启
  document.getElementById("resetGame").removeAttribute('disabled')//移除禁用标志
  document.getElementById("resetGame").className = 'finger'//添加手指标志
  document.getElementById("suspendGame").removeAttribute('disabled')//移除禁用标志
  document.getElementById("suspendGame").className = 'finger'//添加手指标志


  InitPuzzle()//初始化

  gameOld = []
  let ids = newImg.getElementsByTagName("div")
  if (gameStart.length == 0) {
    for (let index = 0; index < ids.length; index++) {
      gameStart.push(ids[index].id)
    }
  }
  let blank = document.getElementById('div' + (num * num - 1))

  // 生成随机数，打乱顺序
  for (let i = 0; i < Math.random() * 100; i++) {
    for (let j = 0; j < num * num - 1; j++) {
      let div = document.getElementById('div' + j)
      // 在可移动范围打乱顺序防止无法复原问题
      Blank(div.offsetLeft, div.offsetTop, div, true)

    }


  }
  for (let index = 0; index < ids.length; index++) {
    gameOld.push(ids[index].id)

  }
  if (gameOld.toString() == gameStart.toString()) {
    startGame()//防止切图没有打乱
  }
}

//游戏重置
function resetGame() {
  //关闭定时器
  closeTimer()
  a = 0
  time = 1
  document.getElementById('count').innerHTML = "步数: " + 0
  document.getElementById('time').innerHTML = "用时: 00:00"

  newImg.innerHTML = ''
  let img = document.createElement('img')
  img.setAttribute("id", "startImg")
  img.setAttribute("src", puzzleImgSrc)
  newImg.appendChild(img)
  startGame()
}

//计时
function timeGame() {
  //对时间格式进行设置
  time++
  if (time < 10) {
    return '00:0' + time
  }
  else if (60 > time >= 10) {
    return '00:' + time
  }
  else {
    let fen = Math.floor(time / 60)
    let miao = time % 60
    if (fen < 10 && miao < 10) {
      return '0' + fen + ':0' + miao
    }
    else if (fen >= 10 && miao < 10) {
      return fen + ':0' + miao
    }
    else if (fen >= 10 && miao >= 10) {
      return fen + ':' + miao
    }
    else if (fen < 10 && miao >= 10) {
      return '0' + fen + ':' + miao
    }
  }
}

//暂停
function suspendGame(state) {
  //暂停
  if (state) {
    //清除定时器
    closeTimer()
    //开启模态框
    document.querySelector('.suspend').style.display = 'block'
  }
  else {
    //开始
    //关闭模态框
    document.querySelector('.suspend').style.display = 'none'
    // 开启定时器
    openTimer()
  }
}


//游戏设置
function setGame() {
  document.querySelector('.setGame').style.display = 'block'
}


//关闭模态框
function closeModal() {
  document.querySelector('.setGame').style.display = 'none'
  document.querySelector('.pass').style.display = 'none'
}

//保存游戏设置
function saveSet() {
  document.querySelector('.setGame').style.display = 'none'

  let level = 0
  //获取级别设置结果
  let radios = document.getElementsByName('level')
  for (let i = 0; i < radios.length; i++) {
    //判断选中的级别
    if (radios[i].checked) {
      level = parseInt(radios[i].value)
    }

  }
  //设置级别
  switch (level) {
    case 0:
      num = 3
      break;
    case 1:
      num = 4
      break;
    case 2:
      num = 5
      break;
    default:
      break;
  }
  //游戏已经开始时
  if (document.getElementById('startGame').disabled) {
    resetGame()
  }
}

源码下载

github: 源码
gitee: 源码

温泉里的鱼

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
H5原生js简单拼图游戏

H5原生js简单拼图游戏演示地址效果展示源码index.htmlpuzzle.csspuzzle.js源码下载演示地址链接: 演示地址效果展示源码index.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
复制链接

扫一扫

专栏目录