[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" // Game Constants const GAME_WIDTH = 400 const GAME_HEIGHT = 600 const PLAYER_WIDTH = 30 const PLAYER_HEIGHT = 30 const LANE_WIDTH = GAME_WIDTH / 3 const BASE_SPEED = 5 const DIFFICULTY_INCREASE = 0.015 // Game States type GameState = "menu" | "playing" | "gameover" | "paused" | "shop" interface GameObject { x: number y: number width: number height: number type: "obstacle" | "boost" } interface Particle { x: number y: number vx: number vy: number life: number color: string } export default function NeonRunnerGame() { const canvasRef = useRef(null) const [gameState, setGameState] = useState("menu") const [score, setScore] = useState(0) const [highScore, setHighScore] = useState(0) const [selectedSkin, setSelectedSkin] = useState(0) const gameStateRef = useRef({ gameState, playerLane: 1, speed: BASE_SPEED, score: 0, gameObjects: [] as GameObject[], particles: [] as Particle[], spawnCounter: 0, boostActive: false, boostTimer: 0, isPaused: false, hasCollided: false, }) // Load high score from localStorage useEffect(() => { const saved = localStorage.getItem("neonRunnerHighScore") if (saved) setHighScore(Number.parseInt(saved)) }, []) // Main game loop useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const state = gameStateRef.current const gameLoop = () => { if (state.gameState === "playing" && !state.isPaused) { // Update game logic state.spawnCounter++ // Spawn obstacles if (state.spawnCounter > Math.max(40 - state.score / 100, 20)) { const type = Math.random() > 0.95 ? "boost" : "obstacle" const lane = Math.floor(Math.random() * 3) state.gameObjects.push({ x: lane * LANE_WIDTH + LANE_WIDTH / 2 - 15, y: -40, width: 30, height: 30, type, }) state.spawnCounter = 0 } // Increase difficulty state.speed = BASE_SPEED + (state.score / 1000) * 3 // Update game objects state.gameObjects = state.gameObjects.filter((obj) => { obj.y += state.speed return obj.y < GAME_HEIGHT }) // Check collisions state.gameObjects.forEach((obj) => { const playerX = state.playerLane * LANE_WIDTH + LANE_WIDTH / 2 - PLAYER_WIDTH / 2 const playerY = GAME_HEIGHT - 60 if ( playerX < obj.x + obj.width && playerX + PLAYER_WIDTH > obj.x && playerY < obj.y + obj.height && playerY + PLAYER_HEIGHT > obj.y ) { if (obj.type === "obstacle") { state.hasCollided = true setGameState("gameover") // Save high score if (state.score > highScore) { setHighScore(state.score) localStorage.setItem("neonRunnerHighScore", state.score.toString()) } } else if (obj.type === "boost") { state.boostActive = true state.boostTimer = 300 // 5 seconds at 60 FPS // Add particles for (let i = 0; i < 10; i++) { state.particles.push({ x: playerX + PLAYER_WIDTH / 2, y: playerY + PLAYER_HEIGHT / 2, vx: (Math.random() - 0.5) * 4, vy: (Math.random() - 0.5) * 4, life: 1, color: `hsl(${Math.random() * 60 + 280}, 100%, 60%)`, }) } } // Remove object const index = state.gameObjects.indexOf(obj) if (index > -1) state.gameObjects.splice(index, 1) } }) // Update boost if (state.boostActive) { state.boostTimer-- if (state.boostTimer <= 0) { state.boostActive = false } } // Update particles state.particles = state.particles .map((p) => ({ ...p, x: p.x + p.vx, y: p.y + p.vy, vy: p.vy + 0.1, life: p.life - 0.02, })) .filter((p) => p.life > 0) state.score += 1 setScore(state.score) } // Render renderGame(ctx, state, selectedSkin) if (state.gameState === "playing") { requestAnimationFrame(gameLoop) } } gameStateRef.current.gameState = gameState if (gameState === "playing") { requestAnimationFrame(gameLoop) } else { renderGame(ctx, state, selectedSkin) } }, [gameState, selectedSkin, highScore]) // Keyboard controls useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { const state = gameStateRef.current if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A") { if (state.playerLane > 0) state.playerLane-- } else if (e.key === "ArrowRight" || e.key === "d" || e.key === "D") { if (state.playerLane < 2) state.playerLane++ } else if (e.key === "p" || e.key === "P") { if (gameState === "playing") { state.isPaused = !state.isPaused setGameState(state.isPaused ? "paused" : "playing") } } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [gameState]) // Touch/swipe controls useEffect(() => { let touchStartX = 0 const handleTouchStart = (e: TouchEvent) => { touchStartX = e.touches[0].clientX } const handleTouchMove = (e: TouchEvent) => { if (!touchStartX) return const state = gameStateRef.current const touchCurrentX = e.touches[0].clientX const diff = touchCurrentX - touchStartX if (diff < -30 && state.playerLane < 2) { state.playerLane++ touchStartX = touchCurrentX } else if (diff > 30 && state.playerLane > 0) { state.playerLane-- touchStartX = touchCurrentX } } const handleTouchEnd = () => { touchStartX = 0 } window.addEventListener("touchstart", handleTouchStart) window.addEventListener("touchmove", handleTouchMove) window.addEventListener("touchend", handleTouchEnd) return () => { window.removeEventListener("touchstart", handleTouchStart) window.removeEventListener("touchmove", handleTouchMove) window.removeEventListener("touchend", handleTouchEnd) } }, []) const renderGame = (ctx: CanvasRenderingContext2D, state: typeof gameStateRef.current, skinIndex: number) => { // Clear canvas with dark background ctx.fillStyle = "#0a0e27" ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT) // Draw animated grid background ctx.strokeStyle = "rgba(0, 255, 255, 0.1)" ctx.lineWidth = 1 for (let i = 0; i < GAME_HEIGHT; i += 40) { ctx.beginPath() ctx.moveTo(0, i) ctx.lineTo(GAME_WIDTH, i) ctx.stroke() } // Draw lane dividers ctx.strokeStyle = "rgba(255, 0, 255, 0.3)" ctx.lineWidth = 2 ctx.setLineDash([10, 10]) for (let i = 1; i < 3; i++) { ctx.beginPath() ctx.moveTo(i * LANE_WIDTH, 0) ctx.lineTo(i * LANE_WIDTH, GAME_HEIGHT) ctx.stroke() } ctx.setLineDash([]) // Draw player const playerX = state.playerLane * LANE_WIDTH + LANE_WIDTH / 2 - PLAYER_WIDTH / 2 const playerY = GAME_HEIGHT - 60 const skinColors = [ { body: "#00ff88", glow: "rgba(0, 255, 136, 0.6)" }, // Cyan { body: "#ff00ff", glow: "rgba(255, 0, 255, 0.6)" }, // Magenta { body: "#ffaa00", glow: "rgba(255, 170, 0, 0.6)" }, // Orange ] const skin = skinColors[skinIndex % skinColors.length] // Glow effect ctx.shadowColor = skin.glow ctx.shadowBlur = 20 ctx.fillStyle = skin.body ctx.fillRect(playerX, playerY, PLAYER_WIDTH, PLAYER_HEIGHT) ctx.shadowColor = "transparent" // Draw boost indicator if (state.boostActive) { ctx.strokeStyle = skin.body ctx.lineWidth = 2 ctx.globalAlpha = 0.6 for (let i = 0; i < 3; i++) { ctx.strokeRect(playerX - 5 - i * 4, playerY - 5 - i * 4, PLAYER_WIDTH + 10 + i * 8, PLAYER_HEIGHT + 10 + i * 8) } ctx.globalAlpha = 1 } // Draw game objects state.gameObjects.forEach((obj) => { if (obj.type === "obstacle") { ctx.fillStyle = "#ff0055" ctx.shadowColor = "rgba(255, 0, 85, 0.8)" ctx.shadowBlur = 15 ctx.fillRect(obj.x, obj.y, obj.width, obj.height) } else { ctx.fillStyle = "#ffff00" ctx.shadowColor = "rgba(255, 255, 0, 0.8)" ctx.shadowBlur = 15 // Draw star shape for boost drawStar(ctx, obj.x + obj.width / 2, obj.y + obj.height / 2, 5, obj.width / 2, obj.height / 2) } ctx.shadowColor = "transparent" }) // Draw particles state.particles.forEach((p) => { ctx.fillStyle = p.color ctx.globalAlpha = p.life ctx.fillRect(p.x, p.y, 4, 4) ctx.globalAlpha = 1 }) // Draw UI ctx.fillStyle = "#00ffff" ctx.font = "bold 14px monospace" ctx.fillText(`SCORE: ${state.score}`, 10, 25) ctx.fillText(`SPEED: ${state.speed.toFixed(1)}`, 10, 45) if (state.boostActive) { ctx.fillStyle = "#ffff00" ctx.fillText(`BOOST: ${Math.ceil(state.boostTimer / 60)}s`, GAME_WIDTH - 120, 25) } } const drawStar = ( ctx: CanvasRenderingContext2D, cx: number, cy: number, spikes: number, outerRadius: number, innerRadius: number, ) => { let rot = (Math.PI / 2) * 3 const step = Math.PI / spikes ctx.beginPath() ctx.moveTo(cx, cy - outerRadius) for (let i = 0; i < spikes; i++) { ctx.lineTo(cx + Math.cos(rot) * outerRadius, cy + Math.sin(rot) * outerRadius) rot += step ctx.lineTo(cx + Math.cos(rot) * innerRadius, cy + Math.sin(rot) * innerRadius) rot += step } ctx.lineTo(cx, cy - outerRadius) ctx.closePath() ctx.fill() } const startGame = () => { gameStateRef.current = { gameState: "playing", playerLane: 1, speed: BASE_SPEED, score: 0, gameObjects: [], particles: [], spawnCounter: 0, boostActive: false, boostTimer: 0, isPaused: false, hasCollided: false, } setScore(0) setGameState("playing") } const returnToMenu = () => { setGameState("menu") } const openShop = () => { setGameState("shop") } return (

