用uniapp写个九宫格拼图游戏代码
时间: 2023-05-13 09:05:07 浏览: 322
以下是用uniapp写的九宫格拼图游戏代码:
<template>
<div class="puzzle">
<div class="grid" v-for="(item, index) in puzzleList" :key="index" :style="{backgroundImage: `url(${item})`, backgroundPosition: bgPosition(index), transform: `translate(${translateX(index)}px, ${translateY(index)}px)`}" @click="move(index)"></div>
</div>
</template>
<script>
export default {
data() {
return {
puzzleList: [], // 拼图图片列表
emptyIndex: 8, // 空白格子的索引
gridSize: 100, // 格子大小
puzzleSize: 300, // 拼图大小
puzzleWidth: 3, // 拼图宽度
puzzleHeight: 3, // 拼图高度
puzzleImg: 'puzzle.jpg', // 拼图图片
puzzleArr: [], // 拼图数组
moveCount: 0, // 移动次数
isWin: false // 是否胜利
}
},
created() {
this.initPuzzle()
},
methods: {
// 初始化拼图
initPuzzle() {
// 加载拼图图片
let img = new Image()
img.src = this.puzzleImg
img.onload = () => {
// 将图片切成拼图
let canvas = document.createElement('canvas')
canvas.width = this.puzzleSize
canvas.height = this.puzzleSize
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, this.puzzleSize, this.puzzleSize)
for (let i = 0; i < this.puzzleHeight; i++) {
for (let j = 0; j < this.puzzleWidth; j++) {
let x = j * this.gridSize
let y = i * this.gridSize
let imgData = ctx.getImageData(x, y, this.gridSize, this.gridSize)
let imgSrc = this.getImageSrc(imgData)
this.puzzleList.push(imgSrc)
this.puzzleArr.push(imgSrc)
}
}
// 将最后一个拼图设置为空白格子
this.puzzleList.splice(this.emptyIndex, 1, '')
this.puzzleArr.splice(this.emptyIndex, 1, '')
// 打乱拼图
this.shufflePuzzle()
}
},
// 获取图片的base64编码
getImageSrc(imgData) {
let canvas = document.createElement('canvas')
canvas.width = imgData.width
canvas.height = imgData.height
let ctx = canvas.getContext('2d')
ctx.putImageData(imgData, 0, 0)
return canvas.toDataURL()
},
// 打乱拼图
shufflePuzzle() {
for (let i = 0; i < 100; i++) {
let index = Math.floor(Math.random() * 9)
this.move(index)
}
},
// 移动拼图
move(index) {
if (this.isWin) {
return
}
if (this.canMove(index)) {
this.swap(index, this.emptyIndex)
this.emptyIndex = index
this.moveCount++
this.checkWin()
}
},
// 判断是否可以移动
canMove(index) {
let row = Math.floor(index / this.puzzleWidth)
let col = index % this.puzzleWidth
let emptyRow = Math.floor(this.emptyIndex / this.puzzleWidth)
let emptyCol = this.emptyIndex % this.puzzleWidth
return (row === emptyRow && Math.abs(col - emptyCol) === 1) || (col === emptyCol && Math.abs(row - emptyRow) === 1)
},
// 交换拼图
swap(index1, index2) {
let temp = this.puzzleList[index1]
this.puzzleList.splice(index1, 1, this.puzzleList[index2])
this.puzzleList.splice(index2, 1, temp)
temp = this.puzzleArr[index1]
this.puzzleArr.splice(index1, 1, this.puzzleArr[index2])
this.puzzleArr.splice(index2, 1, temp)
},
// 检查是否胜利
checkWin() {
for (let i = 0; i < this.puzzleArr.length; i++) {
if (this.puzzleArr[i] !== this.puzzleList[i]) {
return
}
}
this.isWin = true
alert(`恭喜你,完成拼图,用了${this.moveCount}步!`)
},
// 获取背景位置
bgPosition(index) {
let row = Math.floor(index / this.puzzleWidth)
let col = index % this.puzzleWidth
let x = col * this.gridSize
let y = row * this.gridSize
return `-${x}px -${y}px`
},
// 获取水平方向的偏移量
translateX(index) {
let col = index % this.puzzleWidth
let emptyCol = this.emptyIndex % this.puzzleWidth
return (col - emptyCol) * this.gridSize
},
// 获取垂直方向的偏移量
translateY(index) {
let row = Math.floor(index / this.puzzleWidth)
let emptyRow = Math.floor(this.emptyIndex / this.puzzleWidth)
return (row - emptyRow) * this.gridSize
}
}
}
</script>
<style>
.puzzle {
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
}
.grid {
width: 100px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
transition: transform 0.3s;
cursor: pointer;
}
.grid:hover {
background-color: #eee;
}
</style>
注意:以上代码仅供参考,可能存在错误或不完善的地方。