HTML, CSS 和 JavaScript 实现简单的拼图游戏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>拼图游戏</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="puzzle-container">
		<div class="puzzle-row">
			<div class="puzzle-piece" data-position="1"></div>
			<div class="puzzle-piece" data-position="2"></div>
			<div class="puzzle-piece" data-position="3"></div>
		</div>
		<div class="puzzle-row">
			<div class="puzzle-piece" data-position="4"></div>
			<div class="puzzle-piece" data-position="5"></div>
			<div class="puzzle-piece" data-position="6"></div>
		</div>
		<div class="puzzle-row">
			<div class="puzzle-piece" data-position="7"></div>
			<div class="puzzle-piece" data-position="8"></div>
			<div class="puzzle-piece" data-position="9"></div>
		</div>
	</div>
	<script src="script.js"></script>
</body>
</html>
<pre><code>
</code></pre>
<p>.puzzle-container {
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap;
}</p>
<p>.puzzle-piece {
width: 100px;
height: 100px;
background-image: url('puzzle.jpg');
background-size: 300px 300px;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
color: #fff;
cursor: pointer;
}</p>
<p>.puzzle-row {
display: flex;
flex-wrap: wrap;
}</p>
<pre><code>
</code></pre>
<p>const pieces = document.querySelectorAll('.puzzle-piece');</p>
<p>// 打乱拼图
function shuffle() {
let positions = Array.from({length: 9}, (_, i) =&gt; i + 1);
positions = shuffleArray(positions);
pieces.forEach((piece, index) =&gt; {
piece.dataset.position = positions[index];
updatePiece(piece);
});
}</p>
<p>// 更新拼图
function updatePiece(piece) {
const position = piece.dataset.position;
piece.style.backgroundPosition = getBackgroundPosition(position);
}</p>
<p>// 获取背景图片位置
function getBackgroundPosition(position) {
switch (position) {
case '1':
return '0 0';
case '2':
return '-100px 0';
case '3':
return '-200px 0';
case '4':
return '0 -100px';
case '5':
return '-100px -100px';
case '6':
return '-200px -100px';
case '7':
return '0 -200px';
case '8':
return '-100px -200px';
case '9':
return '-200px -200px';
}
}</p>
<p>// 数组随机排序
function shuffleArray(array) {
for (let i = array.length - 1; i &gt; 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}</p>
<p>// 初始化拼图
shuffle();</p>
<p>// 点击拼图
pieces.forEach(piece =&gt; {
piece.addEventListener('click', () =&gt; {
const position = piece.dataset.position;
let emptyPiece = document.querySelector('.puzzle-piece[data-position=&quot;9&quot;]');
if (isAdjacent(piece, emptyPiece)) {
piece.dataset.position = '9';
emptyPiece.dataset.position = position;
updatePiece(piece);
updatePiece(emptyPiece);
}
});
});</p>
<p>// 判断是否相邻
function isAdjacent(piece1, piece2) {
const position1 = parseInt(piece1.dataset.position);
const position2 = parseInt(piece2.dataset.position);
const row1 = Math.floor((position1 - 1) / 3);
const col1 = (position1 - 1) % 3;
const row2 = Math.floor((position2 - 1) / 3);
const col2 = (position2 - 1) % 3;
if (row1 === row2 &amp;&amp; Math.abs(col1 - col2) === 1) {
return true;
}
if (col1 === col2 &amp;&amp; Math.abs(row1 - row2) === 1) {
return true;
}
return false;
}</p>
<pre><code>
其中，`puzzle.jpg`为拼图图片，需要放在同级目录下。在 CSS 样式中，将拼图图片设为背景图片，并根据其大小设置背景图片位置。在 JS 代码中，通过 `data-position` 属性来记录每个拼图块当前所在位置，以及根据其位置更新其背景图片位置。同时，实现了拼图块的随机打乱、点击移动，以及判断当前拼图块是否与空白拼图块相邻的功能。
</code></pre>