js拼图（神鹰黑手哥）

直接上代码 再解释

这是最终效果图

css代码如下

  * {margin: 0;padding: 0;}body {height: 800px;width: 100%;background-color: blanchedalmond;display: flex;justify-content: space-around;align-items: center;position: relative;}.img-box {display: flex;flex-wrap: wrap;width: 480px;height: 480px;background: #f8eeee;box-sizing: border-box;flex-shrink: 0;}.img-box img {border: #fdfdfd 2px solid;width: 160px;height: 160px;box-sizing: border-box;}.img-box img:hover {border: #fdfdfd 4px solid;transform: scale(1.1);transition: border 0.5s;transition: transform 0.5s;border-radius: 3%;}button {width: 200px;height: 80px;font-size: 32px;}.musicButton {width: 50px;height: 50px;position: absolute;top: 5px;right: 5px;background-image: url(./musicimg/nomusic.png);background-repeat: no-repeat;background-size: contain;}h1 {position: absolute;top: 0;right: 100px;}

HTML代码

<h1>BGM右上角开启</h1><div class="musicButton"></div><div class="img-box"></div><div><button class="help">求助</button><button class="replay">重新玩</button></div>

写body里面

js代码如下

        let replay = document.querySelector('.replay')replay.addEventListener('click', main)main();const music1 = new Audio('./001.mp3');let num = 0;let bgmbtn = document.querySelector('.musicButton');bgmbtn.addEventListener('click', function () {num++;if (num % 2 == 0) {bgmbtn.style.backgroundImage = `url(./musicimg/nomusic.png)`;music1.pause();}else {bgmbtn.style.backgroundImage = `url(./musicimg/music.png)`;music1.play();music1.loop = true;}})function main() {function generateRandomNumbers() {let numbers = [1, 2, 3, 4, 5, 6, 7, 8];let result = [];while (numbers.length > 0) {let randomIndex = Math.floor(Math.random() * numbers.length);let randomNumber = numbers.splice(randomIndex, 1);result.push(randomNumber);}return result;}let randomNumbers = generateRandomNumbers();console.log(randomNumbers);let imgBox = document.querySelector('.img-box');imgBox.innerHTML = null;for (let i = 1; i <= 9; i++) {if (i < 9) {imgBox.innerHTML += `<img src="./img/${randomNumbers[i - 1]}.jpeg" alt="" id="${randomNumbers[i - 1]}" class=${randomNumbers[i - 1]}>`;} else {imgBox.innerHTML += `<img src="./img/null.jpeg" alt="" class="lastImg">`;}}let btn = document.querySelectorAll('.img-box img');for (let i = 0; i < 9; i++) {btn[i].id = i;btn[i].addEventListener('click', move);}function move() {console.log(this.id);if (btn[this.id].className !== "lastImg") {isHaving.call(this);isWin();}}function isHaving() {let index = this.id;let lastImgIndex = Array.from(btn).findIndex(img => img.className === "lastImg");let lastImg = btn[lastImgIndex];let bottom = (index < 6) && (btn[parseInt(index) + 3].className === "lastImg");let top = (index > 2) && (btn[parseInt(index) - 3].className === "lastImg");let right = (index % 3 < 2) && (btn[parseInt(index) + 1].className === "lastImg");let left = (index % 3 > 0) && (btn[parseInt(index) - 1].className === "lastImg");if (bottom || top || right || left) {// 交换 src 地址let currentImgSrc = this.src;this.src = lastImg.src;lastImg.src = currentImgSrc;//交换classlet currentClass = this.className;this.className = lastImg.className;lastImg.className = currentClass;}}function isWin() {//重新获取btn = document.querySelectorAll('.img-box img')let num = 0;for (let i = 0; i < 8; i++) {console.dir(btn[i].className)console.dir(num)if (btn[i].className == i + 1) {num++;console.log(btn[i].className);}}if (num == 8) {alert('您赢了 太牛逼了~~~飞起来')const music = new Audio('./Skeleton-X - 神鹰哥de小曲.mp3');music.play();setTimeout(() => {music.pause();}, 12000);}}let help = document.querySelector('.help')help.addEventListener('click', function () {num++;bgmbtn.style.backgroundImage = `url(./musicimg/nomusic.png)`;music1.pause();imgBox.innerHTML = null;for (let i = 1; i <= 9; i++) {if (i < 9) {imgBox.innerHTML += `<img src="./img/${i}.jpeg" alt="" id="${i}" class=${i}>`;} else {imgBox.innerHTML += `<img src="./img/null.jpeg" alt="" class="lastImg">`;}}isWin();})}

replay.addEventListener('click', main)创建音频对象主要是制造一个背景音乐，

let num = 0;let bgmbtn = document.querySelector('.musicButton');bgmbtn.addEventListener('click', function () {num++;if (num % 2 == 0) {bgmbtn.style.backgroundImage = `url(./musicimg/nomusic.png)`;music1.pause();}else {bgmbtn.style.backgroundImage = `url(./musicimg/music.png)`;music1.play();music1.loop = true;}})

这个是点一下按钮，就会播放bgm，再点一下就关闭。有点基础都能看懂

            function generateRandomNumbers() {let numbers = [1, 2, 3, 4, 5, 6, 7, 8];let result = [];while (numbers.length > 0) {let randomIndex = Math.floor(Math.random() * numbers.length);let randomNumber = numbers.splice(randomIndex, 1);result.push(randomNumber);}return result;}let randomNumbers = generateRandomNumbers();console.log(randomNumbers);let imgBox = document.querySelector('.img-box');imgBox.innerHTML = null;for (let i = 1; i <= 9; i++) {if (i < 9) {imgBox.innerHTML += `<img src="./img/${randomNumbers[i - 1]}.jpeg" alt="" id="${randomNumbers[i - 1]}" class=${randomNumbers[i - 1]}>`;} else {imgBox.innerHTML += `<img src="./img/null.jpeg" alt="" class="lastImg">`;}}

上面是首先 生成1-8的随机数字，一定要乱序，我的思路是把排好序的1-8随机放入新数组中进行打乱。放入新数组中的乱数，我可以拿它当成我们图片的编号，我们把1-8个图片分别命名成1-8，

在div里面插入图片这样就插入了乱序的8个图片，但是还剩最后一个，我们就给他一个空白图片，用画图操作即可。切记我们初始化图片要给最后一个图片一个不同的类名，来区分与前方图片的不同。

给每个图片添加点击事件，每当点击触发移动函数。我们移动的时候要判断它上下左右有没有类名为lastImg的img，那个是我们弄的空图片。

这是判断上下左右是否有那个白色图片

下面是判断输赢

早在初始化之时，每个图片都被赋予了类名，要让每个类名为它本应该在的位置，遍历一遍，符合顺序就胜利！！