前端技术搭建拼图小游戏(内含源码)

news/2024/10/30 13:31:29/

The sand accumulates to form a pagoda

  • ✨ 写在前面
  • ✨ 功能介绍
  • ✨ 页面搭建
  • ✨ 样式设置
  • ✨ 逻辑部分


✨ 写在前面

上周我们实通过前端基础实现了俄罗斯方块游戏,今天还是继续按照我们原定的节奏来带领大家完成一个拼图游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用, 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程,这份专栏中我们会带领大家用前端实现翻卡片、飞机大战、弹珠游戏、贪吃蛇、井字游戏、拼图、连连看、扫雷等等有趣的小游戏,纯前端语言实现,都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。订阅链接:https://blog.csdn.net/jhxl_/category_12261013.html


✨ 功能介绍

拼图游戏是一种经典的益智游戏,目标是将一张图片切割成多个小块,然后通过拖动小块的位置,重新排列它们以恢复原始图片。这个游戏测试你的观察能力、空间认知能力和逻辑思维能力。它不仅有助于放松大脑,还提供了娱乐和挑战。

功能介绍:

  • 图片切割:游戏开始时,一张图片会被切割成多个小块,并以随机顺序排列在游戏区域内。
  • 拖拽移动:通过鼠标点击小块并拖拽,可以移动小块的位置。
  • 打乱拼图:点击"打乱拼图"按钮,可以重新随机排列拼图块的位置,增加挑战和乐趣。
  • 恢复拼图:玩家的目标是将拼图块按照正确的顺序重新排列,恢复原始图片。

玩法说明:

  1. 游戏开始时,一张图片被切割成多个小块并随机排列在游戏区域内。
  2. 使用鼠标点击一个小块,然后拖拽它的位置,将其移动到空白位置或与其他小块交换位置。
  3. 继续移动其他小块,逐渐调整它们的位置,以恢复原始图片的完整性。
  4. 如果感到困惑或遇到难题,可以点击"打乱拼图"按钮重新排列小块,重新开始。
  5. 当所有小块都恰当地拼合在一起,恢复成原始图片时,游戏胜利。
  6. 在完成拼图后,会弹出恭喜信息的提示框,可以选择重新开始游戏或继续挑战。

在这里插入图片描述

这个拼图游戏结合了视觉和操作的挑战,你可以尝试不同的策略和方法来完成拼图,挑战自己的速度和技巧,享受拼图的乐趣和成就感。玩这个游戏,锻炼你的大脑,放松身心!


✨ 页面搭建

创建文件

首先呢我们创建我们的HTML文件,这里我就直接命名为 拼图.html 了,大家可以随意命名, 文件创建生成后我们通过编辑器打开,这里我用的是VScode, 然后初始化我们的代码结构,那在这里告诉大家一个快捷键,就是我们敲上我们英文的一个 ! 我们敲击回车直接就会给我们生成基础版本的前端代码结构。

在这里插入图片描述

文档声明和编码设置: 在HTML文档的头部,使用<!DOCTYPE>声明HTML文档类型,确保浏览器以正确的方式渲染网页内容。同时,设置UTF-8编码,以确保浏览器能够正确地解析和显示中文字符。下面我就开始搭建我们的DOM结构了!

DOM结构搭建

以下是拼图游戏的基本DOM结构。玩家将在游戏板上看到拼图块,并通过点击按钮来打乱拼图块的位置。你可以根据这个基本结构来进一步实现拼图游戏的逻辑和功能。

<body><h2>图片切换拼图</h2><div id="puzzle-container"><div id="puzzle-board"></div></div><button id="shuffle-btn">打乱拼图</button>
</body>
  • <h2>图片切换拼图</h2>:这是一个标题,用于显示游戏的名称或标题,让玩家知道这是一个拼图游戏。

  • <div id="puzzle-container">:这是一个容器,用于包含拼图游戏的主要内容。拼图块将显示在这个容器内。

  • <div id="puzzle-board"></div>:这是一个用于显示拼图块的游戏板。在游戏开始时,拼图块会被放置在这个游戏板上。

  • <button id="shuffle-btn">打乱拼图</button>:这是一个按钮,当点击它时,会触发打乱拼图的功能。点击这个按钮后,拼图块的位置将被重新随机排列,增加游戏的挑战性。

在这里插入图片描述


✨ 样式设置

