当前位置: 首页 > news >正文

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,那个是我们弄的空图片。

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

下面是判断输赢

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

相关文章:

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: w…...

值得推荐的五款数据恢复工具!!

当谈及我们日常工作生活中无法避免的数据丢失情况时&#xff0c;很多小伙伴一定急得如热锅上的蚂蚁&#xff0c;无助与忐忑。特别是现在社会&#xff0c;信息量庞大&#xff0c;一旦电脑上的重要数据不慎丢失&#xff0c;无论是工作文件、生活照片还是珍贵的视频&#xff0c;都…...

股票金融市场中的tick,分钟,日线数据

在金融市场中&#xff0c;股票数据的分析对于投资者来说至关重要。股票数据可以根据时间粒度的不同&#xff0c;分为几种不同的类型&#xff0c;包括Tick数据、分钟数据和日线数据。下面将详细介绍这些数据类型&#xff0c;并对比它们之间的差别。 Tick数据 Tick数据&#xf…...

OKG Research:如何衡量链上数据的开放价值?

在新加坡Token2049期间&#xff0c;欧科云链研究院受邀参加Bloomberg主办的企业另类资产投资峰会2024&#xff0c;与多位专家围绕未来数据形态与前景进行了深入交流。 活动后&#xff0c;欧科云链研究院负责人Lola Wang与资深研究员Jason Jiang在大公网发表署名文章《如何衡量…...

向日葵下载教程以及三款远程控制工具推荐!!!

向日葵远程控制下载教程&#xff01;&#xff01; 亲爱的朋友们&#xff0c;如果你对远程控制软件有所需求&#xff0c;那么向日葵绝对是一个不错的选择。现在我将带你走一遍向日葵的下载流程。 1. 打开你的浏览器&#xff0c;输入“向日葵官方网站”&#xff0c;进入官方网站…...

Studio One 6中文版及最新功能介绍 Studio One 6音乐软件安装包

Studio One 6是一款功能强大的数字音频工作站&#xff08;DAW&#xff09;&#xff0c;专为音乐制作和录音而设计。它提供了从初学者到专业人士的所有需求&#xff0c;无论是创作、录音、混音还是母带处理。 Studio One 6拥有直观的界面和强大的虚拟乐器、插件和音频处理工具&a…...

【数据结构】栈和队列 + 经典算法题

目录 前言 一、栈 二、栈的实现 三、栈的循环遍历演示 四、栈的算法题 // 一、队列 二、队列的实现 三、使用演示 四、队列的算法题 总结 前言 本文完整实现了栈和队列的数据结构&#xff0c;以及栈和队列的一些经典算法题&#xff0c;让我们更加清楚了解这两种数据…...

C# 基于winform 使用NI-VISA USB口远程控制电源 万用表

1.下载完整版本NI-VISA NI-VISA Download - NI *注意支持的操作系统&#xff0c;以便后期编译 安装完成之后&#xff0c;打开NI MAX&#xff0c;插上usb口&#xff0c;打开测试面板进行通信 2.编程示例 见本地文件夹C:\Users\Public\Documents\National Instruments\NI-VIS…...

Python设计方差分析实验

前言 方差分析(ANOVA)是一种用于检测多个样本均值之间差异的统计方法,广泛应用于实验设计与数据分析中。通过分析不同因素对实验结果的影响,方差分析能够帮助评估哪些因素显著影响了实验结果,并且可以提供各因素交互作用的深入理解。在多因子实验设计中,随机化、重复和平…...

【Oracle DB故障分享】分享一次由于SGA设置太小导致的DP备份失败

List item 今天给客户做Oracle例行数据库健康巡检&#xff0c;过程中检出一些备份异常&#xff0c;分享如下。 排查问题&#xff1a; 打开DP备份软件&#xff0c;随即弹出如下提示&#xff1a; 登录DP&#xff0c;查看备份情况&#xff1a;发现从10/6开始&#xff0c;DP备份…...

Yocto构建教程:在SDK中添加Qt5并生成带有Qt5的SDK

