好的，以下是用uniapp写一个关灯游戏的代码：
<template>
<view class="container">
<view class="title">关灯游戏</view>
<view class="board">
<view class="row" v-for="(row, rowIndex) in board" :key="rowIndex">
<view class="cell" v-for="(cell, cellIndex) in row" :key="cellIndex" :class="{ on: cell }" @click="toggle(rowIndex, cellIndex)"></view>
</view>
</view>
<view class="btn" @click="reset">重新开始</view>
</view>
</template>
<script>
export default {
data() {
return {
board: [
[true, true, true, true, true],
[true, true, true, true, true],
[true, true, true, true, true],
[true, true, true, true, true],
[true, true, true, true, true]
]
}
},
methods: {
toggle(row, col) {
this.board[row][col] = !this.board[row][col]
if (row > 0) this.board[row - 1][col] = !this.board[row - 1][col]
if (row < 4) this.board[row + 1][col] = !this.board[row + 1][col]
if (col > 0) this.board[row][col - 1] = !this.board[row][col - 1]
if (col < 4) this.board[row][col + 1] = !this.board[row][col + 1]
if (this.checkWin()) {
setTimeout(() => {
uni.showToast({
title: '你赢了！',
icon: 'success'
})
}, 500)
}
},
checkWin() {
return this.board.every(row => row.every(cell => !cell))
},
reset() {
this.board = [
[true, true, true, true, true],
[true, true, true, true, true],
[true, true, true, true, true],
[true, true, true, true, true],
[true, true, true, true, true]
]
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
.board {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background-color: #eee;
border-radius: 10px;
padding: 10px;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
width: 50px;
height: 50px;
background-color: #fff;
border: 1px solid #ccc;
margin: 5px;
border-radius: 5px;
}
.cell.on {
background-color: #333;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
</style>
最低0.47元/天 解锁文章
扫一扫
1845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