我们看到了上面的的DOM已经搭建好了,但是页面什么都看不出来,下面我们简单的来配置一下样式吧,其实我们本专栏也是想带领大家掌握一些逻辑所以样式方面我们就一切从简;

<style>#puzzle-container {width: 300px;height: 300px;margin: 0 auto;border: 2px solid #ccc;position: relative;overflow: hidden;}#puzzle-board {width: 300px;height: 300px;position: absolute;}.puzzle-piece {width: 100px;height: 100px;position: absolute;background-size: 300px 300px;border: 2px solid #fff;transition: all 0.3s ease-in-out;}button {display: block;margin: 20px auto;}
</style>
  • #puzzle-container:这是拼图游戏容器的样式。它设置了容器的宽度和高度为300px,并使用margin: 0 auto使其水平居中对齐。还设置了边框样式和相对定位,并使用overflow: hidden属性隐藏超出容器大小的内容。

  • #puzzle-board:这是拼图游戏板的样式。它设置了游戏板的宽度和高度为300px,并使用position: absolute将其相对于父容器进行定位。

  • .puzzle-piece:这是拼图块的样式。它设置了拼图块的宽度和高度为100px,并使用position: absolute将其相对于父容器进行定位。background-size: 300px 300px用于调整拼图块背景图的大小以适应游戏板。还设置了边框样式和过渡效果,使拼图块在移动时具有平滑的过渡效果。

  • button:这是按钮的样式。display: block使按钮以块级元素显示,margin: 20px auto用于将按钮居中对齐。

以上是拼图游戏的基本CSS样式。通过这些样式,游戏容器、游戏板和拼图块将按照指定的样式进行布局和显示。你可以根据这个CSS代码继续完善拼图游戏的样式和外观。

在这里插入图片描述


✨ 逻辑部分

上面我们搭建了基本的样式,下面呢我们就通过js代码,实现我们游戏的功能吧,下面是对代码的简化解释:

好的,我将重点解释一些关键部分的代码。

  1. document.addEventListener('DOMContentLoaded', () => { ... }); 这段代码表示在文档加载完成后执行的函数,确保在操作DOM之前元素已经存在。

  2. const puzzleContainer = document.getElementById('puzzle-container'); 这行代码获取具有 id 为 “puzzle-container” 的元素,并将其存储在 puzzleContainer 变量中。这个容器元素是整个拼图游戏的外层容器。

  3. const puzzleBoard = document.getElementById('puzzle-board'); 这行代码获取具有 id 为 “puzzle-board” 的元素,并将其存储在 puzzleBoard 变量中。这个元素是用来放置拼图块的容器。

  4. const shuffleButton = document.getElementById('shuffle-btn'); 这行代码获取具有 id 为 “shuffle-btn” 的元素,并将其存储在 shuffleButton 变量中。这是一个按钮元素,用于触发打乱拼图的操作。

  5. const imageSrc = 'https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'; 这是一个存储图片地址的变量,用于设置拼图块的背景图片。当然这里是我在网上随机找的图片,你也可以换成你想要的图片。

  6. const rows = 3;const cols = 3; 这两行代码定义了拼图的行数和列数。

  7. const pieces = []; 这行代码创建了一个空数组,用于存储拼图块的DOM元素。

  8. let emptyPiece; 这是一个用于存储空拼图块的变量。

  9. let isShuffling = false; 这是一个标志位变量,用于判断是否正在打乱拼图。

  10. function createPuzzlePieces() { ... } 这是一个创建拼图块的函数。它根据行数和列数循环创建拼图块的DOM元素,并设置它们的样式、背景图片和位置。同时,为非空拼图块添加了点击事件监听器。

  11. function movePiece(piece) { ... } 这是一个移动拼图块的函数。它根据点击的拼图块和空拼图块的位置关系,交换它们的位置,并更新它们的样式和数据集。

  12. function checkWin() { ... } 这是一个检查是否完成拼图的函数。它遍历所有拼图块,根据其当前位置与正确位置进行比较,判断是否完成拼图。如果拼图完成,则显示恭喜的提示,并重新启用打乱按钮。

  13. function shufflePuzzle() { ... } 这是一个打乱拼图的函数。它使用随机算法将拼图块进行打乱,将空拼图和其他拼图块进行交换,并计数打乱次数。在每次交换拼图块后,检查是否完成拼图,如果拼图已经完成,则显示完成提示,并重新启用打乱按钮。

  14. createPuzzlePieces(); 这行代码调用 createPuzzlePieces() 函数,开始创建拼图块。

  15. shuffleButton.addEventListener('click', shufflePuzzle); 这行代码为打乱按钮添加了点击事件监听器,点击按钮将触发 shufflePuzzle() 函数,开始打乱拼图。