下载meta-qt5 复位环境 确认下版本是否匹配 添加meta-qt5进bblayers.bb 先编译起来 研究meta-qt5 构建带有Qt5的toolchain SDK meta-toolchain如何编译带Qt5的软件包&#xff1f; 文件系统中如何添加Qt5软件包 如何同时编译目标镜像和SDK Yocto Project是一个开源的嵌…...

操作系统——位示图

这里写目录标题 前言基础说明相关计算题目一题目二题目三 前言 基础说明 位示图是一种用来表示文件和目录在磁盘上存储位置的图形化表示方法。它通过使用一系列的位来表示文件或目录所占用的磁盘块&#xff0c;从而显示出磁盘上的存储情况。 位示图通常是一个位向量&#xf…...

【STM32 Blue Pill编程实例】-矩阵键盘

矩阵键盘 文章目录 矩阵键盘1、矩阵键盘介绍2、硬件准备与接线3、模块配置3.1 矩阵键盘列引脚配置3.2 矩阵键盘列引脚配置3.3 LED配置4、代码实现在本文中,我们将介绍如何把 43 键盘与 STM32 Blue Pill 连接,并使用 HAL 库在 STM32CubeIDE 中对其进行编程。 键盘是一种输入设…...

基于SSM的药品商城系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

南京邮电大学电工电子A实验十一(数据选择器及逻辑电路的动态测试)

文章目录 一、实验报告预览二、Word版本报告下载 一、实验报告预览 二、Word版本报告下载 点我...

算法.图论-BFS及其拓展

文章目录 广度优先搜索简介经典bfs习题地图分析贴纸拼词 01bfs解析基本过程相关习题 广度优先搜索简介 bfs的特点是逐层扩散, 从源头到目标点扩散了几层, 最短路就是多少 bfs的使用特征是任意两个节点的距离(权值)是相同的(无向图, 矩阵天然满足这一特点) bfs开始的时候可以是…...

mongodb的相关关键字说明

以下是MongoDB中一些数据库相关的关键字说明&#xff1a; 1. 数据库&#xff08;Database&#xff09; 概念 数据库是MongoDB中数据存储的最高层级容器&#xff0c;类似于关系型数据库中的数据库概念。一个MongoDB服务器实例可以包含多个数据库&#xff0c;每个数据库可以有自…...

强化学习之DDPG算法

前言&#xff1a; 在正文开始之前&#xff0c;首先给大家介绍一个不错的人工智能学习教程&#xff1a;https://www.captainbed.cn/bbs。其中包含了机器学习、深度学习、强化学习等系列教程&#xff0c;感兴趣的读者可以自行查阅。 一、算法介绍 深度确定性策略梯度 &#xff0…...

【进阶OpenCV】 (16)-- 人脸识别 -- FisherFaces算法

文章目录 FisherFaces算法一、算法原理二、算法优势与局限三、算法实现1. 图像预处理2. 创建FisherFace人脸特征识别器3. 训练模型4. 测试图像 总结 FisherFaces算法 PCA方法是EigenFaces人脸识别的核心&#xff0c;但是其具有明显的缺点&#xff0c;在操作过程中会损失许多人…...

电脑主机配置

显卡&#xff1a; 查看显卡&#xff1a;设备管理器--显示适配器 RTX4060 RTX和GTX区别&#xff1a; GTX是NVIDIA公司旧款显卡&#xff0c;RTX比GTX好但是贵 处理器CPU&#xff1a; Intel(R) Core(TM) i5-10400F CPU 2.90GHz 2.90 GHz 10400F&#xff1a;10指的是第几代…...

Python金融计算效率翻倍的7个隐藏技巧:pandas加速300%、numba编译优化、向量化避坑指南

第一章&#xff1a;Python金融计算效率翻倍的底层逻辑与性能瓶颈诊断Python在金融量化分析中广泛应用&#xff0c;但其默认解释执行机制常导致大规模时间序列回测、蒙特卡洛模拟或协方差矩阵运算时出现显著延迟。效率瓶颈并非源于算法本身&#xff0c;而集中于CPython解释器的G…...

