[V0_FILE]typescriptreact:file="app/page.tsx" import { Suspense } from "react" import GomokuGame from "@/components/gomoku-game" import Loading from "@/components/loading" export default function Home() { return (

五子棋遊戲

) } [V0_FILE]typescriptreact:file="components/loading.tsx" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="components/gomoku-game.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { User, Users, Bot, RefreshCw, MessageSquare, X } from "lucide-react" import GameBoard from "@/components/game-board" import ChatRoom from "@/components/chat-room" export default function GomokuGame() { const [gameMode, setGameMode] = useState<"ai" | "online">("ai") const [difficulty, setDifficulty] = useState<"easy" | "medium" | "hard">("medium") const [showChat, setShowChat] = useState(false) const [soundEnabled, setSoundEnabled] = useState(true) const [gameStarted, setGameStarted] = useState(false) const [currentPlayer, setCurrentPlayer] = useState<"black" | "white">("black") const [winner, setWinner] = useState<"black" | "white" | null>(null) const startNewGame = () => { setGameStarted(true) setCurrentPlayer("black") setWinner(null) } const resetGame = () => { setGameStarted(false) setWinner(null) } const handleGameEnd = (winner: "black" | "white") => { setWinner(winner) } return (

五子棋

聲音

{gameMode === "ai" ? "與AI對戰" : "網路對戰"} {gameStarted && ` • ${currentPlayer === "black" ? "黑棋" : "白棋"}回合`} {gameStarted ? ( ) : (

歡迎來到五子棋遊戲

選擇遊戲模式並開始遊戲

setGameMode(value as "ai" | "online")} > 與AI對戰網路對戰

難度

玩家名稱

玩家1

網路對戰功能模擬中，實際應用需要後端支持。

)} {gameStarted ? ( <> ) : ( )} {winner && (

遊戲結束

{winner === "black" ? "黑棋" : "白棋"}獲勝！

)}

聊天室

