uniapp 井字过三关小游戏

以下是一个简单的圣诞节小游戏的代码示例：

<template>
	<view class="container">
		<view class="game-header">{{gameStatus}}</view>
		<view class="game-board">
			<view class="board-row">
				<view class="board-square" :class="{selected: isSelected(0)}" @click="selectSquare(0)">{{board[0]}}
				</view>
				<view class="board-square" :class="{selected: isSelected(1)}" @click="selectSquare(1)">{{board[1]}}
				</view>
				<view class="board-square" :class="{selected: isSelected(2)}" @click="selectSquare(2)">{{board[2]}}
				</view>
			</view>
			<view class="board-row">
				<view class="board-square" :class="{selected: isSelected(3)}" @click="selectSquare(3)">{{board[3]}}
				</view>
				<view class="board-square" :class="{selected: isSelected(4)}" @click="selectSquare(4)">{{board[4]}}
				</view>
				<view class="board-square" :class="{selected: isSelected(5)}" @click="selectSquare(5)">{{board[5]}}
				</view>
			</view>
			<view class="board-row">
				<view class="board-square" :class="{selected: isSelected(6)}" @click="selectSquare(6)">{{board[6]}}
				</view>
				<view class="board-square" :class="{selected: isSelected(7)}" @click="selectSquare(7)">{{board[7]}}
				</view>
				<view class="board-square" :class="{selected: isSelected(8)}" @click="selectSquare(8)">{{board[8]}}
				</view>
			</view>
		</view>
		<view class="button-container" v-if="gameOver">
			<button class="button" @click="restartGame">Play Again</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				gameStatus: 'Merry Christmas!',
				board: Array(9).fill(''), // empty board
				player: 'X',
				gameOver: false,
			}
		},
		methods: {
			selectSquare(index) {
				if (this.board[index] === '' && !this.gameOver) {
					this.board[index] = this.player;
					if (this.checkForWin()) {
						this.gameStatus = `${this.player} wins!`;
						this.gameOver = true;
					} else if (this.checkForTie()) {
						this.gameStatus = 'Tie game!';
						this.gameOver = true;
					} else {
						this.player = this.player === 'X' ? 'O' : 'X'; // switch players
						this.gameStatus = `${this.player}'s turn`;
					}
				}
			},
			checkForWin() {
				const winningCombos = [
					[0, 1, 2],
					[3, 4, 5],
					[6, 7, 8],
					[0, 3, 6],
					[1, 4, 7],
					[2, 5, 8],
					[0, 4, 8],
					[2, 4, 6],
				];
				return winningCombos.some(combo => {
					const [a, b, c] = combo;
					return this.board[a] && this.board[a] === this.board[b] && this.board[a] === this.board[c];
				});
			},
			checkForTie() {
				return !this.board.some(square => square === '');
			},
			restartGame() {
				this.board = Array(9).fill('');
				this.player = 'X';
				this.gameOver = false;
				this.gameStatus = `${this.player}'s turn`;
			},
			isSelected(index) {
				return this.board[index] !== '';
			},
		},
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.game-header {
		font-size: 30px;
		font-weight: bold;
		margin: 20px;
		text-align: center;
	}

	.game-board {
		display: flex;
		flex-direction: column;
	}

	.board-row {
		display: flex;
	}

	.board-square {
		width: 100px;
		height: 100px;
		border: 1px solid black;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 60px;
	}

	.board-square.selected {
		background-color: hsl(0, 0%, 80%);
	}

	.button-container {
		margin-top: 20px;
	}

	.button {
		font-size: 20px;
		padding: 10px;
		background-color: hsl(120, 70%, 60%);
		color: white;
		border: none;
		cursor: pointer;
	}
</style>

该代码使用了Vue.js框架来实现井字棋小游戏。你可以根据需要修改和修改代码以创建自己的小游戏。