🌟 前言
欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白:个人主页
🔥 个人专栏:✅前端技术 ✅后端技术
🏠 个人博客:洛可可白博客
🐱 代码获取:bestwishes0203
📷 封面壁纸:洛可可白wallpaper
文章目录
- 拼图小游戏制作教程:用HTML5和JavaScript打造经典游戏
- 在线体验
- 准备工作
- 创建HTML结构
- 添加CSS样式
- 编写JavaScript逻辑
- 测试游戏
- 全部代码
- 结语
- 往期精彩回顾
拼图小游戏制作教程:用HTML5和JavaScript打造经典游戏
在这篇文章中,我们将一起学习如何从头开始制作一个简单的拼图小游戏。我们将使用HTML5和JavaScript来创建这个小游戏,不需要任何复杂的框架或库。通过这个教程,你将了解基本的网页布局、CSS样式设置以及JavaScript的交互逻辑。
在线体验
洛可可白⚡️拼图
准备工作
首先,确保你的计算机上安装了文本编辑器,如Notepad++、Sublime Text或Visual Studio Code。这些工具将帮助你编写和编辑代码。
创建HTML结构
打开你的文本编辑器,创建一个新的HTML文件,并输入以下代码:
<!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>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<div id="puzzle-container">
<div id="puzzle-board"></div>
</div>
<button id="shuffle-btn">打乱拼图</button>
<script>
// 在这里添加JavaScript代码
</script>
</body>
</html>
这是我们游戏的基本结构。<head>
部分包含了页面的元数据和样式定义,<body>
部分则是游戏的主要内容。
添加CSS样式
在<style>
标签内,我们将添加一些CSS样式来美化我们的拼图游戏。这包括拼图容器的边框、拼图块的大小和样式,以及按钮的样式。
#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;
}
编写JavaScript逻辑
现在,我们将在<script>
标签内添加JavaScript代码,这是游戏的核心部分。我们将创建拼图块,处理用户交互,并实现打乱拼图的功能。
document.addEventListener("DOMContentLoaded", () => {
// 获取DOM元素
const puzzleContainer = document.getElementById("puzzle-container");
const puzzleBoard = document.getElementById("puzzle-board");
const shuffleButton = document.getElementById("shuffle-btn");
const imageSrc = "http://example.com/image.jpg"; // 替换为你的图片地址
const rows = 3;
const cols = 3;
const pieces = [];
// 创建拼图块的函数
function createPuzzlePieces() {
// ...(省略代码以节省空间,详见原代码)
}
// 移动拼图块的函数
function movePiece(piece) {
// ...(省略代码以节省空间,详见原代码)
}
// 检查是否完成拼图的函数
function checkWin() {
// ...(省略代码以节省空间,详见原代码)
}
// 打乱拼图的函数
function shufflePuzzle() {
// ...(省略代码以节省空间,详见原代码)
}
// 初始化游戏
createPuzzlePieces();
shuffleButton.addEventListener("click", shufflePuzzle);
});
在这个脚本中,我们首先监听文档加载完成的事件,然后获取页面上的元素。我们定义了几个函数来创建拼图块、移动拼图块、检查游戏胜利条件以及打乱拼图。最后,我们初始化游戏并为打乱按钮添加事件监听器。
测试游戏
保存你的HTML文件,并在浏览器中打开它。你应该能看到一个拼图游戏的界面。点击“打乱拼图”按钮,拼图块会被随机打乱。你可以通过拖动拼图块来完成拼图。
全部代码
<!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>
<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 =
"http://cdn-hw-static2.shanhutech.cn/bizhi/staticwp/202312/d989b0fbf30d985ee89f15ef2fd640db--2492230555.jpg"; // 替换为你的图片地址
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; // 设置标志位为true
setTimeout(() => {
alert("恭喜!你完成了拼图!");
shuffleButton.disabled = false;
isWin = false; // 重置标志位为false
}, 200);
}
}
// 打乱拼图
function shufflePuzzle() {
isShuffling = true;
shuffleButton.disabled = true;
isWin = false; // 重置标志位为false
const 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>
结语
恭喜你,你已经成功创建了一个简单的拼图小游戏!这个教程涵盖了从创建基本的HTML结构到添加CSS样式,再到编写JavaScript交互逻辑的全过程。通过这个项目,你不仅学会了如何制作一个小游戏,还对前端开发有了基本的了解。随着你技能的提升,你可以尝试添加更多的功能,比如计时器、得分系统或者更复杂的拼图形状。祝你编程愉快!
如果对你有帮助,点赞、收藏、关注是我更新的动力!👋🌟🚀
往期精彩回顾
- 打造经典游戏:HTML5与CSS3实现俄罗斯方块
- 文章浏览阅读1.1k次,点赞31次,收藏22次。
- 打造你的贪吃蛇游戏:HTML、CSS与JavaScript的完美结合
- 文章浏览阅读858次,点赞24次,收藏9次。
- 打造你的HTML5打地鼠游戏:零基础入门教程
- 文章浏览阅读729次,点赞16次,收藏25次。
- 入门指南:使用uni-app构建跨平台应用
- 文章浏览阅读1.2k次,点赞29次,收藏9次。