grapes-sam1-nthn
Version:
GRAPES V1 — The New Beginning. Free browser games launcher with stunning purple starry theme.
735 lines (603 loc) • 36.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAPES V1 — The New Beginning</title>
<meta name="description" content="GRAPES V1 — Free browser games. No downloads, no sign-ups.">
<meta name="theme-color" content="#0a0a1a">
<meta property="og:title" content="GRAPES V1 — The New Beginning">
<meta property="og:description" content="Free HTML5 games playable directly in your browser.">
<meta property="og:type" content="website">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="grapes.css">
</head>
<body>
<!-- ░░ Starfield ░░ -->
<canvas id="stars-canvas"></canvas>
<div id="app">
<!-- ░░ Nav ░░ -->
<nav class="topbar">
<a href="./" class="nav-logo">
<span class="moon">🌙</span>
<span class="brand">GRAPES V1<sub>The New Beginning</sub></span>
</a>
<div class="nav-links">
<a href="./" class="active">🎮 Games</a>
<a href="submitgame">💭 Request</a>
<a href="support" target="_blank">🐛 Bugs?</a>
<a href="chat" target="_blank">💬 Chat</a>
</div>
<div class="nav-search">
<span class="search-icon">🔍</span>
<input type="text" id="nav-search-input" placeholder="Search games..." autocomplete="off" spellcheck="false">
</div>
</nav>
<!-- ░░ Hero ░░ -->
<section class="hero">
<h1 class="hero-title">GRAPES V1</h1>
<p class="hero-subtitle">The New Beginning</p>
<div class="hero-search">
<span class="search-icon">🔍</span>
<input type="text" id="hero-search-input" placeholder="What are you looking for?" autocomplete="off" spellcheck="false">
</div>
</section>
<!-- ░░ Category pills ░░ -->
<div class="categories">
<span class="pill active" data-cat="all">All</span>
<span class="pill" data-cat="action">⚔️ Action</span>
<span class="pill" data-cat="racing">🏎️ Racing</span>
<span class="pill" data-cat="puzzle">🧩 Puzzle</span>
<span class="pill" data-cat="platformer">🕹️ Platformer</span>
<span class="pill" data-cat="shooter">🔫 Shooter</span>
<span class="pill" data-cat="multiplayer">👥 Multiplayer</span>
<span class="pill" data-cat="horror">👻 Horror</span>
<span class="pill" data-cat="idle">💤 Idle</span>
<span class="pill" data-cat="sports">⚽ Sports</span>
<span class="pill" data-cat="music">🎵 Music</span>
</div>
<!-- ░░ Game grid ░░ -->
<div class="section-header">
<h2>All Games</h2>
<div class="line"></div>
</div>
<div class="games-grid" id="games-grid">
<a class="game-card" href="https://slope-game.github.io/slope/" target="_blank" data-name="Slope" data-cat="action">
<img class="thumb" src="https://images.crazygames.com/slope/20200730_135357/thumb-1200x630.png" alt="Slope" loading="lazy">
<div class="info"><div class="name">Slope</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="https://1v1.lol/" target="_blank" data-name="1v1.LOL" data-cat="shooter">
<img class="thumb" src="https://play-lh.googleusercontent.com/fVXxzzyw8lJZjHRT9cItPt1A7zU5sNJyXhB4HkjQGEqH1xBYV9E2poTlpZDagq6WFGpf" alt="1v1.LOL" loading="lazy">
<div class="info"><div class="name">1v1.LOL</div><div class="tag">Shooter</div></div>
</a>
<a class="game-card" href="https://classic.minecraft.net/" target="_blank" data-name="Minecraft Classic" data-cat="action">
<img class="thumb" src="https://www.minecraft.net/content/dam/archive/dda8b345b37f8733b91b838b4c9a37a38b0a452d/classic-dirt.png" alt="Minecraft Classic" loading="lazy">
<div class="info"><div class="name">Minecraft Classic</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="https://poki.com/en/g/vex-3" target="_blank" data-name="Vex 3" data-cat="platformer">
<img class="thumb" src="https://img.poki.com/cdn-cgi/image/quality=78,width=204,height=135,fit=cover,f=auto/41b0600440b95ce2fe5f662d6bfa0e8c.png" alt="Vex 3" loading="lazy">
<div class="info"><div class="name">Vex 3</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="https://poki.com/en/g/vex-4" target="_blank" data-name="Vex 4" data-cat="platformer">
<img class="thumb" src="https://img.poki.com/cdn-cgi/image/quality=78,width=204,height=135,fit=cover,f=auto/65610ae7b455634eafcc0bd04fc24ad0.png" alt="Vex 4" loading="lazy">
<div class="info"><div class="name">Vex 4</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/vex5/" data-name="Vex 5" data-cat="platformer">
<img class="thumb" src="images/vex5.jpg" alt="Vex 5" loading="lazy">
<div class="info"><div class="name">Vex 5</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/vex6/" data-name="Vex 6" data-cat="platformer">
<img class="thumb" src="images/vex6.jpg" alt="Vex 6" loading="lazy">
<div class="info"><div class="name">Vex 6</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/subwaysurfers/" data-name="Subway Surfers" data-cat="action">
<img class="thumb" src="images/subway.jpg" alt="Subway Surfers" loading="lazy">
<div class="info"><div class="name">Subway Surfers</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/stickman/" data-name="Stickman" data-cat="action">
<img class="thumb" src="images/stackman.jpg" alt="Stickman" loading="lazy">
<div class="info"><div class="name">Stickman</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/superhot/" data-name="Superhot" data-cat="action">
<img class="thumb" src="images/superhot.jpg" alt="Superhot" loading="lazy">
<div class="info"><div class="name">Superhot</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/backrooms/" data-name="The Backrooms" data-cat="horror">
<img class="thumb" src="images/backrooms.png" alt="The Backrooms" loading="lazy">
<div class="info"><div class="name">The Backrooms</div><div class="tag">Horror</div></div>
</a>
<a class="game-card" href="play/FNAF/" data-name="FNAF" data-cat="horror">
<img class="thumb" src="images/image111.png" alt="FNAF" loading="lazy">
<div class="info"><div class="name">FNAF</div><div class="tag">Horror</div></div>
</a>
<a class="game-card" href="play/FNAF2/" data-name="FNAF 2" data-cat="horror">
<img class="thumb" src="images/image12.png" alt="FNAF 2" loading="lazy">
<div class="info"><div class="name">FNAF 2</div><div class="tag">Horror</div></div>
</a>
<a class="game-card" href="play/FNAF3/" data-name="FNAF 3" data-cat="horror">
<img class="thumb" src="images/image13.png" alt="FNAF 3" loading="lazy">
<div class="info"><div class="name">FNAF 3</div><div class="tag">Horror</div></div>
</a>
<a class="game-card" href="play/FNAF4/" data-name="FNAF 4" data-cat="horror">
<img class="thumb" src="images/image14.png" alt="FNAF 4" loading="lazy">
<div class="info"><div class="name">FNAF 4</div><div class="tag">Horror</div></div>
</a>
<a class="game-card" href="play/2048/" data-name="2048" data-cat="puzzle">
<img class="thumb" src="images/image1.png" alt="2048" loading="lazy">
<div class="info"><div class="name">2048</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/motox3m/" data-name="Moto X3M" data-cat="racing">
<img class="thumb" src="images/motox3m.jpg" alt="Moto X3M" loading="lazy">
<div class="info"><div class="name">Moto X3M</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/motox3mspookyland/" data-name="Moto X3M Spooky Land" data-cat="racing">
<img class="thumb" src="images/motox3mspookyland.jpg" alt="Moto X3M Spooky" loading="lazy">
<div class="info"><div class="name">Moto X3M Spooky</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/motox3mwinter/" data-name="Moto X3M Winter" data-cat="racing">
<img class="thumb" src="images/motox3mwinter.jpg" alt="Moto X3M Winter" loading="lazy">
<div class="info"><div class="name">Moto X3M Winter</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/motox3mpoolparty/" data-name="Moto X3M Pool Party" data-cat="racing">
<img class="thumb" src="images/motox3mpoolparty.jpg" alt="Moto X3M Pool Party" loading="lazy">
<div class="info"><div class="name">Moto X3M Pool</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/cubefield/" data-name="Cubefield" data-cat="action">
<img class="thumb" src="images/image76.png" alt="Cubefield" loading="lazy">
<div class="info"><div class="name">Cubefield</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/tunnelrush/" data-name="Tunnel Rush" data-cat="action">
<img class="thumb" src="images/image20.png" alt="Tunnel Rush" loading="lazy">
<div class="info"><div class="name">Tunnel Rush</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/monkey-mart/" data-name="Monkey Mart" data-cat="idle">
<img class="thumb" src="images/b3668d7deb043d0f43b5813b0365be8f.png" alt="Monkey Mart" loading="lazy">
<div class="info"><div class="name">Monkey Mart</div><div class="tag">Idle</div></div>
</a>
<a class="game-card" href="play/blumgi/" data-name="Blumgi Slime" data-cat="platformer">
<img class="thumb" src="images/535793fb806824a12dfe0136c4208b51.png" alt="Blumgi Slime" loading="lazy">
<div class="info"><div class="name">Blumgi Slime</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/blumgiball/" data-name="Blumgi Ball" data-cat="sports">
<img class="thumb" src="images/unknown.png" alt="Blumgi Ball" loading="lazy">
<div class="info"><div class="name">Blumgi Ball</div><div class="tag">Sports</div></div>
</a>
<a class="game-card" href="play/ovo/" data-name="OvO" data-cat="platformer">
<img class="thumb" src="images/ovo.png" alt="OvO" loading="lazy">
<div class="info"><div class="name">OvO</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/papasb/" data-name="Papa's Burgeria" data-cat="idle">
<img class="thumb" src="images/image17.png" alt="Papa's Burgeria" loading="lazy">
<div class="info"><div class="name">Papa's Burgeria</div><div class="tag">Idle</div></div>
</a>
<a class="game-card" href="play/papaspizzaria/" data-name="Papa's Pizzeria" data-cat="idle">
<img class="thumb" src="images/papaspizzaria.jpg" alt="Papa's Pizzeria" loading="lazy">
<div class="info"><div class="name">Papa's Pizzeria</div><div class="tag">Idle</div></div>
</a>
<a class="game-card" href="play/papasburgeria/" data-name="Papa's Burgeria Flash" data-cat="idle">
<img class="thumb" src="images/splash.jpg" alt="Papa's Burgeria" loading="lazy">
<div class="info"><div class="name">Papa's Burgeria+</div><div class="tag">Idle</div></div>
</a>
<a class="game-card" href="play/crossy/" data-name="Crossy Road" data-cat="action">
<img class="thumb" src="images/image5.png" alt="Crossy Road" loading="lazy">
<div class="info"><div class="name">Crossy Road</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/dadish/" data-name="Dadish" data-cat="platformer">
<img class="thumb" src="images/image22.png" alt="Dadish" loading="lazy">
<div class="info"><div class="name">Dadish</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/dadishtwo/" data-name="Dadish 2" data-cat="platformer">
<img class="thumb" src="images/image23.png" alt="Dadish 2" loading="lazy">
<div class="info"><div class="name">Dadish 2</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/dadish3/" data-name="Dadish 3" data-cat="platformer">
<img class="thumb" src="images/image24.png" alt="Dadish 3" loading="lazy">
<div class="info"><div class="name">Dadish 3</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/fnf/" data-name="Friday Night Funkin" data-cat="music">
<img class="thumb" src="images/image21.png" alt="Friday Night Funkin" loading="lazy">
<div class="info"><div class="name">Friday Night Funkin</div><div class="tag">Music</div></div>
</a>
<a class="game-card" href="play/wordle/" data-name="Wordle" data-cat="puzzle">
<img class="thumb" src="images/512x512bb.png" alt="Wordle" loading="lazy">
<div class="info"><div class="name">Wordle</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/hangman/" data-name="Hangman" data-cat="puzzle">
<img class="thumb" src="images/648855bd08919f6ff3c68c188dc1acaa.png" alt="Hangman" loading="lazy">
<div class="info"><div class="name">Hangman</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/breaklock/" data-name="Breaklock" data-cat="puzzle">
<img class="thumb" src="images/image16.png" alt="Breaklock" loading="lazy">
<div class="info"><div class="name">Breaklock</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/2048/" data-name="2048" data-cat="puzzle">
<img class="thumb" src="images/image1.png" alt="2048" loading="lazy">
<div class="info"><div class="name">2048</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/cell-machine/" data-name="Cell Machine" data-cat="puzzle">
<img class="thumb" src="images/te9nDu.png" alt="Cell Machine" loading="lazy">
<div class="info"><div class="name">Cell Machine</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/breakoid/" data-name="Breakoid" data-cat="action">
<img class="thumb" src="images/icon-192.png" alt="Breakoid" loading="lazy">
<div class="info"><div class="name">Breakoid</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/drivemad/" data-name="Drive Mad" data-cat="racing">
<img class="thumb" src="images/image26.png" alt="Drive Mad" loading="lazy">
<div class="info"><div class="name">Drive Mad</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/slope2/" data-name="Slope 2" data-cat="action">
<img class="thumb" src="images/slope2.png" alt="Slope 2" loading="lazy">
<div class="info"><div class="name">Slope 2</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/boxing-random/" data-name="Boxing Random" data-cat="sports multiplayer">
<img class="thumb" src="images/512x512.jpg" alt="Boxing Random" loading="lazy">
<div class="info"><div class="name">Boxing Random</div><div class="tag">Sports</div></div>
</a>
<a class="game-card" href="play/volley-random/" data-name="Volley Random" data-cat="sports multiplayer">
<img class="thumb" src="images/splash2.png" alt="Volley Random" loading="lazy">
<div class="info"><div class="name">Volley Random</div><div class="tag">Sports</div></div>
</a>
<a class="game-card" href="play/basket-random/" data-name="Basketball Random" data-cat="sports multiplayer">
<img class="thumb" src="images/splash.jpeg" alt="Basketball Random" loading="lazy">
<div class="info"><div class="name">Basketball Random</div><div class="tag">Sports</div></div>
</a>
<a class="game-card" href="play/basketbros-io/" data-name="Basketball Bros" data-cat="sports multiplayer">
<img class="thumb" src="images/thumb.jpg" alt="Basketball Bros" loading="lazy">
<div class="info"><div class="name">Basketball Bros</div><div class="tag">Sports</div></div>
</a>
<a class="game-card" href="play/rooftop/" data-name="Rooftop Snipers" data-cat="shooter multiplayer">
<img class="thumb" src="images/image57.png" alt="Rooftop Snipers" loading="lazy">
<div class="info"><div class="name">Rooftop Snipers</div><div class="tag">Shooter</div></div>
</a>
<a class="game-card" href="play/bombhopper/" data-name="Bomb Hopper" data-cat="action">
<img class="thumb" src="images/69074b01af43f875aee115ddcabf092b.png" alt="Bomb Hopper" loading="lazy">
<div class="info"><div class="name">Bomb Hopper</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/hilldraw/" data-name="Hill Draw" data-cat="racing">
<img class="thumb" src="images/image64.png" alt="Hill Draw" loading="lazy">
<div class="info"><div class="name">Hill Draw</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/koriwalk/" data-name="Kori Walk" data-cat="action">
<img class="thumb" src="images/KoriWalk.png" alt="Kori Walk" loading="lazy">
<div class="info"><div class="name">Kori Walk</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/ledgethrow/" data-name="Ledge Throw" data-cat="action">
<img class="thumb" src="images/LedgeThrow.png" alt="Ledge Throw" loading="lazy">
<div class="info"><div class="name">Ledge Throw</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/bb/" data-name="Basketball" data-cat="sports">
<img class="thumb" src="images/bb.png" alt="Basketball" loading="lazy">
<div class="info"><div class="name">Basketball</div><div class="tag">Sports</div></div>
</a>
<a class="game-card" href="play/bmd/" data-name="Bad Guys at School" data-cat="action">
<img class="thumb" src="images/bmd.jpg" alt="Bad Guys at School" loading="lazy">
<div class="info"><div class="name">Bad Guys at School</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/dreader/" data-name="D-Reader" data-cat="action">
<img class="thumb" src="images/dreader.jpg" alt="D-Reader" loading="lazy">
<div class="info"><div class="name">D-Reader</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/xx142-b2exe/" data-name="XX142-B2.EXE" data-cat="action">
<img class="thumb" src="images/yDwMp7kQ_4x.jpg" alt="XX142-B2.EXE" loading="lazy">
<div class="info"><div class="name">XX142-B2.EXE</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/stickclimb/" data-name="Stick Climb" data-cat="platformer">
<img class="thumb" src="images/image54.png" alt="Stick Climb" loading="lazy">
<div class="info"><div class="name">Stick Climb</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/sk/" data-name="Skate" data-cat="sports">
<img class="thumb" src="images/1035de48ec88b51062aaaddeb3e93110.png" alt="Skate" loading="lazy">
<div class="info"><div class="name">Skate</div><div class="tag">Sports</div></div>
</a>
<a class="game-card" href="play/tdh/" data-name="30 Days to Halt" data-cat="action">
<img class="thumb" src="images/thirty.png" alt="30 Days to Halt" loading="lazy">
<div class="info"><div class="name">30 Days to Halt</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/minitrain/" data-name="Mini Train" data-cat="puzzle">
<img class="thumb" src="images/d01199aea94d642411c9a76abd67f123.png" alt="Mini Train" loading="lazy">
<div class="info"><div class="name">Mini Train</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/jetpack/" data-name="Jetpack Joyride" data-cat="action">
<img class="thumb" src="images/image4.png" alt="Jetpack Joyride" loading="lazy">
<div class="info"><div class="name">Jetpack Joyride</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/ting/" data-name="There Is No Game" data-cat="puzzle">
<img class="thumb" src="images/ThereIsNoGame.png" alt="There Is No Game" loading="lazy">
<div class="info"><div class="name">There Is No Game</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/vengeio/" data-name="Venge.io" data-cat="shooter">
<img class="thumb" src="images/f6e9447a9546d85b2f6f4fcebca81bb2.png" alt="Venge.io" loading="lazy">
<div class="info"><div class="name">Venge.io</div><div class="tag">Shooter</div></div>
</a>
<a class="game-card" href="play/dante/" data-name="Dante" data-cat="action">
<img class="thumb" src="images/splash.png" alt="Dante" loading="lazy">
<div class="info"><div class="name">Dante</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/effingworms/" data-name="Effing Worms" data-cat="action">
<img class="thumb" src="images/image25.png" alt="Effing Worms" loading="lazy">
<div class="info"><div class="name">Effing Worms</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/DogeMiner/" data-name="Doge Miner" data-cat="idle">
<img class="thumb" src="images/image6.png" alt="Doge Miner" loading="lazy">
<div class="info"><div class="name">Doge Miner</div><div class="tag">Idle</div></div>
</a>
<a class="game-card" href="play/makeitmeme/" data-name="Make It Meme" data-cat="multiplayer">
<img class="thumb" src="images/70e565ff687043e10e150e23d0ae5ea2.png" alt="Make It Meme" loading="lazy">
<div class="info"><div class="name">Make It Meme</div><div class="tag">Multiplayer</div></div>
</a>
<a class="game-card" href="play/paperio2/" data-name="Paper.io 2" data-cat="multiplayer">
<img class="thumb" src="images/icon512.png" alt="Paper.io 2" loading="lazy">
<div class="info"><div class="name">Paper.io 2</div><div class="tag">Multiplayer</div></div>
</a>
<a class="game-card" href="play/cars-simulator/" data-name="Cars Simulator" data-cat="racing">
<img class="thumb" src="images/splash-2.png" alt="Cars Simulator" loading="lazy">
<div class="info"><div class="name">Cars Simulator</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/aquapark-slides/" data-name="Aquapark Slides" data-cat="racing">
<img class="thumb" src="images/splash-1.png" alt="Aquapark Slides" loading="lazy">
<div class="info"><div class="name">Aquapark Slides</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/merge-round-racers/" data-name="Merge Round Racers" data-cat="racing idle">
<img class="thumb" src="images/splash1.png" alt="Merge Round Racers" loading="lazy">
<div class="info"><div class="name">Merge Racers</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/glass-city/" data-name="Glass City" data-cat="puzzle">
<img class="thumb" src="images/image2.png" alt="Glass City" loading="lazy">
<div class="info"><div class="name">Glass City</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/tiny-fishing/" data-name="Tiny Fishing" data-cat="idle">
<img class="thumb" src="images/thumb.png" alt="Tiny Fishing" loading="lazy">
<div class="info"><div class="name">Tiny Fishing</div><div class="tag">Idle</div></div>
</a>
<a class="game-card" href="play/tanuki-sunset/" data-name="Tanuki Sunset" data-cat="racing">
<img class="thumb" src="images/logo.png" alt="Tanuki Sunset" loading="lazy">
<div class="info"><div class="name">Tanuki Sunset</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/sketchbook/" data-name="Sketchbook" data-cat="puzzle">
<img class="thumb" src="images/sketchbook.png" alt="Sketchbook" loading="lazy">
<div class="info"><div class="name">Sketchbook</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/sm64/" data-name="Super Mario 64" data-cat="platformer">
<img class="thumb" src="images/sm64.jpeg" alt="Super Mario 64" loading="lazy">
<div class="info"><div class="name">Super Mario 64</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/stuntcars/" data-name="Stunt Cars" data-cat="racing">
<img class="thumb" src="images/image65.png" alt="Stunt Cars" loading="lazy">
<div class="info"><div class="name">Stunt Cars</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/fortcraft/" data-name="Fortcraft" data-cat="shooter">
<img class="thumb" src="images/Untitled.png" alt="Fortcraft" loading="lazy">
<div class="info"><div class="name">Fortcraft</div><div class="tag">Shooter</div></div>
</a>
<a class="game-card" href="play/burritobison/" data-name="Burrito Bison" data-cat="action">
<img class="thumb" src="images/clipboard-image.png" alt="Burrito Bison" loading="lazy">
<div class="info"><div class="name">Burrito Bison</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/bigredbutton/" data-name="Big Red Button" data-cat="action">
<img class="thumb" src="images/bigredbutton.png" alt="Big Red Button" loading="lazy">
<div class="info"><div class="name">Big Red Button</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/bullet/" data-name="Bullet" data-cat="shooter">
<img class="thumb" src="images/image241.png" alt="Bullet" loading="lazy">
<div class="info"><div class="name">Bullet</div><div class="tag">Shooter</div></div>
</a>
<a class="game-card" href="play/bf/" data-name="Battle Forces" data-cat="shooter">
<img class="thumb" src="images/bf.png" alt="Battle Forces" loading="lazy">
<div class="info"><div class="name">Battle Forces</div><div class="tag">Shooter</div></div>
</a>
<a class="game-card" href="play/canonstrike/" data-name="Canon Strike" data-cat="action">
<img class="thumb" src="images/CanonStrikeEWWWWWAVIF.png" alt="Canon Strike" loading="lazy">
<div class="info"><div class="name">Canon Strike</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/justfall/" data-name="JustFall" data-cat="multiplayer">
<img class="thumb" src="images/justfall.png" alt="JustFall" loading="lazy">
<div class="info"><div class="name">JustFall</div><div class="tag">Multiplayer</div></div>
</a>
<a class="game-card" href="play/bloxorz/" data-name="Bloxorz" data-cat="puzzle">
<img class="thumb" src="images/image76.png" alt="Bloxorz" loading="lazy">
<div class="info"><div class="name">Bloxorz</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/cookieclicker/" data-name="Cookie Clicker" data-cat="idle">
<img class="thumb" src="images/cookieclicker.jpg" alt="Cookie Clicker" loading="lazy">
<div class="info"><div class="name">Cookie Clicker</div><div class="tag">Idle</div></div>
</a>
<a class="game-card" href="play/run3/" data-name="Run 3" data-cat="action">
<img class="thumb" src="images/image20.png" alt="Run 3" loading="lazy">
<div class="info"><div class="name">Run 3</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/retro-bowl/" data-name="Retro Bowl" data-cat="sports">
<img class="thumb" src="images/image57.png" alt="Retro Bowl" loading="lazy">
<div class="info"><div class="name">Retro Bowl</div><div class="tag">Sports</div></div>
</a>
<a class="game-card" href="play/dino/" data-name="Dino Game" data-cat="action">
<img class="thumb" src="images/mc.png" alt="Dino Game" loading="lazy">
<div class="info"><div class="name">Dino Game</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/tetris/" data-name="Tetris" data-cat="puzzle">
<img class="thumb" src="images/image1.png" alt="Tetris" loading="lazy">
<div class="info"><div class="name">Tetris</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/drift-hunters/" data-name="Drift Hunters" data-cat="racing">
<img class="thumb" src="images/image65.png" alt="Drift Hunters" loading="lazy">
<div class="info"><div class="name">Drift Hunters</div><div class="tag">Racing</div></div>
</a>
<a class="game-card" href="play/shellshock/" data-name="Shellshock.io" data-cat="shooter multiplayer">
<img class="thumb" src="images/image59.png" alt="Shellshock.io" loading="lazy">
<div class="info"><div class="name">Shellshock.io</div><div class="tag">Shooter</div></div>
</a>
<a class="game-card" href="play/slither/" data-name="Slither.io" data-cat="multiplayer">
<img class="thumb" src="images/image5.png" alt="Slither.io" loading="lazy">
<div class="info"><div class="name">Slither.io</div><div class="tag">Multiplayer</div></div>
</a>
<a class="game-card" href="play/temple-run-2/" data-name="Temple Run 2" data-cat="action">
<img class="thumb" src="images/subway.jpg" alt="Temple Run 2" loading="lazy">
<div class="info"><div class="name">Temple Run 2</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/townscaper/" data-name="Townscaper" data-cat="puzzle idle">
<img class="thumb" src="images/image2.png" alt="Townscaper" loading="lazy">
<div class="info"><div class="name">Townscaper</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/cluster-rush/" data-name="Cluster Rush" data-cat="action">
<img class="thumb" src="images/image64.png" alt="Cluster Rush" loading="lazy">
<div class="info"><div class="name">Cluster Rush</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/bitlife/" data-name="BitLife" data-cat="idle">
<img class="thumb" src="play/bitlife/logo.png" alt="BitLife" loading="lazy">
<div class="info"><div class="name">BitLife</div><div class="tag">Idle</div></div>
</a>
<a class="game-card" href="play/gd/" data-name="Geometry Dash" data-cat="platformer">
<img class="thumb" src="images/slope.jpg" alt="Geometry Dash" loading="lazy">
<div class="info"><div class="name">Geometry Dash</div><div class="tag">Platformer</div></div>
</a>
<a class="game-card" href="play/adofai/" data-name="A Dance of Fire and Ice" data-cat="music">
<img class="thumb" src="images/image21.png" alt="A Dance of Fire and Ice" loading="lazy">
<div class="info"><div class="name">A Dance of Fire & Ice</div><div class="tag">Music</div></div>
</a>
<a class="game-card" href="play/sushi-unroll/" data-name="Sushi Unroll" data-cat="puzzle">
<img class="thumb" src="images/image17.png" alt="Sushi Unroll" loading="lazy">
<div class="info"><div class="name">Sushi Unroll</div><div class="tag">Puzzle</div></div>
</a>
<a class="game-card" href="play/superbrawl/" data-name="Super Brawl" data-cat="action multiplayer">
<img class="thumb" src="images/1v1lol.jpg" alt="Super Brawl" loading="lazy">
<div class="info"><div class="name">Super Brawl</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/ghost/" data-name="Ghost" data-cat="action">
<img class="thumb" src="images/backrooms.png" alt="Ghost" loading="lazy">
<div class="info"><div class="name">Ghost</div><div class="tag">Action</div></div>
</a>
<a class="game-card" href="play/hole/" data-name="Hole.io" data-cat="multiplayer">
<img class="thumb" src="images/icon512.png" alt="Hole.io" loading="lazy">
<div class="info"><div class="name">Hole.io</div><div class="tag">Multiplayer</div></div>
</a>
<a class="game-card" href="play/recoil/" data-name="Recoil" data-cat="shooter">
<img class="thumb" src="images/f6e9447a9546d85b2f6f4fcebca81bb2.png" alt="Recoil" loading="lazy">
<div class="info"><div class="name">Recoil</div><div class="tag">Shooter</div></div>
</a>
<a class="game-card" href="play/shootz/" data-name="Shootz" data-cat="shooter">
<img class="thumb" src="images/image59.png" alt="Shootz" loading="lazy">
<div class="info"><div class="name">Shootz</div><div class="tag">Shooter</div></div>
</a>
<div id="no-results">No games found. Try a different search! 🎮</div>
</div><!-- /games-grid -->
<!-- ░░ Footer ░░ -->
<footer>
<p>© 2024 <strong>GRAPES V1</strong> — The New Beginning ·
<a href="support">Support</a> ·
<a href="tos">Terms</a> ·
<a href="pp">Privacy</a>
</p>
</footer>
</div><!-- /app -->
<!-- ░░ Scripts ░░ -->
<script>
/* ── Starfield ── */
(function() {
const canvas = document.getElementById('stars-canvas');
const ctx = canvas.getContext('2d');
let stars = [];
const N = 200;
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function init() {
resize();
stars = [];
for (let i = 0; i < N; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: Math.random() * 1.4 + 0.2,
alpha: Math.random() * 0.8 + 0.1,
speed: Math.random() * 0.4 + 0.05,
twinkleSpeed: Math.random() * 0.02 + 0.005,
twinkleDir: Math.random() > 0.5 ? 1 : -1
});
}
}
function draw() {
// Deep purple gradient background
const grad = ctx.createLinearGradient(0, 0, canvas.width * 0.6, canvas.height);
grad.addColorStop(0, '#0a0820');
grad.addColorStop(0.4, '#0f0a2a');
grad.addColorStop(1, '#070518');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Subtle nebula glow
const nebula = ctx.createRadialGradient(
canvas.width * 0.35, canvas.height * 0.4, 0,
canvas.width * 0.35, canvas.height * 0.4, canvas.width * 0.5
);
nebula.addColorStop(0, 'rgba(80, 40, 140, 0.12)');
nebula.addColorStop(0.5, 'rgba(50, 20, 100, 0.07)');
nebula.addColorStop(1, 'transparent');
ctx.fillStyle = nebula;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Stars
stars.forEach(s => {
s.alpha += s.twinkleSpeed * s.twinkleDir;
if (s.alpha >= 0.9) s.twinkleDir = -1;
if (s.alpha <= 0.1) s.twinkleDir = 1;
ctx.beginPath();
ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
ctx.fillStyle = `rgba(220, 200, 255, ${s.alpha})`;
ctx.fill();
});
requestAnimationFrame(draw);
}
window.addEventListener('resize', () => { resize(); });
init();
draw();
})();
/* ── Search & Filter ── */
(function() {
const cards = Array.from(document.querySelectorAll('.game-card'));
const noResults = document.getElementById('no-results');
let currentCat = 'all';
let currentQuery = '';
function applyFilter() {
let visible = 0;
cards.forEach(card => {
const name = card.dataset.name.toLowerCase();
const cats = (card.dataset.cat || '').toLowerCase();
const matchesQuery = !currentQuery || name.includes(currentQuery);
const matchesCat = currentCat === 'all' || cats.includes(currentCat);
if (matchesQuery && matchesCat) {
card.classList.remove('hidden');
visible++;
} else {
card.classList.add('hidden');
}
});
noResults.style.display = visible === 0 ? 'block' : 'none';
}
// Hero search input
const heroInput = document.getElementById('hero-search-input');
const navInput = document.getElementById('nav-search-input');
function onSearch(e) {
currentQuery = e.target.value.trim().toLowerCase();
// Sync both inputs
heroInput.value = currentQuery;
navInput.value = currentQuery;
applyFilter();
if (currentQuery) {
document.getElementById('games-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
heroInput.addEventListener('input', onSearch);
navInput.addEventListener('input', onSearch);
// Category pills
document.querySelectorAll('.pill').forEach(pill => {
pill.addEventListener('click', () => {
document.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
currentCat = pill.dataset.cat;
applyFilter();
document.getElementById('games-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
})();
</script>
</body>
</html>