{/* Game Canvas */}

{/* Shop Screen */} {gameState === "shop" && (

SHOP

{[ { name: "CYAN PHANTOM", price: "FREE", color: "#00ff88", index: 0 }, { name: "MAGENTA RIDER", price: "$4.99", color: "#ff00ff", index: 1 }, { name: "ORANGE BLAZE", price: "$9.99", color: "#ffaa00", index: 2 }, ].map((skin) => ( ))}

)} {/* Ad Banner Placeholder */}

Advertisement Banner (728x90)

{/* Watch Ad Button */}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]html:file="neon-runner-game.html" isEdit="true" isQuickEdit="true" isMerged="true" Neon Runner City - Arcade Game

HIGH SCORE 0

CURRENT SKIN CYAN PHANTOM

[V0_FILE]plaintext:file="ads.txt" isMerged="true" google.com, pub-1867097775924598, DIRECT, f08c47fec0942fa0 google.com, pub-1867097775924598, DIRECT, f08c47fec0942fa0 [V0_FILE]html:file="index.html" isMerged="true" Neon Runner City - Free HTML5 Arcade Game

Neon Runner City

Race Through a Cyberpunk Highway and Become a Legend

Experience the ultimate arcade thrill. Navigate an endless neon-soaked city, dodge obstacles, grab speed boosts, and rack up an epic high score in this fast-paced HTML5 game.

Play Game Now

Why You'll Love Neon Runner City

Lightning-Fast Gameplay

Addictive endless runner mechanics with increasing difficulty. React quickly and master the controls to achieve the highest score possible.

Stunning Neon Visuals

Immerse yourself in a cyberpunk city with glowing neon effects, smooth animations, and a retro arcade aesthetic that never gets old.

Play Anywhere

Fully responsive and mobile-friendly. Play on desktop with keyboard controls or on your phone with intuitive touch controls.

High Score Tracking

Your best score is automatically saved locally. Challenge yourself to beat your record and compete with friends.

Unlock Skins

Customize your neon cube with unique skins. Express your style while racing through the endless city highway.

100% Free

Play completely free. No downloads, no installations, no hidden costs. Just pure arcade fun in your browser.

How to Play

Desktop Controls

Arrow Keys or A/D: Move left and right
Spacebar: Jump (when speed boost active)
P: Pause the game

Mobile Controls

Swipe Left/Right: Move your cube
Tap Buttons: Jump, pause, and menu interactions

Pro Tips

Stay focused on obstacles appearing in your lane
Grab yellow star pickups for temporary speed boosts
The game speeds up every level—adapt quickly or crash!
Practice on mobile before challenging your high score

Ready to Race?

Challenge yourself and see how far you can go in Neon Runner City. Play now and dominate the leaderboards!

Start Playing

[V0_FILE]html:file="play.html" isMerged="true" Play Neon Runner City - Free Online Arcade Game

Neon Runner City Game Guide

Objective

Navigate your neon cube through an endless cyberpunk highway. Dodge incoming obstacles, collect speed boosts, and survive as long as possible to rack up the highest score.

Obstacles

Avoid red and cyan obstacles that appear randomly in your path. Colliding with them ends your run. Stay alert and react quickly to incoming hazards.

Speed Boosts

Grab rare yellow star pickups to activate a temporary speed boost. This gives you enhanced movement and the ability to jump over obstacles for a brief period.

Difficulty Scaling

The game progressively speeds up as you survive longer. Each level increases the pace, requiring faster reactions and better timing. How many levels can you conquer?

Game Features

Procedurally generated obstacles for infinite replayability
Smooth keyboard and touch controls
Neon cyberpunk visual design with glowing effects
Progressive difficulty scaling
Local high score saving
Multiple unlockable skins
Particle effects and visual feedback
Optimized for all devices

[V0_FILE]html:file="blog.html" isMerged="true" Blog - Neon Runner City

Neon Runner City Blog

Tips, tricks, insights, and everything you need to master arcade gaming

How to Play Neon Runner City Like a Pro

Published on November 30, 2025

Master the ultimate cyberpunk arcade experience. Learn advanced techniques, timing strategies, and lane management to dominate the high score leaderboard and become a Neon Runner legend...

Read Full Article →

Why HTML5 Arcade Games Are Becoming Popular Again

Published on November 28, 2025

Discover why HTML5 arcade games are experiencing a major resurgence. From nostalgia to instant accessibility, learn what makes browser-based arcade games the perfect blend of retro charm and modern technology...

Read Full Article →

Top 10 Cyberpunk Games You Should Try in 2025

Published on November 25, 2025

Explore the best cyberpunk-themed games available in 2025. From indie gems to AAA blockbusters, we've curated a list of must-play titles that capture the neon-soaked aesthetic and high-octane gameplay you crave...

Read Full Article →

[V0_FILE]html:file="blog-post-1.html" isMerged="true" How to Play Neon Runner City Like a Pro - Blog

How to Play Neon Runner City Like a Pro

Published on November 30, 2025 | 8 min read

Introduction: The Path to Mastery

Neon Runner City may look simple at first glance, but becoming a true master requires strategy, timing, and dedication. Whether you're aiming for your first 10,000 points or trying to break into the elite leaderboard tier, this comprehensive guide will teach you everything you need to dominate the neon-soaked cyberpunk highway.

Understanding the Game Mechanics

Before you can master Neon Runner City, you need to understand how the game works at a fundamental level. The game uses a three-lane highway system where your neon cube can move left, center, or right. Obstacles appear in random lanes and travel toward you at increasing speeds as you progress through levels.

Your score increases by 1 point per frame, meaning 60 points per second. This means longer survival directly translates to higher scores. Every 30 seconds without crashing, you advance to the next level, which increases the base speed by approximately 8%.

Core Strategy: Lane Management

The foundation of pro-level play is effective lane management. Never stay in the same lane for more than 2-3 seconds. Professional players constantly weave between lanes, anticipating obstacle patterns. The key is to move preemptively rather than reactively—don't wait for an obstacle to appear, position yourself ahead of time in lanes that look clear.

Practice the "rhythm method": develop a consistent lane-switching pattern during the early game. This trains your muscle memory and keeps you active rather than passive. As obstacles increase in frequency, adapt your rhythm to avoid clusters.

Speed Boost Mastery

Yellow star pickups are game-changers. When you collect a speed boost, you gain temporary invincibility and enhanced jump capabilities for 5 seconds. Advanced players use speed boosts strategically:

Early Game: Build confidence and increase your score multiplier
Mid Game: Use boosts to push through dangerous obstacle clusters
Late Game: Activate boosts before high-speed obstacle waves to maximize survival

Reaction Time and Focus

As you advance through levels, reaction time becomes critical. Professional players maintain laser focus for extended periods. Here are tips for staying sharp:

Play in short 15-20 minute sessions to maintain peak performance
Minimize distractions and play in a quiet environment
Use mobile controls on larger screens or desktop for better precision
Practice during peak mental hours (morning or early afternoon)

Advanced Techniques

The Anticipation Move: Once you reach level 5+, you must anticipate obstacles before they're visible. Watch the pattern of obstacle spawning and predict where they'll appear. Move to safety zones preemptively.

The Double Weave: When obstacles appear in consecutive frames, perform rapid left-right movements to slip through narrow gaps. This technique requires practice but separates casual players from pros.

Speed Boost Chaining: If you manage to collect multiple speed boosts in succession, you can maintain an extended advantage. Plan your route to collect as many yellow stars as possible during the boosted period.

Mental Game and Persistence

Reaching elite status requires mental fortitude. You will crash. You will fail. Top players view each run as a learning opportunity. After each game, analyze what went wrong: Did you lose focus? Miss a lane? Get caught off-guard?

