写一个基于html的九宫格拼图小游戏
时间: 2024-01-26 09:03:24 浏览: 26
好的,我可以为您提供一个基于HTML的九宫格拼图小游戏。以下是基本的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>九宫格拼图游戏</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
background-color: #eee;
border: 1px solid #aaa;
}
.container div {
width: 98px;
height: 98px;
background-color: #fff;
margin: 1px;
border: 1px solid #aaa;
text-align: center;
line-height: 98px;
font-size: 48px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.container div:hover {
background-color: #ccc;
}
.container .empty {
background-color: transparent;
border: none;
cursor: default;
}
</style>
</head>
<body>
<div class="container">
<div id="1" onclick="moveTile(this)">1</div>
<div id="2" onclick="moveTile(this)">2</div>
<div id="3" onclick="moveTile(this)">3</div>
<div id="4" onclick="moveTile(this)">4</div>
<div id="5" onclick="moveTile(this)">5</div>
<div id="6" onclick="moveTile(this)">6</div>
<div id="7" onclick="moveTile(this)">7</div>
<div id="8" onclick="moveTile(this)">8</div>
<div class="empty" id="9"></div>
</div>
<script>
var emptyTile = document.querySelector('.empty');
function moveTile(tile) {
if (canMove(tile)) {
swap(tile, emptyTile);
checkGameOver();
}
}
function canMove(tile) {
var currentRow = parseInt(tile.id / 3);
var currentCol = tile.id % 3;
var emptyRow = parseInt(emptyTile.id / 3);
var emptyCol = emptyTile.id % 3;
return (currentRow == emptyRow && Math.abs(currentCol - emptyCol) == 1 ||
currentCol == emptyCol && Math.abs(currentRow - emptyRow) == 1);
}
function swap(tile1, tile2) {
var temp = tile1.innerHTML;
tile1.innerHTML = tile2.innerHTML;
tile2.innerHTML = temp;
tile1.classList.toggle('empty');
tile2.classList.toggle('empty');
emptyTile = tile1.classList.contains('empty') ? tile1 : tile2;
}
function checkGameOver() {
var tiles = document.querySelectorAll('#1, #2, #3, #4, #5, #6, #7, #8');
var gameOver = true;
tiles.forEach(function(tile) {
var id = parseInt(tile.id);
if (id != tile.innerHTML) {
gameOver = false;
}
});
if (gameOver) {
alert('恭喜您完成拼图!');
}
}
</script>
</body>
</html>
```
该游戏中,您需要将1到8的数字按顺序排成一个3x3的矩阵。点击每个方块可以将其与周围的空方块进行交换。当所有数字都被正确地排列时,游戏就完成了。