KV STUDIO Ver.12 梯形图编程实战:从入门到精通的5个关键步骤

1. 环境配置&#xff1a;从零搭建KV STUDIO开发环境 第一次打开KV STUDIO Ver.12时&#xff0c;很多新手会被复杂的界面吓到。其实只要按照正确步骤配置&#xff0c;半小时就能搭建好开发环境。我去年给产线做自动化改造时&#xff0c;需要在三台不同型号的KV PLC上部署程序&a…...

从PID控制器到语义分割:手把手教你复现PIDNet(附PyTorch代码与Cityscapes实战)

从PID控制器到语义分割&#xff1a;手把手教你复现PIDNet&#xff08;附PyTorch代码与Cityscapes实战&#xff09; 在计算机视觉领域&#xff0c;实时语义分割一直是个极具挑战性的任务。想象一下自动驾驶汽车需要在毫秒级时间内准确识别道路上的每个像素属于车辆、行人还是交通…...

OWL ADVENTURE与Git协作:AI视觉项目的版本管理与团队开发实践

OWL ADVENTURE与Git协作&#xff1a;AI视觉项目的版本管理与团队开发实践 做AI视觉项目&#xff0c;尤其是用OWL ADVENTURE这类框架时&#xff0c;最头疼的往往不是模型调参&#xff0c;而是项目本身的管理。你有没有遇到过这种情况&#xff1a;同事改了一个配置文件&#xff…...

终极指南:如何安全自定义英雄联盟客户端视觉体验

终极指南&#xff1a;如何安全自定义英雄联盟客户端视觉体验 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank LeaguePrank是一款基于LCU API开发的英雄联盟视觉定制工具&#xff0c;专门帮助玩家在不修改游戏文件、不触碰内存的…...

Qwen3-0.6B-FP8极速对话工具:STM32F103C8T6最小系统板集成

Qwen3-0.6B-FP8极速对话工具&#xff1a;STM32F103C8T6最小系统板集成 让AI对话能力跑在指甲盖大小的开发板上 1. 场景与痛点 你可能很难想象&#xff0c;一个能进行智能对话的AI模型&#xff0c;居然可以运行在一块只有拇指大小的STM32开发板上。传统的AI模型部署往往需要强大…...

别再只升级OpenSSH了!一次搞懂Linux离线环境下的依赖包管理与编译安装避坑指南

离线环境下的Linux软件编译&#xff1a;从OpenSSH升级到通用依赖管理方法论 当你面对一台无法连接互联网的Linux服务器时&#xff0c;软件升级和安装往往会变成一场噩梦。想象一下&#xff1a;你下载了最新版OpenSSH的源码包&#xff0c;满怀希望地执行./configure&#xff0c;…...

WordPress建站避坑指南:Ubuntu服务器常见权限问题与安全配置

WordPress建站避坑指南&#xff1a;Ubuntu服务器常见权限问题与安全配置 引言&#xff1a;为什么你的WordPress网站总出问题&#xff1f; 每次看到新手开发者兴奋地宣布"我的WordPress网站上线了"&#xff0c;我都忍不住想问&#xff1a;你真的检查过文件权限了吗&am…...

FedProto:跨异构客户端的原型联邦学习实践指南

1. 从零理解FedProto的核心思想 第一次听说FedProto时&#xff0c;我正被一个医疗影像分析项目搞得焦头烂额。五家医院的数据就像五个方言区——同样的病症在CT影像上呈现的特征分布天差地别。传统联邦学习就像让这些医院用各自的方言写报告&#xff0c;再强行翻译成标准语&…...

【Polars 2.0数据清洗成本控制白皮书】:20年ETL专家亲授5大降本增效实战模式,92%企业忽略的内存泄漏陷阱

第一章&#xff1a;Polars 2.0数据清洗成本控制全景认知在现代数据工程实践中&#xff0c;数据清洗不再仅关乎逻辑正确性&#xff0c;更深度绑定计算资源消耗、内存占用与执行延迟。Polars 2.0 通过零拷贝语义、惰性执行引擎重构与 Arrow-native 内存布局优化&#xff0c;将清洗…...