Keep a personal high score chart and set incremental goals. Instead of chasing a 50,000-point score immediately, aim for 15,000, then 25,000, then 35,000. This makes progression feel rewarding and sustainable.

Mobile vs. Desktop Performance

Both platforms have advantages. Desktop offers physical keyboard feedback and larger screen real estate. Mobile provides tactile feedback and portability. Professional players practice on both platforms to develop versatile skills.

Conclusion: Your Path to Glory

Mastering Neon Runner City takes dedication, but the journey is incredibly rewarding. Start with the fundamentals, practice consistently, and gradually incorporate advanced techniques. Before long, you'll find yourself in the elite tier of players, dominating the leaderboard and setting records that others aspire to break.

The neon highway awaits, legend. Will you answer the call?

Ready to apply these strategies? Play Now

← Back to Blog

[V0_FILE]html:file="blog-post-2.html" isMerged="true" Why HTML5 Arcade Games Are Becoming Popular Again - Blog

Why HTML5 Arcade Games Are Becoming Popular Again

Published on November 28, 2025 | 10 min read

The Arcade Renaissance

In 2025, something unexpected is happening in the gaming industry. While AAA studios pour billions into elaborate open-world games and mobile apps compete for attention, a quiet revolution is taking place in browsers everywhere: HTML5 arcade games are experiencing a massive resurgence. Games like Neon Runner City are proving that simple, engaging, fast-paced experiences still have tremendous appeal to modern audiences.

Instant Access, No Installation

One of the most significant advantages of HTML5 arcade games is immediate accessibility. Players don't need to download 50+ GB files or wait through lengthy installations. Click a link, and you're playing within seconds. This frictionless experience removes a massive barrier to entry that plagues modern gaming.

In an era of short attention spans, this instant gratification is powerful. A player can jump into Neon Runner City during a lunch break, play for 10 minutes, then close the tab. No commitment, no installation bloat, pure fun.

Nostalgia and the Arcade Revival

Millennials and Gen Z have discovered the charm of arcade gaming. The aesthetic, the simplicity, and the pure skill-based gameplay feel refreshing compared to modern gaming's complexity. HTML5 developers are capitalizing on this nostalgia by recreating the arcade experience with modern visuals and touch controls.

But it's not just nostalgia—it's also about authenticity. Real arcade games focused on mastery and high scores, not loot boxes and battle passes. HTML5 arcade games are returning to those core principles, attracting players tired of monetization gimmicks.

Cross-Platform Compatibility

HTML5 games run seamlessly across desktop, tablet, and mobile devices. A developer writes code once, and it works everywhere with a modern browser. This is a massive advantage over native app development, which requires separate codebases for iOS, Android, and web.

Players can start a game on their desktop, continue on their phone during a commute, and finish on a tablet at home—all without any issues. This flexibility is revolutionary for gaming experiences.

Technical Innovation and Performance

Modern web technologies have made browser gaming incredibly performant. HTML5 Canvas and WebGL provide near-native graphics capabilities. JavaScript engines are blazingly fast. Browsers now support audio, video, and complex physics calculations that were unthinkable a decade ago.

This technological maturity means developers can create visually impressive, fast-paced games that rival native applications. Neon Runner City's glowing neon effects, particle systems, and 60 FPS gameplay are testament to what's possible with modern web tech.

Independent Developer Empowerment

HTML5 has democratized game development. A solo developer with passion and skill can create and publish a full game without massive budgets or corporate backing. Distribution is free—just upload to a web server. No app store gatekeeping, no expensive publishing deals.

This has led to an explosion of creative, experimental games that big studios would never greenlight. The indie HTML5 scene is thriving, and established publishers are taking notice.

Monetization Without Exploitation

HTML5 arcade games prove you can monetize games ethically. Traditional advertising (banner ads, video ads) generates revenue without turning players into victims. In-app purchases can be cosmetic and optional, not pay-to-win.

Players appreciate this honesty. Games like Neon Runner City show that you can offer entertainment for free, earn revenue from ads, and let players support creators through optional cosmetics—without exploiting anyone.

The Social Factor

Browser games are inherently social. Players can share links instantly through messaging apps, social media, or email. High scores and leaderboards create organic competition. There's no friction to playing with friends—just send them a link.

HTML5 arcade games have tapped into this social nature brilliantly. Competitive leaderboards and shareable experiences create community engagement that expensive multiplayer systems can't replicate.

Environmental and Accessibility Benefits

HTML5 games are lightweight and efficient, reducing server loads and energy consumption compared to data-heavy AAA games. For players in regions with limited bandwidth, browser games are often the only accessible option.

Additionally, web-based games are inherently more accessible. Screen readers work better, keyboard navigation is native, and developers have easier tools for implementing accessibility features. Gaming shouldn't be exclusive to people with high-end hardware.

The Future of Gaming

The arcade renaissance isn't a nostalgic blip—it's a fundamental shift in what gamers want. Speed, simplicity, and authenticity are winning over complexity and grinding. HTML5 is the perfect delivery mechanism for this shift.

We're not saying AAA gaming is going away. But the future likely includes a thriving HTML5 arcade ecosystem alongside traditional gaming. Browser games will continue improving, and developers will keep pushing the boundaries of what's possible in the browser.

Conclusion

HTML5 arcade games are popular because they represent a return to what made gaming fun in the first place: challenging gameplay, beautiful visuals, and instant access. As technology continues to advance and players become fatigued with predatory monetization, this renaissance will likely accelerate.

The arcade never really died—it just moved to the browser. And it's better than ever.

Experience HTML5 gaming at its finest: Play Neon Runner City

← Back to Blog

[V0_FILE]html:file="blog-post-3.html" isMerged="true" Top 10 Cyberpunk Games You Should Try in 2025 - Blog

Top 10 Cyberpunk Games You Should Try in 2025

Published on November 25, 2025 | 12 min read

Welcome to the Neon Future

The cyberpunk genre has exploded in popularity, offering players diverse experiences from fast-paced arcade action to deep narrative adventures. Whether you're drawn to the aesthetic of glowing neon against dark city skies or the themes of dystopia and rebellion, 2025 offers incredible cyberpunk gaming options. Here are the top 10 cyberpunk games you absolutely need to try.

1. Neon Runner City

Starting with our own gem, Neon Runner City is the perfect arcade experience for players who want pure, unfiltered action. This browser-based endless runner combines stunning neon visuals with addictive gameplay. It's free, instant to access, and captures the essence of what makes arcade games great. Why wait? You can play it right now in your browser.

2. Cyberpunk 2077: Phantom Liberty

CD Projekt Red's massive RPG has evolved significantly with the Phantom Liberty expansion. Set in the sprawling metropolis of Night City, this first-person cyberpunk experience offers hundreds of hours of story-driven content. Despite a rocky launch, the game has become the cyberpunk experience many always dreamed it would be.

3. Blade Runner 2049: Nexus Dawn

This narrative-driven adventure game captures the philosophical depth of the Blade Runner universe. With stunning visuals and immersive storytelling, it's perfect for players seeking atmospheric cyberpunk experiences over action.

4. Syndicate: Deep State

A fresh take on the classic Syndicate franchise, this tactical strategy game combines cyberpunk aesthetics with deep gameplay systems. Build your corporate empire in a neon-soaked future where corporate warfare is king.

5. Neotokyo: Ascension

This indie masterpiece is a love letter to 80s cyberpunk aesthetics. Play as a hacker navigating virtual networks with retro pixel art and synthwave soundtracks. Neotokyo: Ascension proves that indie developers can compete with AAA budgets through creativity.

6. Final Fantasy VII: Neo Midgar

Square Enix's reimagining of the Midgar section in ultra-high fidelity finally released in 2025. The cyberpunk-infused sections of this game showcase some of the most beautiful neon lighting in any video game ever created.

7. Johnny Mnemonic: Resurrection

Based on the cult classic film, this action game delivers high-octane hacking and combat sequences. With a compelling story that respects the source material, it's essential for cyberpunk fans who remember the original.

8. Tokyo Neon Wars

A futuristic bullet-hell shooter that combines bullet patterns with cyberpunk visuals. If you love challenging arcade action with a modern twist, Tokyo Neon Wars will test your reflexes and dedication.

9. NeuroLink: The Corporate Wars

This turn-based strategy game focuses on corporate espionage and board-room warfare. Build your technology empire while navigating politics and corporate sabotage in a dystopian future.

10. Acid Rain: Lost City

An exploration-focused cyberpunk adventure where you navigate a rain-soaked neon city searching for a missing hacker. Atmospheric, mysterious, and perfectly paced for players seeking contemplative experiences.

Why Cyberpunk Gaming Resonates in 2025

Cyberpunk's themes of corporate dominance, technological advancement, and individual rebellion feel increasingly relevant. The genre explores questions about identity, humanity, and freedom in an increasingly digital world. These philosophical themes, combined with stunning visual aesthetics, create experiences that resonate deeply with modern audiences.

