[V0_FILE]typescriptreact:file="utils/gameUtils.ts" isEdit="true" isQuickEdit="true" isMerged="true" export const BOARD_SIZE = 20 export const SNAKE_START = [ { x: 10, y: 10 }, { x: 10, y: 11 }, ] export const APPLE_START = { x: 5, y: 5 } export const SCALE = 20 export const SPEED = 100 export const DIRECTIONS = { 38: { x: 0, y: -1 }, // up 40: { x: 0, y: 1 }, // down 37: { x: -1, y: 0 }, // left 39: { x: 1, y: 0 }, // right } export const checkCollision = (piece: { x: number; y: number }, snakeArray: { x: number; y: number }[]) => snakeArray.some((segment) => segment.x === piece.x && segment.y === piece.y) export const appleAte = (newSnake: { x: number; y: number }[], apple: { x: number; y: number }) => newSnake[0].x === apple.x && newSnake[0].y === apple.y export const generateApple = (snake: { x: number; y: number }[]) => { let newApple do { newApple = { x: Math.floor(Math.random() * BOARD_SIZE), y: Math.floor(Math.random() * BOARD_SIZE), } } while (checkCollision(newApple, snake)) return newApple } export const getRandomColor = () => { return `hsl(${Math.random() * 360}, 100%, 50%)` } export const getSnakeColor = (index: number, isRainbow: boolean, rainbowColors: string[]) => { if (isRainbow) { return rainbowColors[index % rainbowColors.length] } return index === 0 ? "#00ff00" : "#00cc00" } [V0_FILE]typescriptreact:file="components/Board.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { BOARD_SIZE, SCALE, getSnakeColor } from "../utils/gameUtils" interface BoardProps { snakeDots: { x: number; y: number }[] apple: { x: number; y: number } isRainbowMode: boolean rainbowColors: string[] } const Board: React.FC = ({ snakeDots, apple, isRainbowMode, rainbowColors }) => { return (

{snakeDots.map((dot, i) => (

))}

) } export default Board [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import "@/app/globals.css" import Game from "../components/Game" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/GameControls.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { Button } from "@/components/ui/button" import { Sun, Moon, Rainbow } from "lucide-react" interface GameControlsProps { onStartGame: () => void onToggleTheme: () => void onToggleRainbow: () => void isDarkMode: boolean isRainbowMode: boolean } const GameControls: React.FC = ({ onStartGame, onToggleTheme, onToggleRainbow, isDarkMode, isRainbowMode, }) => { return (

) } export default GameControls [V0_FILE]typescriptreact:file="components/GameOverPopup.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import { Button } from "@/components/ui/button" interface GameOverPopupProps { score: number onRestart: () => void isDarkMode: boolean } const GameOverPopup: React.FC = ({ score, onRestart, isDarkMode }) => { return (

Game Over

Your score: {score}

) } export default GameOverPopup [V0_FILE]typescriptreact:file="components/Game.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useCallback } from "react" import Board from "./Board" import GameControls from "./GameControls" import GameOverPopup from "./GameOverPopup" import { SNAKE_START, APPLE_START, DIRECTIONS, SPEED, checkCollision, appleAte, generateApple, BOARD_SIZE, getRandomColor, } from "../utils/gameUtils" const Game: React.FC = () => { const [snake, setSnake] = useState(SNAKE_START) const [apple, setApple] = useState(APPLE_START) const [dir, setDir] = useState<{ x: number; y: number }>(DIRECTIONS[39]) const [speed, setSpeed] = useState(null) const [gameOver, setGameOver] = useState(false) const [score, setScore] = useState(0) const [highScore, setHighScore] = useState(0) const [isDarkMode, setIsDarkMode] = useState(false) const [isRainbowMode, setIsRainbowMode] = useState(false) const [rainbowColors, setRainbowColors] = useState([]) const moveSnake = useCallback(() => { const newSnake = [...snake] const newSnakeHead = { x: newSnake[0].x + dir.x, y: newSnake[0].y + dir.y } if ( newSnakeHead.x < 0 || newSnakeHead.x >= BOARD_SIZE || newSnakeHead.y < 0 || newSnakeHead.y >= BOARD_SIZE || checkCollision(newSnakeHead, snake) ) { setGameOver(true) return } newSnake.unshift(newSnakeHead) if (appleAte(newSnake, apple)) { setApple(generateApple(newSnake)) setScore((prevScore) => prevScore + 1) } else { newSnake.pop() } setSnake(newSnake) }, [snake, dir, apple]) const startGame = useCallback(() => { setSnake(SNAKE_START) setApple(APPLE_START) setDir(DIRECTIONS[39]) setSpeed(SPEED) setGameOver(false) setScore(0) setRainbowColors(Array(SNAKE_START.length).fill("").map(getRandomColor)) }, []) const toggleTheme = () => { setIsDarkMode((prev) => !prev) } const toggleRainbow = () => { setIsRainbowMode((prev) => !prev) } useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const key = e.keyCode if (key >= 37 && key <= 40) { setDir(DIRECTIONS[key]) } } document.addEventListener("keydown", handleKeyDown) return () => { document.removeEventListener("keydown", handleKeyDown) } }, []) useEffect(() => { if (gameOver) { setSpeed(null) setHighScore((prev) => Math.max(prev, score)) } }, [gameOver, score]) useEffect(() => { if (!gameOver && speed) { const interval = setInterval(moveSnake, speed) return () => clearInterval(interval) } }, [moveSnake, gameOver, speed]) useEffect(() => { if (isRainbowMode) { const interval = setInterval(() => { setRainbowColors((prev) => { const newColors = [...prev] newColors.pop() newColors.unshift(getRandomColor()) return newColors }) }, 200) return () => clearInterval(interval) } }, [isRainbowMode]) return (

Snake Game

Score: {score} High Score: {highScore}

{gameOver && }

) } export default Game

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This