这些代码一起实现了一个基于DOM操作的拼图游戏。通过点击拼图块和打乱按钮,可以移动拼图块并打乱拼图,当拼图完成时会显示完成提示。

完整代码

<!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>#puzzle-container {width: 300px;height: 300px;margin: 0 auto;border: 2px solid #ccc;position: relative;overflow: hidden;}#puzzle-board {width: 300px;height: 300px;position: absolute;}.puzzle-piece {width: 100px;height: 100px;position: absolute;background-size: 300px 300px;border: 2px solid #fff;transition: all 0.3s ease-in-out;}button {display: block;margin: 20px auto;}</style>
</head><body><h2>图片切换拼图</h2><div id="puzzle-container"><div id="puzzle-board"></div></div><button id="shuffle-btn">打乱拼图</button></body>
<script>document.addEventListener('DOMContentLoaded', () => {const puzzleContainer = document.getElementById('puzzle-container');const puzzleBoard = document.getElementById('puzzle-board');const shuffleButton = document.getElementById('shuffle-btn');const imageSrc = 'https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'; // 替换为你的图片地址const rows = 3;const cols = 3;const pieces = [];let emptyPiece;let isShuffling = false;// 创建拼图块function createPuzzlePieces() {const pieceWidth = puzzleContainer.offsetWidth / cols;const pieceHeight = puzzleContainer.offsetHeight / rows;for (let row = 0; row < rows; row++) {for (let col = 0; col < cols; col++) {const piece = document.createElement('div');piece.className = 'puzzle-piece';piece.style.width = `${pieceWidth}px`;piece.style.height = `${pieceHeight}px`;piece.style.backgroundImage = `url(${imageSrc})`;piece.style.backgroundPosition = `${-col * pieceWidth}px ${-row * pieceHeight}px`;piece.style.top = `${row * pieceHeight}px`;piece.style.left = `${col * pieceWidth}px`;piece.dataset.row = row;piece.dataset.col = col;if (row === rows - 1 && col === cols - 1) {emptyPiece = piece;piece.classList.add('empty');} else {piece.addEventListener('click', () => {if (!isShuffling) {movePiece(piece);}});}puzzleBoard.appendChild(piece);pieces.push(piece);}}}// 移动拼图块function movePiece(piece) {const emptyPieceRow = parseInt(emptyPiece.dataset.row);const emptyPieceCol = parseInt(emptyPiece.dataset.col);const pieceRow = parseInt(piece.dataset.row);const pieceCol = parseInt(piece.dataset.col);if ((pieceRow === emptyPieceRow && Math.abs(pieceCol - emptyPieceCol) === 1) ||(pieceCol === emptyPieceCol && Math.abs(pieceRow - emptyPieceRow) === 1)) {const tempRow = emptyPieceRow;const tempCol = emptyPieceCol;emptyPiece.style.top = `${pieceRow * piece.offsetHeight}px`;emptyPiece.style.left = `${pieceCol * piece.offsetWidth}px`;emptyPiece.dataset.row = pieceRow;emptyPiece.dataset.col = pieceCol;piece.style.top = `${tempRow * piece.offsetHeight}px`;piece.style.left = `${tempCol * piece.offsetWidth}px`;piece.dataset.row = tempRow;piece.dataset.col = tempCol;}checkWin();}let isWin = false; // 添加标志位// 检查是否完成拼图function checkWin() {let isPuzzleComplete = true;for (let i = 0; i < pieces.length; i++) {const piece = pieces[i];const row = parseInt(piece.dataset.row);const col = parseInt(piece.dataset.col);if (row !== Math.floor(i / cols) || col !== i % cols) {isPuzzleComplete = false;break;}}if (isPuzzleComplete && !isWin && !isShuffling) { // 添加条件判断isWin = true; // 设置标志位为truesetTimeout(() => {alert('恭喜!你完成了拼图!');shuffleButton.disabled = false;isWin = false; // 重置标志位为false}, 200);}}// 打乱拼图function shufflePuzzle() {isShuffling = true;shuffleButton.disabled = true;isWin = false; // 重置标志位为falseconst shuffleCount = 100;let count = 0;const intervalId = setInterval(() => {const randomIndex = Math.floor(Math.random() * pieces.length);const randomPiece = pieces[randomIndex];movePiece(randomPiece);count++;if (count >= shuffleCount) {clearInterval(intervalId);isShuffling = false;shuffleButton.disabled = false;}}, 10);}createPuzzlePieces();shuffleButton.addEventListener('click', shufflePuzzle);});</script></html>

本期推荐 查看详情

参与方式:本博客中进行评论即可,只要评论内容不被折叠都可以参与抽奖;

抽奖方式:程序自动拉取未折叠的评论随机抽取5位伙伴,每人最多可评论三次;

抽奖时间:2023-06-09 17:00

本期获奖者各送实体书《Spring Cloud 微服务快速上手》一本(包邮到家)

在这里插入图片描述

原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!


http://www.ppmy.cn/news/274066.html

相关文章

__call__函数介绍

__call__ 方法的作用是使对象可以像函数一样被调用。通过在类中定义 __call__ 方法&#xff0c;你可以将对象实例视为可调用的函数&#xff0c;并在对象被调用时执行特定的操作。__call__ 方法是在你将一个对象作为函数调用时被调用的。在 Python 中&#xff0c;使用括号将一个…

说点理论-什么叫TED背景

TED背景的概念 指technology, entertainment, design在英语中的缩写,即技术、娱乐、设计的3个首字母缩定。 TED背景的投影最小为4米*4米,大的有IMAX宽影幕布来打投影。给人感觉为:非常技术、非常高大上、非常专业、非常Fashion。 因此,头部一些公司会专门对于非常重要类…

重装系统-个人装系统记录

好多时候大家在感叹自己正在使用的硬盘有时候由于东西多&#xff0c;杂乱&#xff0c;导致想重新换硬盘&#xff0c;但是有苦于怕出问题&#xff0c;这里我把我最近重装系统的流程说一下&#xff0c;由于有时候上传图片无法显示&#xff0c;所以先说一下流程。 1.首先准备好自…

基础教程系列之装系统篇

【科普】基础教程系列之装系统篇 鉴于每天有很多新人询问安装系统问题&#xff0c;我决定花一些时间来系统性的整理一下安装系统的步骤&#xff0c;带领新人一步步来安装好系统。 文档下载链接&#xff1a;http://download.csdn.net/detail/u014028392/9569517 目录 0.前言 …

[na]win7系统安装在t450s

电脑配置 电脑型号 联想 ThinkPad T450s 笔记本电脑(最近买了个ngff口的128g的固态ssd) 操作系统 Windows 7 旗舰版 64位 主显卡 集成显卡 IE浏览器 版本号 8.0基本硬件展示 处理器 英特尔 Core i7-5600U 2.60GHz 双核 主板 联想 20BXCTO1WW 内存 7888 …

KDZD绝缘油介质损耗电阻率测试仪参数

一、概述 测试仪依据GB/T5654-2007《液体绝缘材料相对电容率、介质损耗因数和直流电阻率的测量》设计制造。用于绝缘油等液体绝缘介质的介质损耗因数和直流电阻率的测量。 一体化结构。内部集成了介损油杯、温控仪、温度传感器、介损测试电桥、交流试验电源、标准电容器、高阻计…

文章 | 01-iOS学习之旅-PC电脑硬件配置与VMware虚拟机运行OS X 10.12

一、电脑的硬件配置——PC机 二、OS X 10.12 三、运行Hello Word程序 小结&#xff1a;PC机在配置固态硬盘和12G内存的情况下运行OS X 10.12系统并运行Xcode8.2和iPhone 6s模拟器的速度&#xff0c;对于单纯的学习Object-C语言和Swift语言勉强是可以接受的&#xff0c;不是特别…

黑苹果-IOS学习的开始

深知安装黑苹果的不易&#xff0c;在这里写一下关于我的Thinkpad E430c安装黑苹果教程&#xff08;Mac版本&#xff1a;Yosemite 10.10.4&#xff09;&#xff0c;希望能够帮助有需要的朋友。 首先贴上我的电脑配置报表&#xff1a; -----------------------------------------…