[V0_FILE]typescript:file="utils/gameUtils.ts" isEdit="true" isMerged="true" export const CANVAS_WIDTH = 800; export const CANVAS_HEIGHT = 400; export const SLOPE_ANGLE = 15; export const MOVEMENT_SPEED = 1.5; export const TREE_GENERATION_INTERVAL = 120; export const GRAVITY = 0.2; export const PLAYER_WIDTH = 32; export const PLAYER_HEIGHT = 32; export const COLORS = { sky: '#ffffff', snow: '#ffffff', cliff: '#0066cc', treeGreen: '#33cc99', treeShadow: '#269973', skiTrail: '#e6f2ff' }; export function createTreePath(ctx: CanvasRenderingContext2D, x: number, y: number, size: number) { ctx.beginPath(); ctx.moveTo(x, y - size); ctx.lineTo(x - size/2, y); ctx.lineTo(x + size/2, y); ctx.closePath(); } [V0_FILE]typescript:file="components/GameObjects.ts" isEdit="true" isMerged="true" import { CANVAS_HEIGHT, CANVAS_WIDTH, GRAVITY, SKI_SPEED, MAX_SKI_ANGLE, degreesToRadians } from '../utils/gameUtils'; export class Skier { x: number; y: number; width: number; height: number; angle: number; isSkiingUp: boolean; constructor(x: number, y: number) { this.x = x; this.y = y; this.width = 30; this.height = 60; this.angle = 0; this.isSkiingUp = false; } draw(ctx: CanvasRenderingContext2D) { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(degreesToRadians(this.angle)); ctx.fillStyle = 'blue'; ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height); ctx.restore(); } update(terrainHeight: number) { if (this.isSkiingUp) { this.angle = Math.min(this.angle + 1, MAX_SKI_ANGLE); } else { this.angle = Math.max(this.angle - 1, -MAX_SKI_ANGLE); } const angleRadians = degreesToRadians(this.angle); this.x += Math.cos(angleRadians) * SKI_SPEED; this.y += Math.sin(angleRadians) * SKI_SPEED; // Keep the skier above the terrain if (this.y > terrainHeight - this.height / 2) { this.y = terrainHeight - this.height / 2; } // Wrap around the screen if (this.x > CANVAS_WIDTH) { this.x = 0; } } } export class Terrain { points: { x: number; y: number }[]; constructor(numPoints: number) { this.points = []; for (let i = 0; i <= numPoints; i++) { this.points.push({ x: (i / numPoints) * CANVAS_WIDTH, y: CANVAS_HEIGHT - 50 + Math.sin(i * 0.5) * 20 + Math.random() * 15, }); } } draw(ctx: CanvasRenderingContext2D) { ctx.beginPath(); ctx.moveTo(this.points[0].x, this.points[0].y); for (let i = 1; i < this.points.length; i++) { ctx.lineTo(this.points[i].x, this.points[i].y); } ctx.lineTo(CANVAS_WIDTH, CANVAS_HEIGHT); ctx.lineTo(0, CANVAS_HEIGHT); ctx.fillStyle = 'white'; ctx.fill(); } getTerrainHeightAtX(x: number): number { const index = Math.floor((x / CANVAS_WIDTH) * (this.points.length - 1)); const nextIndex = Math.min(index + 1, this.points.length - 1); const t = (x - this.points[index].x) / (this.points[nextIndex].x - this.points[index].x); return this.points[index].y * (1 - t) + this.points[nextIndex].y * t; } } export class Obstacle { x: number; y: number; width: number; height: number; constructor(x: number, y: number) { this.x = x; this.y = y; this.width = 20; this.height = 40; } draw(ctx: CanvasRenderingContext2D) { ctx.fillStyle = 'green'; ctx.fillRect(this.x - this.width / 2, this.y - this.height, this.width, this.height); } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import SnowBored from '../components/SnowBored'; export default function Home() { return (

); } [V0_FILE]typescript:file="constants.ts" isEdit="true" isMerged="true" export const GAME_CONSTANTS = { CANVAS_WIDTH: 800, CANVAS_HEIGHT: 400, SLOPE_ANGLE: 15, MOVEMENT_SPEED: 1.5, TREE_GENERATION_INTERVAL: 120, GRAVITY: 0.2, PLAYER_WIDTH: 32, PLAYER_HEIGHT: 32, OBSTACLE_WIDTH: 32, OBSTACLE_HEIGHT: 48 } export const COLORS = { sky: '#ffffff', snow: '#ffffff', skiTrail: '#e6f2ff' } export const IMAGES = { PLAYER: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/snowboarder-d8ooGdTTeqCc73t5hfW0TPLcqBEcmx.png", TREES: [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Tree_0-IiABkoy1TJgd2IK76dMoZKcBoSM3OV.png", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Tree_1-PQuEzy4tGxrfIvvsOKN1x30qB7LxAZ.png", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Tree_2-3emosJCVNsMc6SFLYBDexLwAjvMMcc.png", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Tree_3-tCJCvnL001vtrqLkK4TxBhvwDljBAz.png" ], SNOWMEN: [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Snowman_0-TCuDVs2e6275EeFLJgVZT2gG6xR8eW.png", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Snowman_1-1XU0CXxXygx3Tf6eGfSJhMcrv96ElE.png", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Snowman_2-5TfN4Fu4Jr2F9t91GlSdbqPFfPvupL.png", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Snowman_3-Lj63E3FyGim1kfm3G50zhSwi6zylMe.png", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Snowman_4-V6HRnct6cFbhVyfOx74b7CwzyGJ3la.png", "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Snowman_5-m2NUZb2dgzRCPibAWx09MzpzNxYmLB.png" ] } export const FONTS = { PIXEL: "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" } [V0_FILE]typescriptreact:file="components/SnowBored.tsx" isEdit="true" 'use client' import { useEffect, useRef, useState } from 'react' import { GAME_CONSTANTS, COLORS, IMAGES, FONTS } from '../constants' interface Obstacle { x: number y: number sprite: HTMLImageElement } interface Player { x: number y: number velocityY: number isMovingUp: boolean sprite: HTMLImageElement | null } interface TrailPoint { x: number y: number } export default function SnowBored() { const canvasRef = useRef(null) const [score, setScore] = useState(0) const [gameTime, setGameTime] = useState(0) const [gameOver, setGameOver] = useState(false) const gameStateRef = useRef({ player: { x: 100, y: GAME_CONSTANTS.CANVAS_HEIGHT / 2, velocityY: 0, isMovingUp: false, sprite: null as HTMLImageElement | null }, obstacles: [] as Obstacle[], trailPoints: [] as TrailPoint[], frameCount: 0, startTime: Date.now(), gameSpeedMultiplier: 1, obstacleGenerationInterval: GAME_CONSTANTS.TREE_GENERATION_INTERVAL, lastSpeedIncreaseTime: 0, score: 0, isGameOver: false }) const handleKeyDown = (e: KeyboardEvent) => { if (e.code === 'Space' && !gameStateRef.current.isGameOver) { gameStateRef.current.player.isMovingUp = true; } }; const handleKeyUp = (e: KeyboardEvent) => { if (e.code === 'Space' && !gameStateRef.current.isGameOver) { gameStateRef.current.player.isMovingUp = false; } }; useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return const fontLink = document.createElement('link') fontLink.href = FONTS.PIXEL fontLink.rel = 'stylesheet' document.head.appendChild(fontLink) const loadImage = (src: string): Promise => { return new Promise((resolve, reject) => { const img = new Image() img.crossOrigin = "anonymous" img.src = src img.onload = () => resolve(img) img.onerror = reject }) } const loadObstacleSprites = async () => { const treeSprites = await Promise.all(IMAGES.TREES.map(loadImage)) const snowmanSprites = await Promise.all(IMAGES.SNOWMEN.map(loadImage)) return { treeSprites, snowmanSprites } } const initGame = async () => { const playerSprite = await loadImage(IMAGES.PLAYER) const { treeSprites, snowmanSprites } = await loadObstacleSprites() gameStateRef.current.player.sprite = playerSprite const getRandomObstacleSprite = () => { const useTree = Math.random() > 0.3 const sprites = useTree ? treeSprites : snowmanSprites return sprites[Math.floor(Math.random() * sprites.length)] } for (let i = 0; i < 6; i++) { gameStateRef.current.obstacles.push({ x: Math.random() * GAME_CONSTANTS.CANVAS_WIDTH, y: Math.random() * (GAME_CONSTANTS.CANVAS_HEIGHT - 100) + 50, sprite: getRandomObstacleSprite() }) } const drawBackground = () => { ctx.fillStyle = COLORS.sky ctx.fillRect(0, 0, GAME_CONSTANTS.CANVAS_WIDTH, GAME_CONSTANTS.CANVAS_HEIGHT) } const drawPlayer = () => { const { player } = gameStateRef.current if (player.sprite) { ctx.save() ctx.translate(player.x, player.y) if (gameStateRef.current.isGameOver) { ctx.rotate(-Math.PI / 2) } ctx.drawImage( player.sprite, -GAME_CONSTANTS.PLAYER_WIDTH / 2, -GAME_CONSTANTS.PLAYER_HEIGHT / 2, GAME_CONSTANTS.PLAYER_WIDTH, GAME_CONSTANTS.PLAYER_HEIGHT ) ctx.restore() } } const drawObstacles = () => { gameStateRef.current.obstacles.forEach(obstacle => { ctx.drawImage( obstacle.sprite, obstacle.x - GAME_CONSTANTS.OBSTACLE_WIDTH / 2, obstacle.y - GAME_CONSTANTS.OBSTACLE_HEIGHT, GAME_CONSTANTS.OBSTACLE_WIDTH, GAME_CONSTANTS.OBSTACLE_HEIGHT ) }) } const drawSkiTrail = () => { ctx.strokeStyle = COLORS.skiTrail ctx.lineWidth = 2 ctx.beginPath() gameStateRef.current.trailPoints.forEach((point, index) => { if (index === 0) { ctx.moveTo(point.x, point.y) } else { ctx.lineTo(point.x, point.y) } }) ctx.stroke() } const drawUI = () => { ctx.fillStyle = '#000000' ctx.font = '16px "Press Start 2P"' const scoreText = `Score: ${gameStateRef.current.score}` const scoreWidth = ctx.measureText(scoreText).width ctx.fillText(scoreText, GAME_CONSTANTS.CANVAS_WIDTH - scoreWidth - 20, 30) const currentTime = gameStateRef.current.isGameOver ? gameTime : Math.floor((Date.now() - gameStateRef.current.startTime) / 1000) const timeString = new Date(currentTime * 1000).toISOString().substr(14, 5) ctx.fillText(timeString, 20, 30) } const checkCollision = () => { const { player, obstacles } = gameStateRef.current for (let obstacle of obstacles) { const dx = Math.abs(player.x - obstacle.x) const dy = Math.abs(player.y - obstacle.y) if (dx < GAME_CONSTANTS.PLAYER_WIDTH / 2 && dy < GAME_CONSTANTS.PLAYER_HEIGHT / 2) { return true } } return false } const updateGame = () => { if (gameStateRef.current.isGameOver) return const { player, obstacles, trailPoints } = gameStateRef.current const currentTime = Date.now() if (currentTime - gameStateRef.current.lastSpeedIncreaseTime >= 2500) { gameStateRef.current.gameSpeedMultiplier += 0.05 gameStateRef.current.obstacleGenerationInterval = Math.max( 30, gameStateRef.current.obstacleGenerationInterval - 5 ) gameStateRef.current.lastSpeedIncreaseTime = currentTime } if (player.isMovingUp) { player.velocityY = Math.max(player.velocityY - 0.2, -GAME_CONSTANTS.MOVEMENT_SPEED) } else { player.velocityY = Math.min(player.velocityY + GAME_CONSTANTS.GRAVITY, GAME_CONSTANTS.MOVEMENT_SPEED) } player.y += player.velocityY if (player.y < 50) player.y = 50 if (player.y > GAME_CONSTANTS.CANVAS_HEIGHT - 70) player.y = GAME_CONSTANTS.CANVAS_HEIGHT - 70 trailPoints.unshift({ x: player.x, y: player.y + 10 }) if (trailPoints.length > 50) { trailPoints.pop() } gameStateRef.current.obstacles = obstacles.map(obstacle => ({ ...obstacle, x: obstacle.x - GAME_CONSTANTS.MOVEMENT_SPEED * gameStateRef.current.gameSpeedMultiplier })).filter(obstacle => obstacle.x > -50) gameStateRef.current.trailPoints = trailPoints.map(point => ({ ...point, x: point.x - GAME_CONSTANTS.MOVEMENT_SPEED * gameStateRef.current.gameSpeedMultiplier })).filter(point => point.x > 0) if (gameStateRef.current.frameCount % gameStateRef.current.obstacleGenerationInterval === 0) { gameStateRef.current.obstacles.push({ x: GAME_CONSTANTS.CANVAS_WIDTH + 50, y: Math.random() * (GAME_CONSTANTS.CANVAS_HEIGHT - 100) + 50, sprite: getRandomObstacleSprite() }) } if (checkCollision()) { gameStateRef.current.isGameOver = true setGameOver(true) setGameTime(Math.floor((Date.now() - gameStateRef.current.startTime) / 1000)) return } if (gameStateRef.current.frameCount % 60 === 0) { gameStateRef.current.score += 10 } gameStateRef.current.frameCount++ } const gameLoop = () => { ctx.clearRect(0, 0, GAME_CONSTANTS.CANVAS_WIDTH, GAME_CONSTANTS.CANVAS_HEIGHT) drawBackground() drawSkiTrail() drawObstacles() drawPlayer() drawUI() if (!gameStateRef.current.isGameOver) { updateGame() setScore(gameStateRef.current.score) } requestAnimationFrame(gameLoop) } window.addEventListener('keydown', handleKeyDown) window.addEventListener('keyup', handleKeyUp) gameLoop() } initGame() return () => { window.removeEventListener('keydown', handleKeyDown) window.removeEventListener('keyup', handleKeyUp) } }, [gameOver, gameTime]) return (

{gameOver ? "It's Snow Over" : "We're Snow Back"}

Press and hold SPACE to move up

) }

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This