Finding Your Perfect Cyberpunk Game

The cyberpunk genre is diverse. Action lovers should start with Neon Runner City or Tokyo Neon Wars. Story enthusiasts will appreciate Blade Runner 2049 or Johnny Mnemonic: Resurrection. Strategic thinkers should explore Syndicate: Deep State or NeuroLink. There's something for everyone.

Conclusion: The Future is Neon

2025 is a golden age for cyberpunk gaming. Whether you prefer bite-sized arcade experiences or immersive narrative adventures, the genre delivers. Start with one of these titles, then explore the others. Before long, you'll be fluent in cyberpunk gaming culture.

The neon future awaits. Ready to dive in?

Ready to experience arcade cyberpunk action? Play Neon Runner City Now

← Back to Blog

[V0_FILE]html:file="about.html" isMerged="true" About Us - Neon Runner City

About Neon Runner City

Pure arcade action meets modern HTML5 technology

Our Mission

At Neon Runner City, we believe that great games don't need massive budgets or complex mechanics. We're dedicated to creating pure, addictive arcade experiences that celebrate the simplicity and excitement of classic arcade gaming while leveraging modern web technologies.

Our mission is to prove that quality entertainment can be delivered instantly, accessed freely, and enjoyed by everyone without barriers. We're bringing arcade gaming back to what made it special: responsive controls, challenging gameplay, and pure fun.

The Vision

Neon Runner City was born from a simple vision: create a game that captures the essence of arcade nostalgia while embracing the neon aesthetic that defines cyberpunk culture. We wanted to build something that's both deeply challenging for hardcore players and immediately accessible for casual gamers.

The result is a fast-paced endless runner that demands skill and quick reflexes, wrapped in stunning neon visuals that make every gameplay session feel like you're racing through a digital cyberpunk metropolis. Every element, from the glowing UI to the particle effects, was designed with intention and polish.

Why HTML5?

We chose HTML5 and vanilla JavaScript because we believe in accessibility and instant gratification. No downloads, no installations, no app store gatekeeping. Just pure gameplay instantly available in any modern browser.

HTML5 also allowed us to create a lightweight, high-performance experience that works flawlessly on desktop, tablet, and mobile devices. The technology is mature, the performance is incredible, and the potential is limitless.

Our Values

Player-First Design: We prioritize player experience over monetization gimmicks. Ethical advertising and optional cosmetics, never pay-to-win.
Accessibility: Games should be accessible to everyone. We optimize for all devices and ensure our interfaces work for all players.
Authenticity: We celebrate authentic arcade gameplay without unnecessary complexity or grinding.
Quality: Every detail matters—from pixel-perfect collision detection to responsive controls to stunning visual effects.
Community: We're building a community of players who love pure arcade gaming and cyberpunk aesthetics.

The Future

Neon Runner City is just the beginning. We have plans to expand the game with new levels, challenges, and game modes. We're also exploring ways to deepen community engagement with leaderboards, tournaments, and player-driven content.

Beyond Neon Runner City, we want to build a studio known for creating incredible arcade experiences. Each project will push the boundaries of what's possible in browser-based gaming while maintaining our commitment to accessibility, quality, and authentic arcade gameplay.

Get in Touch

Have questions about Neon Runner City or want to share your feedback? We'd love to hear from you. Contact us here or visit our social media channels to connect with our team and the community of players who are discovering what pure arcade gaming can be.

[V0_FILE]html:file="privacy.html" isMerged="true" Privacy Policy - Neon Runner City

Privacy Policy

Last updated: November 30, 2025

1. Introduction

Neon Runner City ("we," "us," "our," or "Company") operates the neonrunnercity.com website and related applications. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website and use our services.

Please read this Privacy Policy carefully. If you do not agree with our policies and practices, please do not use our services. By accessing and using Neon Runner City, you acknowledge that you have read, understood, and agree to be bound by all the provisions of this Privacy Policy.

2. Information We Collect

2.1 Automatically Collected Information

When you visit our website, we automatically collect certain information about your device and usage patterns, including:

IP address and geolocation data
Browser type and operating system
Pages visited and time spent on our site
Referral source and exit pages
Device identifiers and mobile advertising IDs

2.2 Information from Cookies and Tracking Technologies

We use cookies, web beacons, and similar tracking technologies to remember user preferences, track usage patterns, and deliver targeted advertising. Cookies are small files stored on your device that enable us to remember your preferences and track your interactions with our site.

2.3 Locally Stored Information

Your high scores and game preferences are stored locally in your browser using localStorage technology. This information never leaves your device and is never sent to our servers.

2.4 Information You Voluntarily Provide

If you contact us through our contact form or email, we may collect:

Your name and email address
Your message content
Any attachments you provide

3. How We Use Your Information

We use the information we collect for the following purposes:

To improve and optimize our website and services
To analyze usage patterns and user behavior
To deliver personalized content and advertising
To respond to your inquiries and customer service requests
To prevent fraudulent transactions and protect against abuse
To comply with legal obligations
To send you promotional materials and updates (with consent)

4. Google AdSense and Third-Party Advertising

Neon Runner City uses Google AdSense to display advertisements on our website. Google AdSense may collect and use information about your browsing behavior to display targeted advertisements. This information may include:

IP address
Browser type and operating system
Pages visited on our site
Cookies and advertising identifiers

Google may also use information collected through other websites and services to build a profile of your interests and deliver relevant advertisements.

For more information about Google's advertising practices and to opt out of personalized advertising, visit Google's Ads Settings or Privacy Policy.

5. Third-Party Partners and Data Sharing

We may share your information with third parties in limited circumstances:

Advertising Partners: We share information with advertising networks and publishers to deliver relevant ads
Analytics Providers: We use analytics services to understand user behavior and improve our services
Legal Compliance: We may disclose information if required by law or to protect our legal rights
Service Providers: We may share information with vendors who perform services on our behalf

We do not sell your personal information to third parties for their independent marketing purposes.

6. Data Security

We implement appropriate technical and organizational security measures to protect your information against unauthorized access, alteration, disclosure, or destruction. However, no internet-based service is completely secure. While we strive to protect your information, we cannot guarantee absolute security.

7. Cookies and Tracking Technologies

We use the following types of cookies:

Essential Cookies: Required for the website to function properly
Performance Cookies: Help us understand how visitors use our site
Functional Cookies: Remember your preferences and settings
Advertising Cookies: Used to deliver targeted advertisements

Most web browsers allow you to control cookies through your browser settings. You can choose to reject or remove cookies, but this may affect your ability to use certain features of our website.

8. Your Privacy Rights

Depending on your location, you may have certain rights regarding your personal information:

Right to Access: Request access to the personal information we hold about you
Right to Correct: Request correction of inaccurate information
Right to Delete: Request deletion of your personal information
Right to Opt-Out: Opt out of personalized advertising and marketing communications

To exercise these rights, please contact us at the address provided in Section 11 below.

9. Children's Privacy

Neon Runner City is not intended for children under 13 years of age. We do not knowingly collect personal information from children under 13. If we become aware that we have collected information from a child under 13, we will take steps to delete such information and terminate the child's account.

10. International Data Transfers

Your information may be transferred to and stored in countries other than your country of residence. These countries may not have data protection laws equivalent to your home country. By using Neon Runner City, you consent to such transfers.

11. Contact Us

If you have questions about this Privacy Policy or wish to exercise your privacy rights, please contact us at:

Email: privacy@neonrunnercity.com
Website: www.neonrunnercity.com
Address: Neon Runner City, [Your Business Address]

12. Changes to This Privacy Policy

We may update this Privacy Policy periodically to reflect changes in our practices or legal requirements. We will notify you of significant changes by updating the "Last Updated" date and, where required, by obtaining your consent. Your continued use of Neon Runner City following such changes constitutes your acceptance of the updated Privacy Policy.

[V0_FILE]html:file="terms.html" isMerged="true" Terms of Service - Neon Runner City

Terms of Service

Last updated: November 30, 2025

1. Acceptance of Terms

By accessing and using Neon Runner City ("Service"), you agree to be bound by these Terms of Service. If you do not agree to abide by the above, please do not use this service.

2. Use License

Permission is granted to temporarily download one copy of the materials (information or software) on Neon Runner City for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:

Modifying or copying the materials
Using the materials for any commercial purpose, or for any public display (commercial or non-commercial)
Attempting to decompile or reverse engineer any software contained on Neon Runner City
Removing any copyright or other proprietary notations from the materials
Transferring the materials to another person or "mirroring" the materials on any other server
Violating any applicable laws or regulations

3. Disclaimer

The materials on Neon Runner City are provided on an 'as is' basis. Neon Runner City makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.

4. Limitations

In no event shall Neon Runner City or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption, arising out of the use or inability to use the materials on Neon Runner City, even if Neon Runner City or a Neon Runner City authorized representative has been notified orally or in writing of the possibility of such damage.

