Javascript: 实现拼图游戏
时间: 2024-05-20 18:06:55 浏览: 15
实现拼图游戏的基本思路是将一张完整的图片分割成若干个小块,然后打乱这些小块的顺序,让玩家通过交换小块的位置来还原原始图片。以下是一个简单的实现示例:
HTML:
```html
<div id="puzzle"></div>
```
CSS:
```css
#puzzle {
width: 300px;
height: 300px;
border: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
}
#puzzle div {
width: 100px;
height: 100px;
background-size: 300px 300px;
background-repeat: no-repeat;
cursor: pointer;
}
```
JavaScript:
```javascript
const ROWS = 3; // 行数
const COLS = 3; // 列数
const IMG_URL = 'https://picsum.photos/300'; // 图片地址
const puzzle = document.getElementById('puzzle');
let emptyRow = ROWS - 1; // 空白块所在行
let emptyCol = COLS - 1; // 空白块所在列
// 初始化拼图
function initPuzzle() {
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
const piece = document.createElement('div');
piece.style.backgroundImage = `url(${IMG_URL})`;
piece.style.backgroundPosition = `-${j * 100}px -${i * 100}px`;
piece.dataset.row = i;
piece.dataset.col = j;
piece.addEventListener('click', movePiece);
puzzle.appendChild(piece);
}
}
}
// 移动小块
function movePiece() {
const row = parseInt(this.dataset.row);
const col = parseInt(this.dataset.col);
if (row === emptyRow && Math.abs(col - emptyCol) === 1 ||
col === emptyCol && Math.abs(row - emptyRow) === 1) {
this.style.transform = `translate(${emptyCol - col}00%, ${emptyRow - row}00%)`;
this.dataset.row = emptyRow;
this.dataset.col = emptyCol;
emptyRow = row;
emptyCol = col;
}
}
initPuzzle();
```
该示例使用了 flex 布局和 transform 属性来实现小块的布局和移动。具体实现过程中,我们可以根据需要添加更多的交互效果和游戏逻辑。
相关推荐
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)