• 日期: 2026-09-15
  • 标签: 常规

以下是一个简单的 HTML 拼图游戏代码，包含基本的 HTML、CSS 和 JavaScript 代码：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>拼图游戏</title>
	<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
	<div id='game'>
		<div id='puzzle'></div>
		<div id='pieces'></div>
	</div>
	<script src='script.js'></script>
</body>
</html>

CSS 代码：

#game {
	width: 500px;
	height: 500px;
	margin: 0 auto;
	position: relative;
}

#puzzle {
	width: 500px;
	height: 500px;
	background-image: url('puzzle.jpg');
	background-size: 500px 500px;
	position: absolute;
	top: 0;
	left: 0;
}

.piece {
	width: 100px;
	height: 100px;
	background-size: 500px 500px;
	position: absolute;
}

#piece1 {
	background-position: 0 0;
	top: 0;
	left: 0;
}

#piece2 {
	background-position: -100px 0;
	top: 0;
	left: 100px;
}

#piece3 {
	background-position: -200px 0;
	top: 0;
	left: 200px;
}

#piece4 {
	background-position: -300px 0;
	top: 0;
	left: 300px;
}

#piece5 {
	background-position: -400px 0;
	top: 0;
	left: 400px;
}

#piece6 {
	background-position: 0 -100px;
	top: 100px;
	left: 0;
}

#piece7 {
	background-position: -100px -100px;
	top: 100px;
	left: 100px;
}

#piece8 {
	background-position: -200px -100px;
	top: 100px;
	left: 200px;
}

#piece9 {
	background-position: -300px -100px;
	top: 100px;
	left: 300px;
}

#piece10 {
	background-position: -400px -100px;
	top: 100px;
	left: 400px;
}

#piece11 {
	background-position: 0 -200px;
	top: 200px;
	left: 0;
}

#piece12 {
	background-position: -100px -200px;
	top: 200px;
	left: 100px;
}

#piece13 {
	background-position: -200px -200px;
	top: 200px;
	left: 200px;
}

#piece14 {
	background-position: -300px -200px;
	top: 200px;
	left: 300px;
}

#piece15 {
	background-position: -400px -200px;
	top: 200px;
	left: 400px;
}

#piece16 {
	background-position: 0 -300px;
	top: 300px;
	left: 0;
}

#piece17 {
	background-position: -100px -300px;
	top: 300px;
	left: 100px;
}

#piece18 {
	background-position: -200px -300px;
	top: 300px;
	left: 200px;
}

#piece19 {
	background-position: -300px -300px;
	top: 300px;
	left: 300px;
}

#piece20 {
	background-position: -400px -300px;
	top: 300px;
	left: 400px;
}

JavaScript 代码：

var pieces = document.querySelectorAll('.piece');
var puzzle = document.querySelector('#puzzle');