5. Accuracy of Materials

The materials appearing on Neon Runner City could include technical, typographical, or photographic errors. Neon Runner City does not warrant that any of the materials on its website are accurate, complete, or current. Neon Runner City may make changes to the materials contained on its website at any time without notice.

6. Materials and Content

The materials on Neon Runner City are protected by applicablecopyrights and trade mark law. All content, features, and functionality (including but not limited to all information, software, text, displays, images, video and audio) and the design, selection and arrangement thereof, are owned by Neon Runner City, its licensors or other providers of such material.

7. Limitations on Use

You may not:

Reproduce, duplicate, copy, sell, resell or exploit any portion of Neon Runner City
Use Neon Runner City or its content for any unlawful purpose or in violation of any local, state, national or international law
Harass, abuse, insult, harm, defame, slander, disparage, intimidate or discriminate based on gender, sexual orientation, religion, ethnicity, race, age, national origin, or disability
Submit false or misleading information
Upload viruses or any other malicious code
Collect or track personal information of others without consent

8. User Contributions

If you submit, post or display content on Neon Runner City, you grant us a worldwide, non-exclusive, royalty-free license to use, reproduce, adapt, publish, translate and distribute it in any media. You represent and warrant that:

You own or have the necessary rights to the content you submit
Your content does not violate the rights of any third party
Your content does not violate any applicable laws or regulations
Your content is not obscene, threatening, abusive, or defamatory

9. Revision of Terms

Neon Runner City may revise these terms of service for its website at any time without notice. By using this website, you are agreeing to be bound by the then current version of these terms of service.

10. Governing Law

These terms and conditions are governed by and construed in accordance with the laws of [Your Jurisdiction], and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.

11. Disclaimer of Warranties

Neon Runner City is provided on an "AS-IS" and "AS AVAILABLE" basis. Neon Runner City makes no representations or warranties of any kind, express or implied, as to the operation of Neon Runner City or the information, content, materials, or products included on Neon Runner City. To the fullest extent permissible by applicable law, Neon Runner City disclaims all warranties, express or implied, including but not limited to implied warranties of merchantability and fitness for a particular purpose.

12. Limitation of Liability

In no event will Neon Runner City be liable for any damages whatsoever, including but not limited to any direct, indirect, consequential, special, exemplary or other damages arising out of or in connection with the use of or inability to use Neon Runner City or the materials on Neon Runner City, even if Neon Runner City has been advised of the possibility of such damages.

13. Indemnification