與AI助手交流 = 1024 ? "block" : "hidden lg:block"}`}>

) } [V0_FILE]typescriptreact:file="components/game-board.tsx" "use client" import { useState, useEffect, useCallback } from "react" import { useToast } from "@/hooks/use-toast" interface GameBoardProps { gameMode: "ai" | "online" difficulty: "easy" | "medium" | "hard" currentPlayer: "black" | "white" setCurrentPlayer: (player: "black" | "white") => void onGameEnd: (winner: "black" | "white") => void soundEnabled: boolean } // 棋盤大小 const BOARD_SIZE = 15 export default function GameBoard({ gameMode, difficulty, currentPlayer, setCurrentPlayer, onGameEnd, soundEnabled, }: GameBoardProps) { const { toast } = useToast() const [board, setBoard] = useState>>( Array(BOARD_SIZE) .fill(null) .map(() => Array(BOARD_SIZE).fill(null)), ) const [lastMove, setLastMove] = useState<[number, number] | null>(null) const [isAIThinking, setIsAIThinking] = useState(false) // 音效 useEffect(() => { if (!soundEnabled) return const playSound = (soundType: "place" | "win") => { const audio = new Audio( soundType === "place" ? "/placeholder.svg?height=1&width=1" // 實際應用中應替換為真實音效文件 : "/placeholder.svg?height=1&width=1", ) audio.volume = 0.5 audio.play().catch((e) => console.error("音效播放失敗:", e)) } if (lastMove) { playSound("place") } }, [lastMove, soundEnabled]) // 檢查是否獲勝 const checkWin = useCallback( (row: number, col: number, player: "black" | "white") => { const directions = [ [1, 0], // 水平 [0, 1], // 垂直 [1, 1], // 對角線 [1, -1], // 反對角線 ] for (const [dx, dy] of directions) { let count = 1 // 正向檢查 for (let i = 1; i < 5; i++) { const newRow = row + i * dx const newCol = col + i * dy if ( newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || board[newRow][newCol] !== player ) { break } count++ } // 反向檢查 for (let i = 1; i < 5; i++) { const newRow = row - i * dx const newCol = col - i * dy if ( newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || board[newRow][newCol] !== player ) { break } count++ } if (count >= 5) { return true } } return false }, [board], ) // AI移動 const aiMove = useCallback(() => { if (gameMode !== "ai" || currentPlayer !== "white") return setIsAIThinking(true) // 模擬AI思考時間 setTimeout( () => { // 簡單的AI邏輯 - 根據難度調整 const availableMoves: [number, number][] = [] // 收集所有可用的移動 for (let i = 0; i < BOARD_SIZE; i++) { for (let j = 0; j < BOARD_SIZE; j++) { if (board[i][j] === null) { availableMoves.push([i, j]) } } } if (availableMoves.length === 0) { setIsAIThinking(false) return } let selectedMove: [number, number] if (difficulty === "easy") { // 簡單模式: 隨機選擇 selectedMove = availableMoves[Math.floor(Math.random() * availableMoves.length)] } else { // 中等/困難模式: 嘗試找到更好的移動 // 這裡是一個簡化的啟發式方法，實際的AI會更複雜 // 先檢查是否有可以贏的移動 for (const [row, col] of availableMoves) { const newBoard = board.map((r) => [...r]) newBoard[row][col] = "white" if (checkWin(row, col, "white")) { selectedMove = [row, col] break } } // 如果沒有找到贏的移動，檢查是否需要阻止對手 if (!selectedMove) { for (const [row, col] of availableMoves) { const newBoard = board.map((r) => [...r]) newBoard[row][col] = "black" if (checkWin(row, col, "black")) { selectedMove = [row, col] break } } } // 如果仍然沒有找到好的移動，選擇一個接近中心或接近現有棋子的位置 if (!selectedMove) { const center = Math.floor(BOARD_SIZE / 2) // 按照到中心的距離排序移動 availableMoves.sort((a, b) => { const distA = Math.abs(a[0] - center) + Math.abs(a[1] - center) const distB = Math.abs(b[0] - center) + Math.abs(b[1] - center) return distA - distB }) // 困難模式會更智能地選擇 if (difficulty === "hard") { // 在前幾個最佳移動中選擇 selectedMove = availableMoves[Math.floor(Math.random() * Math.min(3, availableMoves.length))] } else { // 中等模式會在前幾個最佳移動中隨機選擇 selectedMove = availableMoves[Math.floor(Math.random() * Math.min(5, availableMoves.length))] } } } // 執行移動 const [row, col] = selectedMove const newBoard = [...board] newBoard[row] = [...newBoard[row]] newBoard[row][col] = "white" setBoard(newBoard) setLastMove([row, col]) // 檢查是否獲勝 if (checkWin(row, col, "white")) { onGameEnd("white") toast({ title: "遊戲結束", description: "AI獲勝！", }) } else { setCurrentPlayer("black") } setIsAIThinking(false) }, difficulty === "easy" ? 500 : difficulty === "medium" ? 1000 : 1500, ) }, [board, checkWin, currentPlayer, difficulty, gameMode, onGameEnd, setCurrentPlayer, toast]) // 當AI回合時觸發AI移動 useEffect(() => { if (gameMode === "ai" && currentPlayer === "white") { aiMove() } }, [aiMove, currentPlayer, gameMode]) // 處理玩家移動 const handleCellClick = (row: number, col: number) => { // 如果該位置已有棋子或不是玩家回合，則不做任何事 if (board[row][col] !== null || (gameMode === "ai" && currentPlayer === "white") || isAIThinking) { return } // 更新棋盤 const newBoard = [...board] newBoard[row] = [...newBoard[row]] newBoard[row][col] = currentPlayer setBoard(newBoard) setLastMove([row, col]) // 檢查是否獲勝 if (checkWin(row, col, currentPlayer)) { onGameEnd(currentPlayer) toast({ title: "遊戲結束", description: `${currentPlayer === "black" ? "黑棋" : "白棋"}獲勝！`, }) return } // 切換玩家 setCurrentPlayer(currentPlayer === "black" ? "white" : "black") } return (

{isAIThinking && (

AI思考中...

)}

{board.map((row, rowIndex) => row.map((cell, colIndex) => (

handleCellClick(rowIndex, colIndex)} > {cell && (

)}

)), )}

) } [V0_FILE]typescriptreact:file="components/chat-room.tsx" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Send } from "lucide-react" type Message = { id: string content: string sender: "user" | "ai" timestamp: Date } // 預設的AI回應 const AI_RESPONSES: Record = { greeting: [ "你好！我是五子棋AI助手，有什麼可以幫助你的嗎？", "嗨！需要了解五子棋規則或策略嗎？", "歡迎來到五子棋遊戲！我可以回答你的問題。", ], rules: [ "五子棋規則很簡單：在15×15的棋盤上，先將五個棋子連成一線（橫、直、斜）的一方獲勝。", "黑棋先行，雙方輪流在棋盤交叉點上放置棋子，先連成五子者獲勝。", "五子棋的基本規則是：先形成五子連線的一方獲勝，連線可以是水平、垂直或對角線。", ], strategy: [ "五子棋的基本策略包括：控制中心、形成活三和活四、阻止對手形成威脅。", "初學者可以先專注於防守，阻止對手形成連續的棋子。", "一個好的開局策略是先在中心區域落子，這樣可以有更多連線的可能性。", "進攻時，嘗試同時創造多個威脅，這樣對手就無法同時防守所有威脅。", ], difficulty: [ "我們的AI有三個難度級別：簡單適合初學者，中等有一定挑戰性，困難則會測試你的高級策略。", "困難模式下，AI會嘗試預測你的移動並做出更智能的防守和進攻。", "如果你是初學者，建議從簡單模式開始，熟悉規則後再挑戰更高難度。", ], default: [ "我理解你的問題，讓我思考一下...", "這是個有趣的問題！作為五子棋助手，我建議...", "謝謝你的提問！關於五子棋，我可以告訴你...", "我不太確定你的問題，你能再詳細說明一下嗎？", "作為五子棋AI助手，我可以幫助你了解遊戲規則和策略。", ], } export default function ChatRoom() { const [messages, setMessages] = useState([ { id: "1", content: "你好！我是五子棋AI助手，有什麼可以幫助你的嗎？", sender: "ai", timestamp: new Date(), }, ]) const [input, setInput] = useState("") const [isTyping, setIsTyping] = useState(false) const messagesEndRef = useRef(null) // 自動滾動到最新消息 useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) // 處理發送消息 const handleSendMessage = () => { if (!input.trim()) return // 添加用戶消息 const userMessage: Message = { id: Date.now().toString(), content: input, sender: "user", timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInput("") setIsTyping(true) // 模擬AI回應 setTimeout(() => { // 根據用戶輸入選擇回應類別 let responseCategory = "default" const lowerInput = input.toLowerCase() if (lowerInput.includes("你好") || lowerInput.includes("嗨") || lowerInput.includes("哈囉")) { responseCategory = "greeting" } else if (lowerInput.includes("規則") || lowerInput.includes("怎麼玩")) { responseCategory = "rules" } else if (lowerInput.includes("策略") || lowerInput.includes("技巧") || lowerInput.includes("怎麼贏")) { responseCategory = "strategy" } else if (lowerInput.includes("難度") || lowerInput.includes("簡單") || lowerInput.includes("困難")) { responseCategory = "difficulty" } // 從選定類別中隨機選擇一個回應 const responses = AI_RESPONSES[responseCategory] const randomResponse = responses[Math.floor(Math.random() * responses.length)] const aiMessage: Message = { id: Date.now().toString(), content: randomResponse, sender: "ai", timestamp: new Date(), } setMessages((prev) => [...prev, aiMessage]) setIsTyping(false) }, 1000) } // 處理按Enter發送 const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return (

{messages.map((message) => (

{message.sender === "ai" ? "AI" : "我"}

{message.content}

{message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}

))} {isTyping && (

)}

setInput(e.target.value)} onKeyDown={handleKeyDown} className="flex-1" />

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom grid for the game board */ .grid-cols-15 { grid-template-columns: repeat(15, minmax(0, 1fr)); } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This