pieces.forEach(function(piece) {
	piece.addEventListener('click', function() {
		var pieceTop = parseInt(piece.style.top);
		var pieceLeft = parseInt(piece.style.left);

		if (pieceTop == 0 && pieceLeft == 100) {
			piece.style.top = '100px';
			piece.style.left = '0';
			swapBackground(piece, getPiece(0, 0));
		} else if (pieceTop == 0 && pieceLeft == 200) {
			piece.style.top = '100px';
			piece.style.left = '100px';
			swapBackground(piece, getPiece(0, 1));
		} else if (pieceTop == 0 && pieceLeft == 300) {
			piece.style.top = '100px';
			piece.style.left = '200px';
			swapBackground(piece, getPiece(0, 2));
		} else if (pieceTop == 0 && pieceLeft == 400) {
			piece.style.top = '100px';
			piece.style.left = '300px';
			swapBackground(piece, getPiece(0, 3));
		} else if (pieceTop == 100 && pieceLeft == 0) {
			piece.style.top = '0';
			piece.style.left = '100px';
			swapBackground(piece, getPiece(1, 0));
		} else if (pieceTop == 100 && pieceLeft == 100) {
			piece.style.top = '0';
			piece.style.left = '200px';
			swapBackground(piece, getPiece(1, 1));
		} else if (pieceTop == 100 && pieceLeft == 200) {
			piece.style.top = '0';
			piece.style.left = '300px';
			swapBackground(piece, getPiece(1, 2));
		} else if (pieceTop == 100 && pieceLeft == 300) {
			piece.style.top = '0';
			piece.style.left = '400px';
			swapBackground(piece, getPiece(1, 3));
		} else if (pieceTop == 100 && pieceLeft == 400) {
			piece.style.top = '200px';
			piece.style.left = '0';
			swapBackground(piece, getPiece(2, 0));
		} else if (pieceTop == 200 && pieceLeft == 0) {
			piece.style.top = '100px';
			piece.style.left = '100px';
			swapBackground(piece, getPiece(3, 0));
		} else if (pieceTop == 200 && pieceLeft == 100) {
			piece.style.top = '100px';
			piece.style.left = '200px';
			swapBackground(piece, getPiece(3, 1));
		} else if (pieceTop == 200 && pieceLeft == 200) {
			piece.style.top = '100px';
			piece.style.left = '300px';
			swapBackground(piece, getPiece(3, 2));
		} else if (pieceTop == 200 && pieceLeft == 300) {
			piece.style.top = '100px';
			piece.style.left = '400px';
			swapBackground(piece, getPiece(3, 3));
		} else if (pieceTop == 200 && pieceLeft == 400) {
			piece.style.top = '300px';
			piece.style.left = '0';
			swapBackground(piece, getPiece(4, 0));
		} else if (pieceTop == 300 && pieceLeft == 0) {
			piece.style.top = '200px';
			piece.style.left = '100px';
			swapBackground(piece, getPiece(5, 0));
		} else if (pieceTop == 300 && pieceLeft == 100) {
			piece.style.top = '200px';
			piece.style.left = '200px';
			swapBackground(piece, getPiece(5, 1));
		} else if (pieceTop == 300 && pieceLeft == 200) {
			piece.style.top = '200px';
			piece.style.left = '300px';
			swapBackground(piece, getPiece(5, 2));
		} else if (pieceTop == 300 && pieceLeft == 300) {
			piece.style.top = '200px';
			piece.style.left = '400px';
			swapBackground(piece, getPiece(5, 3));
		} else if (pieceTop == 300 && pieceLeft == 400) {
			piece.style.top = '400px';
			piece.style.left = '0';
			swapBackground(piece, getPiece(6, 0));
		} else if (pieceTop == 400 && pieceLeft == 0) {
			piece.style.top = '300px';
			piece.style.left = '100px';
			swapBackground(piece, getPiece(7, 0));
		} else if (pieceTop == 400 && pieceLeft == 100) {
			piece.style.top = '300px';
			piece.style.left = '200px';
			swapBackground(piece, getPiece(7, 1));
		} else if (pieceTop == 400 && pieceLeft == 200) {
			piece.style.top = '300px';
			piece.style.left = '300px';
			swapBackground(piece, getPiece(7, 2));
		} else if (pieceTop == 400 && pieceLeft == 300) {
			piece.style.top = '300px';
			piece.style.left = '400px';
			swapBackground(piece, getPiece(7, 3));
		}
		checkWin();
	});
});

function swapBackground(piece1, piece2) {
	var tempBackground = piece1.style.backgroundPosition;
	piece1.style.backgroundPosition = piece2.style.backgroundPosition;
	piece2.style.backgroundPosition = tempBackground;
}

function getPiece(row, col) {
	var puzzleWidth = puzzle.offsetWidth;
	var puzzleHeight = puzzle.offsetHeight;
	var pieceWidth = puzzleWidth / 5;
	var pieceHeight = puzzleHeight / 5;

	var pieceTop = pieceHeight * row;
	var pieceLeft = pieceWidth * col;

	for (var i = 0; i < pieces.length; i++) {
		var piece = pieces[i];
		if (parseInt(piece.style.top) == pieceTop && parseInt(piece.style.left) == pieceLeft) {
			return piece;
		}
	}
}

function checkWin() {
	var correctPositions = [
		'0 0', '-100px 0', '-200px 0', '-300px 0', '-400px 0',
		'0 -100px', '-100px -100px', '-200px -100px', '-300px -100px', '-400px -100px',
		'0 -200px', '-100px -200px', '-200px -200px', '-300px -200px', '-400px -200px',
		'0 -300px', '-100px -300px', '-200px -300px', '-300px -300px', '-400px -300px'
	];

	var currentPositions = [];
	pieces.forEach(function(piece) {
		currentPositions.push(piece.style.backgroundPosition);
	});

	if (currentPositions.join() === correctPositions.join()) {
		alert('恭喜你完成拼图！');
	}
}

这个拼图游戏的实现方式是将图片分成 20 个小块，每个小块都是一个 div，然后用 CSS 将它们排列成一个 5x5 的网格。玩家通过点击某个小块，可以将它和空白的小块交换位置。当所有小块的位置都正确时，游戏结束。

HTML 拼图游戏代码 - 简单易懂的实现方式

原文地址: https://www.cveoy.top/t/topic/nCeb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录