You agree to indemnify and hold harmless Neon Runner City and its officers, directors, employees, and agents from any and all claims, damages, losses, costs, and expenses (including reasonable attorneys' fees) arising out of or resulting from your violation of these Terms of Service or your use of Neon Runner City.

14. Severability

If any provision of these Terms of Service is found to be invalid or unenforceable, the remaining provisions shall remain in full force and effect.

15. Contact Information

If you have any questions about these Terms of Service, please contact us at:

Email: support@neonrunnercity.com
Website: www.neonrunnercity.com

[V0_FILE]html:file="contact.html" isMerged="true" Contact Us - Neon Runner City

Get in Touch

Have questions or feedback? We'd love to hear from you!

Send us a Message

We'll get back to you as soon as possible!

Other Ways to Reach Us

Email

support@neonrunnercity.com

For general inquiries and support

Business Inquiries

business@neonrunnercity.com

For partnerships and collaborations

Privacy Questions

privacy@neonrunnercity.com

For data and privacy-related inquiries

Feedback & Bug Reports

feedback@neonrunnercity.com

Help us improve the game

Response Time

We typically respond to all inquiries within 24-48 hours during business days.

Frequently Asked Questions

Is Neon Runner City completely free?

Yes! The game is completely free to play. We support the game through ethical advertising. Optional cosmetic skins are available for purchase, but they don't affect gameplay.

How do I save my high score?

Your high scores are automatically saved to your browser's local storage. They persist between sessions on the same device and browser.

Can I play on mobile?

Neon Runner City is fully responsive and works on mobile phones and tablets. Use swipe controls to navigate your cube.

Do you collect personal data?

We collect minimal data for analytics and advertising purposes. Your high score is stored locally and never sent to our servers. See our Privacy Policy for full details.

Is there a Discord or community?

We're building our community! Follow us on social media for updates and announcements about community platforms and leaderboards.

Can I stream or make videos of Neon Runner City?

We'd love to see you stream or create content featuring Neon Runner City. Please tag us and let us know!

[V0_FILE]css:file="style.css" isEdit="true" /* ===== RESET & GLOBALS ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Courier New", monospace; background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%); color: #e0e0e0; line-height: 1.6; } /* ===== NAVIGATION BAR ===== */ .navbar { background: rgba(10, 14, 39, 0.95); border-bottom: 2px solid #00ffff; position: sticky; top: 0; z-index: 100; box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); } .nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; } .logo { font-size: 1.5rem; font-weight: bold; color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); letter-spacing: 2px; } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { color: #e0e0e0; text-decoration: none; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; position: relative; } .nav-links a:hover, .nav-links a.active { color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); } .nav-links a.active::after { content: ""; position: absolute; bottom: -8px; left: 0; right: 0; height: 2px; background: #00ffff; box-shadow: 0 0 10px rgba(0, 255, 255, 0.6); } .hamburger { display: none; flex-direction: column; cursor: pointer; } .hamburger span { width: 25px; height: 3px; background: #00ffff; margin: 5px 0; border-radius: 3px; transition: all 0.3s ease; } @media (max-width: 768px) { .hamburger { display: flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: rgba(10, 14, 39, 0.98); gap: 0; padding: 2rem 1rem; display: none; } .nav-links.active { display: flex; } .nav-links a { padding: 1rem 0; border-bottom: 1px solid rgba(0, 255, 255, 0.2); } } /* ===== MAIN CONTENT ===== */ main { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; min-height: calc(100vh - 200px); } /* ===== FOOTER ===== */ .footer { background: rgba(10, 14, 39, 0.95); border-top: 2px solid #ff00ff; padding: 3rem 2rem 1rem; margin-top: 3rem; color: #888; font-size: 0.85rem; } .footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h4 { color: #00ffff; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.5rem; } .footer-section a { color: #888; text-decoration: none; transition: all 0.3s ease; } .footer-section a:hover { color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255, 0, 255, 0.2); color: #555; } /* ===== HERO SECTIONS ===== */ .hero, .blog-hero, .about-hero, .contact-hero { text-align: center; padding: 4rem 2rem; background: linear-gradient(135deg, rgba(0, 255, 255, 0.05) 0%, rgba(255, 0, 255, 0.05) 100%); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 8px; margin-bottom: 3rem; } .hero h1, .blog-hero h1, .about-hero h1, .contact-hero h1 { font-size: 3rem; margin-bottom: 1rem; background: linear-gradient(90deg, #00ffff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 30px rgba(0, 255, 255, 0.3); letter-spacing: 2px; } .tagline, .blog-hero p, .about-hero p, .contact-hero p { font-size: 1.3rem; color: #00ffff; margin-bottom: 1.5rem; text-shadow: 0 0 10px rgba(0, 255, 255, 0.4); } .hero-description { font-size: 1rem; color: #ccc; max-width: 600px; margin: 0 auto 2rem; line-height: 1.8; } .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .hero-content { text-align: left; } .hero-visual { display: flex; justify-content: center; align-items: center; } .neon-cube { width: 150px; height: 150px; background: #00ff88; box-shadow: 0 0 30px rgba(0, 255, 136, 0.8), inset 0 0 20px rgba(0, 255, 136, 0.3); border-radius: 10px; animation: floatCube 3s ease-in-out infinite; } @keyframes floatCube { 0%, 100% { transform: translateY(0px) rotateZ(0deg); } 50% { transform: translateY(-20px) rotateZ(5deg); } } @media (max-width: 768px) { .hero { grid-template-columns: 1fr; } .hero h1, .blog-hero h1, .about-hero h1, .contact-hero h1 { font-size: 2rem; } } /* ===== BUTTONS ===== */ .btn { padding: 12px 24px; font-size: 1rem; font-weight: bold; border: 2px solid; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; font-family: "Courier New", monospace; text-decoration: none; display: inline-block; } .btn-primary { background: linear-gradient(90deg, #00ffff, #00ff88); color: #000; border-color: #00ffff; box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); } .btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 136, 0.5); } .btn-secondary { background: transparent; color: #ff00ff; border-color: #ff00ff; box-shadow: 0 0 15px rgba(255, 0, 255, 0.4); } .btn-secondary:hover { background: rgba(255, 0, 255, 0.1); box-shadow: 0 0 25px rgba(255, 0, 255, 0.6); } .btn-small { padding: 8px 16px; font-size: 0.9rem; } /* ===== FEATURES SECTION ===== */ .features { margin: 3rem 0; } .features h2, .how-to-play h2, .game-instructions h2, .game-features h2, .blog h2, main h2 { font-size: 2rem; margin-bottom: 2rem; color: #00ffff; text-shadow: 0 0 15px rgba(0, 255, 255, 0.4); border-bottom: 2px solid rgba(0, 255, 255, 0.3); padding-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .feature-card { padding: 2rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 8px; transition: all 0.3s ease; } .feature-card:hover { border-color: #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); transform: translateY(-5px); background: rgba(0, 255, 136, 0.1); } .feature-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #00ffff, #00ff88); border-radius: 8px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; } .feature-card h3 { color: #00ffff; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } .feature-card p { color: #bbb; line-height: 1.8; } /* ===== HOW TO PLAY SECTION ===== */ .controls-container, .instruction-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 2rem 0; } .control-item, .instruction-box { padding: 2rem; background: rgba(255, 0, 255, 0.05); border: 1px solid rgba(255, 0, 255, 0.3); border-radius: 8px; } .control-item h3, .instruction-box h3 { color: #ff00ff; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } .control-item ul, .instruction-box ul { list-style: none; padding-left: 1rem; } .control-item li, .instruction-box li { color: #ccc; margin-bottom: 0.7rem; position: relative; padding-left: 1.5rem; } .control-item li::before, .instruction-box li::before { content: "▸"; position: absolute; left: 0; color: #00ffff; } .gameplay-tips { padding: 2rem; background: rgba(0, 255, 136, 0.1); border: 2px solid rgba(0, 255, 136, 0.3); border-radius: 8px; margin: 2rem 0; } .gameplay-tips h3 { color: #00ff88; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } .gameplay-tips ul { list-style: none; padding-left: 1rem; } .gameplay-tips li { color: #ccc; margin-bottom: 0.7rem; position: relative; padding-left: 1.5rem; } .gameplay-tips li::before { content: "✓"; position: absolute; left: 0; color: #00ff88; } /* ===== CTA SECTION ===== */ .cta-section { text-align: center; padding: 3rem; background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(255, 0, 255, 0.1) 100%); border: 2px solid rgba(0, 255, 255, 0.3); border-radius: 8px; margin: 3rem 0; } .cta-section h2 { border: none; padding-bottom: 0; margin-bottom: 1rem; } .cta-section p { font-size: 1.1rem; color: #ccc; margin-bottom: 1.5rem; } /* ===== GAME PAGE ===== */ .game-page main { padding: 2rem 1rem; } .ad-banner { width: 100%; height: 90px; background: linear-gradient(90deg, #1a1f3a 0%, #2a2f4a 50%, #1a1f3a 100%); border: 1px solid #444; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; border-radius: 4px; margin: 1rem 0; text-transform: uppercase; letter-spacing: 1px; } .ad-banner p { text-shadow: 0 0 10px rgba(0, 255, 255, 0.2); } .game-wrapper { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; margin: 2rem 0; } .game-content { display: flex; justify-content: center; align-items: center; } #gameCanvas { display: block; background: #0a0e27; border: 2px solid #ff00ff; box-shadow: 0 0 20px rgba(255, 0, 255, 0.4); image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; height: auto; } .game-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .sidebar-card { padding: 1.5rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 8px; } .sidebar-card h3 { color: #00ffff; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; } .sidebar-card p { color: #ccc; font-size: 0.85rem; line-height: 1.6; } .sidebar-card ul { list-style: none; font-size: 0.85rem; } .sidebar-card li { color: #ccc; margin-bottom: 0.5rem; } .game-instructions { margin: 3rem 0; } .instructions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 2rem 0; } .game-features ul { list-style: none; padding-left: 1rem; margin: 1.5rem 0; } .game-features li { color: #ccc; margin-bottom: 0.7rem; position: relative; padding-left: 1.5rem; } .game-features li::before { content: "▹"; position: absolute; left: 0; color: #ff00ff; } @media (max-width: 1024px) { .game-wrapper { grid-template-columns: 1fr; } .ad-sidebar { display: none; } } /* ===== BLOG SECTION ===== */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin: 2rem 0; } .blog-card { background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; } .blog-card:hover { border-color: #00ffff; box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); transform: translateY(-5px); } .blog-image { width: 100%; height: 200px; overflow: hidden; background: rgba(0, 255, 136, 0.1); } .blog-image img { width: 100%; height: 100%; object-fit: cover; } .blog-content { padding: 2rem; } .blog-content h2 { border: none; padding-bottom: 0; margin-bottom: 0.5rem; font-size: 1.3rem; } .blog-content h2 a { color: #00ffff; text-decoration: none; transition: all 0.3s ease; } .blog-content h2 a:hover { color: #00ff88; text-shadow: 0 0 10px rgba(0, 255, 136, 0.6); } .blog-meta { font-size: 0.85rem; color: #888; margin-bottom: 1rem; } .blog-content p { color: #bbb; line-height: 1.8; margin-bottom: 1rem; } .read-more { color: #00ffff; text-decoration: none; font-weight: bold; transition: all 0.3s ease; display: inline-block; margin-top: 0.5rem; } .read-more:hover { color: #00ff88; text-shadow: 0 0 10px rgba(0, 255, 136, 0.6); transform: translateX(5px); } /* ===== BLOG POST PAGE ===== */ .blog-post { max-width: 900px; margin: 0 auto; } .blog-post article { background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 8px; padding: 3rem; } .blog-post-header { text-align: center; margin-bottom: 2rem; } .blog-post-header h1 { font-size: 2.2rem; color: #00ffff; margin-bottom: 0.5rem; text-shadow: 0 0 15px rgba(0, 255, 255, 0.4); } .blog-post-image { width: 100%; height: 400px; overflow: hidden; margin: 2rem 0; border-radius: 8px; } .blog-post-image img { width: 100%; height: 100%; object-fit: cover; } .blog-post-content h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; } .blog-post-content p { color: #ccc; margin-bottom: 1rem; line-height: 1.9; } .blog-post-content ul { list-style: none; padding-left: 1.5rem; margin: 1.5rem 0; } .blog-post-content li { color: #ccc; margin-bottom: 0.8rem; position: relative; padding-left: 1rem; } .blog-post-content li::before { content: "▸"; position: absolute; left: 0; color: #00ffff; } .blog-cta { margin-top: 2rem; padding: 2rem; background: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.3); border-radius: 8px; text-align: center; } .blog-nav { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(0, 255, 255, 0.2); } .blog-nav a { color: #00ffff; text-decoration: none; font-weight: bold; transition: all 0.3s ease; } .blog-nav a:hover { color: #00ff88; text-shadow: 0 0 10px rgba(0, 255, 136, 0.6); transform: translateX(-5px); } /* ===== ABOUT PAGE ===== */ .about-content { max-width: 900px; margin: 0 auto; } .about-section { background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 8px; padding: 2rem; margin-bottom: 2rem; } .about-section h2 { border: none; padding-bottom: 0; margin-bottom: 1rem; font-size: 1.5rem; } .about-section p { color: #ccc; line-height: 1.9; margin-bottom: 1rem; } .about-section ul { list-style: none; padding-left: 1rem; } .about-section li { color: #ccc; margin-bottom: 0.8rem; position: relative; padding-left: 1.5rem; } .about-section li::before { content: "◆"; position: absolute; left: 0; color: #00ff88; } .about-section a { color: #00ffff; text-decoration: none; } .about-section a:hover { text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); } /* ===== CONTACT PAGE ===== */ .contact-container { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; max-width: 1000px; margin: 2rem auto; } .contact-form-wrapper { background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 8px; padding: 2rem; } .contact-form-wrapper h2 { border: none; padding-bottom: 0; margin-bottom: 1.5rem; font-size: 1.5rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; color: #00ffff; margin-bottom: 0.5rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.8rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 255, 255, 0.2); color: #e0e0e0; border-radius: 4px; font-family: "Courier New", monospace; font-size: 1rem; transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #00ffff; box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); background: rgba(0, 0, 0, 0.5); } .form-note { color: #888; font-size: 0.9rem; margin-top: 1rem; } .contact-info { display: flex; flex-direction: column; gap: 1.5rem; } .contact-info h2 { border: none; padding-bottom: 0; margin: 0; font-size: 1.5rem; } .info-card { padding: 1.5rem; background: rgba(255, 0, 255, 0.05); border: 1px solid rgba(255, 0, 255, 0.3); border-radius: 8px; } .info-card h3 { color: #ff00ff; margin-bottom: 0.7rem; text-transform: uppercase; letter-spacing: 1px; } .info-card p { color: #ccc; font-size: 0.9rem; margin-bottom: 0.5rem; } .info-card a { color: #00ffff; text-decoration: none; } .info-card a:hover { text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); } .faq-section { max-width: 1000px; margin: 3rem auto; } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin: 2rem 0; } .faq-item { padding: 2rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 8px; } .faq-item h3 { color: #00ffff; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; } .faq-item p { color: #ccc; line-height: 1.8; } /* ===== LEGAL PAGES ===== */ .legal-page { max-width: 900px; margin: 0 auto; } .legal-page h1 { font-size: 2.2rem; color: #00ffff; margin-bottom: 0.5rem; text-shadow: 0 0 15px rgba(0, 255, 255, 0.4); } .last-updated { color: #888; font-size: 0.9rem; margin-bottom: 2rem; } .legal-page section { margin-bottom: 2rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 8px; padding: 2rem; } .legal-page h2 { border: none; padding-bottom: 0; margin-bottom: 1rem; font-size: 1.3rem; } .legal-page h3 { color: #00ff88; margin-bottom: 0.5rem; margin-top: 1rem; font-size: 1.1rem; } .legal-page p { color: #ccc; line-height: 1.9; margin-bottom: 1rem; } .legal-page ul { list-style: none; padding-left: 1rem; margin: 1rem 0; } .legal-page li { color: #ccc; margin-bottom: 0.7rem; position: relative; padding-left: 1.5rem; } .legal-page li::before { content: "◆"; position: absolute; left: 0; color: #ff00ff; } .legal-page a { color: #00ffff; text-decoration: none; } .legal-page a:hover { text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); } /* ===== MODALS & GAME UI ===== */ .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; padding: 20px; font-family: "Courier New", monospace; } .modal.hidden { display: none; } .modal-content { background: linear-gradient(135deg, #1a0a2e 0%, #2a1a3e 100%); border: 3px solid #00ffff; padding: 30px; border-radius: 8px; max-width: 500px; width: 100%; box-shadow: 0 0 40px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(255, 0, 255, 0.1); text-align: center; } .modal-content h1 { font-size: 48px; margin-bottom: 30px; text-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(255, 0, 255, 0.6); background: linear-gradient(90deg, #00ffff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .modal-content h2 { font-size: 32px; color: #ff00ff; margin-bottom: 20px; text-shadow: 0 0 20px rgba(255, 0, 255, 0.8); } .modal-buttons { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; } .btn-primary, .btn-secondary { padding: 12px 24px; font-size: 14px; font-weight: bold; border: 2px solid; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; font-family: "Courier New", monospace; } .btn-primary { background: linear-gradient(90deg, #00ffff, #00ff88); color: #000; border-color: #00ffff; box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); } .btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(0, 255, 255, 0.8); } .btn-secondary { background: transparent; color: #ff00ff; border-color: #ff00ff; box-shadow: 0 0 15px rgba(255, 0, 255, 0.4); } .btn-secondary:hover { background: rgba(255, 0, 255, 0.1); box-shadow: 0 0 25px rgba(255, 0, 255, 0.6); } .score-display { font-size: 24px; color: #ffff00; margin: 20px 0; text-shadow: 0 0 10px rgba(255, 255, 0, 0.6); } .new-high-score { color: #ffff00; font-weight: bold; font-size: 16px; animation: pulse 0.6s ease-in-out infinite; text-shadow: 0 0 15px rgba(255, 255, 0, 0.8); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .controls-info { font-size: 12px; color: #888; margin-top: 15px; line-height: 1.6; } .shop-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 20px 0; width: 100%; } .skin-item { padding: 15px; border: 2px solid #444; border-radius: 4px; background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 15px; } .skin-item:hover { border-color: #888; background: rgba(255, 255, 255, 0.05); } .skin-item.active { border-color: #00ffff; background: rgba(0, 255, 255, 0.1); box-shadow: 0 0 15px rgba(0, 255, 255, 0.4); } .skin-preview { width: 40px; height: 40px; border-radius: 4px; } .skin-info { flex: 1; text-align: left; } .skin-name { font-weight: bold; color: #00ffff; font-size: 14px; } .skin-price { font-size: 12px; color: #888; margin-top: 4px; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { main { padding: 2rem 1rem; } .contact-container { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } #gameCanvas { max-width: 100%; height: auto; } .modal-content { padding: 20px; } .modal-content h1 { font-size: 36px; } .modal-content h2 { font-size: 24px; } } @media (max-width: 480px) { .logo { font-size: 1.1rem; } .nav-links { gap: 1rem; } main { padding: 1.5rem 1rem; } .hero h1, .blog-hero h1, .about-hero h1, .contact-hero h1 { font-size: 1.5rem; } .features h2, .how-to-play h2, main h2 { font-size: 1.3rem; } .btn { padding: 10px 16px; font-size: 0.9rem; } } [V0_FILE]javascript:file="script.js" isEdit="true" isQuickEdit="true" // ===== GAME CONSTANTS ===== const GAME_WIDTH = 400 const GAME_HEIGHT = 600 const PLAYER_WIDTH = 30 const PLAYER_HEIGHT = 30 const LANE_WIDTH = GAME_WIDTH / 3 const BASE_SPEED = 5 const DIFFICULTY_INCREASE = 0.015 // ===== GAME STATE ===== const gameState = { current: "menu", // menu, playing, gameover, paused, shop playerLane: 1, speed: BASE_SPEED, score: 0, highScore: localStorage.getItem("neonRunnerHighScore") || 0, gameObjects: [], particles: [], spawnCounter: 0, boostActive: false, boostTimer: 0, isPaused: false, selectedSkin: 0, level: 1, } // Skin colors const SKINS = [ { name: "CYAN PHANTOM", body: "#00ff88", glow: "rgba(0, 255, 136, 0.6)", price: "FREE" }, { name: "MAGENTA RIDER", body: "#ff00ff", glow: "rgba(255, 0, 255, 0.6)", price: "$4.99" }, { name: "ORANGE BLAZE", body: "#ffaa00", glow: "rgba(255, 170, 0, 0.6)", price: "$9.99" }, ] // ===== DOM ELEMENTS ===== const canvas = document.getElementById("gameCanvas") const ctx = canvas ? canvas.getContext("2d") : null // ===== MODAL HELPERS ===== function createModal(title, content, buttons) { const modal = document.createElement("div") modal.className = "modal" modal.innerHTML = ` ` document.body.appendChild(modal) return modal } function removeAllModals() { document.querySelectorAll(".modal").forEach((m) => m.remove()) } // ===== GAME LOGIC ===== class GameObject { constructor(x, y, type) { this.x = x this.y = y this.width = 30 this.height = 30 this.type = type // 'obstacle' or 'boost' } update() { this.y += gameState.speed } draw(ctx) { if (this.type === "obstacle") { ctx.fillStyle = "#ff0055" ctx.shadowColor = "rgba(255, 0, 85, 0.8)" ctx.shadowBlur = 15 ctx.fillRect(this.x, this.y, this.width, this.height) } else if (this.type === "boost") { ctx.fillStyle = "#ffff00" ctx.shadowColor = "rgba(255, 255, 0, 0.8)" ctx.shadowBlur = 15 drawStar(ctx, this.x + this.width / 2, this.y + this.height / 2, 5, 12, 5) } ctx.shadowColor = "transparent" } isOffscreen() { return this.y > GAME_HEIGHT } collidsWith(x, y, w, h) { return x < this.x + this.width && x + w > this.x && y < this.y + this.height && y + h > this.y } } class Particle { constructor(x, y, color) { this.x = x this.y = y this.vx = (Math.random() - 0.5) * 4 this.vy = (Math.random() - 0.5) * 4 this.life = 1 this.color = color } update() { this.x += this.vx this.y += this.vy this.vy += 0.1 this.life -= 0.02 } draw(ctx) { ctx.fillStyle = this.color ctx.globalAlpha = this.life ctx.fillRect(this.x, this.y, 4, 4) ctx.globalAlpha = 1 } isAlive() { return this.life > 0 } } function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) { let rot = (Math.PI / 2) * 3 const step = Math.PI / spikes ctx.beginPath() ctx.moveTo(cx, cy - outerRadius) for (let i = 0; i < spikes; i++) { ctx.lineTo(cx + Math.cos(rot) * outerRadius, cy + Math.sin(rot) * outerRadius) rot += step ctx.lineTo(cx + Math.cos(rot) * innerRadius, cy + Math.sin(rot) * innerRadius) rot += step } ctx.lineTo(cx, cy - outerRadius) ctx.closePath() ctx.fill() } function spawnObject() { gameState.spawnCounter++ const difficulty = Math.max(20, 60 - Math.floor(gameState.score / 100)) if (gameState.spawnCounter > difficulty) { const type = Math.random() > 0.92 ? "boost" : "obstacle" const lane = Math.floor(Math.random() * 3) gameState.gameObjects.push(new GameObject(lane * LANE_WIDTH + LANE_WIDTH / 2 - 15, -40, type)) gameState.spawnCounter = 0 } } function updateGameLogic() { if (gameState.current !== "playing" || gameState.isPaused) return spawnObject() gameState.speed = BASE_SPEED + (gameState.score / 1000) * 3 gameState.level = Math.floor(gameState.score / 500) + 1 gameState.gameObjects.forEach((obj) => obj.update()) gameState.gameObjects = gameState.gameObjects.filter((obj) => !obj.isOffscreen()) const playerX = gameState.playerLane * LANE_WIDTH + LANE_WIDTH / 2 - PLAYER_WIDTH / 2 const playerY = GAME_HEIGHT - 60 gameState.gameObjects.forEach((obj, index) => { if (obj.collidsWith(playerX, playerY, PLAYER_WIDTH, PLAYER_HEIGHT)) { if (obj.type === "obstacle") { endGame() } else if (obj.type === "boost") { gameState.boostActive = true gameState.boostTimer = 300 // 5 seconds at 60 FPS // Create particles for (let i = 0; i < 10; i++) { gameState.particles.push( new Particle( playerX + PLAYER_WIDTH / 2, playerY + PLAYER_HEIGHT / 2, `hsl(${Math.random() * 60 + 280}, 100%, 60%)`, ), ) } } gameState.gameObjects.splice(index, 1) } }) if (gameState.boostActive) { gameState.boostTimer-- if (gameState.boostTimer <= 0) { gameState.boostActive = false } } gameState.particles = gameState.particles.filter((p) => p.isAlive()) gameState.particles.forEach((p) => p.update()) gameState.score += 1 } function renderGame() { if (!ctx) return // Clear canvas ctx.fillStyle = "#0a0e27" ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT) // Draw animated grid background ctx.strokeStyle = "rgba(0, 255, 255, 0.1)" ctx.lineWidth = 1 for (let i = 0; i < GAME_HEIGHT; i += 40) { ctx.beginPath() ctx.moveTo(0, i) ctx.lineTo(GAME_WIDTH, i) ctx.stroke() } // Draw lane dividers ctx.strokeStyle = "rgba(255, 0, 255, 0.3)" ctx.lineWidth = 2 ctx.setLineDash([10, 10]) for (let i = 1; i < 3; i++) { ctx.beginPath() ctx.moveTo(i * LANE_WIDTH, 0) ctx.lineTo(i * LANE_WIDTH, GAME_HEIGHT) ctx.stroke() } ctx.setLineDash([]) // Draw player const playerX = gameState.playerLane * LANE_WIDTH + LANE_WIDTH / 2 - PLAYER_WIDTH / 2 const playerY = GAME_HEIGHT - 60 const skin = SKINS[gameState.selectedSkin] ctx.shadowColor = skin.glow ctx.shadowBlur = 20 ctx.fillStyle = skin.body ctx.fillRect(playerX, playerY, PLAYER_WIDTH, PLAYER_HEIGHT) ctx.shadowColor = "transparent" // Draw boost indicator if (gameState.boostActive) { ctx.strokeStyle = skin.body ctx.lineWidth = 2 ctx.globalAlpha = 0.6 for (let i = 0; i < 3; i++) { ctx.strokeRect(playerX - 5 - i * 4, playerY - 5 - i * 4, PLAYER_WIDTH + 10 + i * 8, PLAYER_HEIGHT + 10 + i * 8) } ctx.globalAlpha = 1 } // Draw game objects gameState.gameObjects.forEach((obj) => obj.draw(ctx)) // Draw particles gameState.particles.forEach((p) => p.draw(ctx)) // Draw UI ctx.fillStyle = "#00ffff" ctx.font = "bold 14px monospace" ctx.fillText(`SCORE: ${gameState.score}`, 10, 25) ctx.fillText(`LEVEL: ${gameState.level}`, 10, 45) ctx.fillText(`SPEED: ${gameState.speed.toFixed(1)}`, 10, 65) if (gameState.boostActive) { ctx.fillStyle = "#ffff00" ctx.fillText(`BOOST: ${Math.ceil(gameState.boostTimer / 60)}s`, GAME_WIDTH - 140, 25) } // Update stats panel const currentSkinEl = document.getElementById("currentSkin") if (currentSkinEl) { currentSkinEl.textContent = skin.name } } function gameLoop() { updateGameLogic() renderGame() if (gameState.current === "playing") { requestAnimationFrame(gameLoop) } } // ===== GAME SCREENS ===== function showMenuScreen() { removeAllModals() gameState.current = "menu" if (ctx) renderGame() const buttonsHtml = ` ` const contentHtml = `

Use Arrow Keys or A/D to Move

HIGH SCORE

${gameState.highScore}

P = Pause • Collect ⭐ for Speed Boost
Mobile: Swipe Left/Right to Move

` createModal("NEON RUNNER CITY", contentHtml, buttonsHtml) } function startGame() { removeAllModals() gameState.current = "playing" gameState.playerLane = 1 gameState.speed = BASE_SPEED gameState.score = 0 gameState.gameObjects = [] gameState.particles = [] gameState.spawnCounter = 0 gameState.boostActive = false gameState.boostTimer = 0 gameState.level = 1 gameLoop() } function endGame() { gameState.current = "gameover" const isNewHighScore = gameState.score > gameState.highScore if (isNewHighScore) { gameState.highScore = gameState.score localStorage.setItem("neonRunnerHighScore", gameState.score) } removeAllModals() if (ctx) renderGame() const newScoreHtml = isNewHighScore ? '

🎉 NEW HIGH SCORE! 🎉

' : "" const contentHtml = `

FINAL SCORE: ${gameState.score}

LEVEL REACHED: ${gameState.level}

${newScoreHtml} ` const buttonsHtml = ` ` createModal("GAME OVER", contentHtml, buttonsHtml) } function showPauseScreen() { const buttonsHtml = ` ` createModal("PAUSED", '

Game paused

', buttonsHtml) } function resumeGame() { removeAllModals() gameState.current = "playing" gameState.isPaused = false gameLoop() } function showShopScreen() { removeAllModals() gameState.current = "shop" if (ctx) renderGame() let skinsHtml = "" SKINS.forEach((skin, index) => { const isActive = gameState.selectedSkin === index skinsHtml += `

${skin.name}

${skin.price}

${isActive ? '

✓ ACTIVE

' : ""}

` }) const contentHtml = `

${skinsHtml}

` const buttonsHtml = `` createModal("SHOP", contentHtml, buttonsHtml) } function selectSkin(index) { gameState.selectedSkin = index showShopScreen() } // ===== KEYBOARD & CONTROLS ===== document.addEventListener("keydown", (e) => { if (gameState.current !== "playing") return if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A") { if (gameState.playerLane > 0) gameState.playerLane-- } else if (e.key === "ArrowRight" || e.key === "d" || e.key === "D") { if (gameState.playerLane < 2) gameState.playerLane++ } else if (e.key === "p" || e.key === "P") { gameState.isPaused = !gameState.isPaused if (gameState.isPaused) { showPauseScreen() } else { removeAllModals() gameLoop() } } }) // Touch/Swipe Controls let touchStartX = 0 document.addEventListener("touchstart", (e) => { touchStartX = e.touches[0].clientX }) document.addEventListener("touchmove", (e) => { if (gameState.current !== "playing" || !touchStartX) return const touchCurrentX = e.touches[0].clientX const diff = touchCurrentX - touchStartX if (diff < -30 && gameState.playerLane < 2) { gameState.playerLane++ touchStartX = touchCurrentX } else if (diff > 30 && gameState.playerLane > 0) { gameState.playerLane-- touchStartX = touchCurrentX } }) document.addEventListener("touchend", () => { touchStartX = 0 }) // ===== INITIALIZATION ===== window.addEventListener("load", () => { // Mobile menu toggle const hamburger = document.querySelector(".hamburger") const navLinks = document.querySelector(".nav-links") if (hamburger) { hamburger.addEventListener("click", () => { navLinks.classList.toggle("active") hamburger.classList.toggle("active") }) // Close menu when link is clicked document.querySelectorAll(".nav-links a").forEach((link) => { link.addEventListener("click", () => { navLinks.classList.remove("active") hamburger.classList.remove("active") }) }) } // Set active nav link updateActiveNavLink() // Only show game menu if canvas exists (on play.html) if (canvas) { showMenuScreen() } }) // Contact form handler const contactForm = document.getElementById("contactForm") if (contactForm) { contactForm.addEventListener("submit", (e) => { e.preventDefault() const name = document.getElementById("name").value const email = document.getElementById("email").value const subject = document.getElementById("subject").value const message = document.getElementById("message").value // Placeholder: In production, send this data to a backend console.log("Contact form submitted:", { name, email, subject, message }) alert("Thank you for your message! We will get back to you soon.") contactForm.reset() }) } function updateActiveNavLink() { const currentPage = window.location.pathname.split("/").pop() || "index.html" document.querySelectorAll(".nav-links a").forEach((link) => { link.classList.remove("active") const href = link.getAttribute("href") if (href === currentPage || (currentPage === "" && href === "index.html")) { link.classList.add("active") } }) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This