svelte🐍snake🐍sports

archived on Svelte 4 💥🐍🦴 games of Snake in Svelte and SvelteKit

⚠️ archived because the code is very experimental/messy and it's just snake - also the images feel off, and I'm not motivated to make good thumbnails

Play: ryanatkn.github.io/svelte-snake-sports

Watch the intro video: youtube.com/watch?v=ciei8H6IOWk

Watch a run of buncheses: youtube.com/watch?v=EorynexNDJI

sports

🐍	sport	goal
	classsic	eat many apples
	ssspeed	eat apples asap
	buncheses	eat many whole bunches of apples
	trailsss	eat trails of apples

Here's the source code for each sport.

caveats:

• it's responsive to smaller screens but mobile controls aren't great
• some of the code is still very rough from the port, I just tried to ship gameplay asap
• some of the code has experimental patterns that I wouldn't recommend

usage

Windows users will need a Linux VM, see this issue.

npm run dev
# or
gro dev # npm i -g @ryanatkn/gro

learn more about SvelteKit, Vite, Gro, and Felt

build

npm run build
# or
gro build

deploy

Deploy (build, commit, and push) to the deploy branch, e.g. for GitHub Pages:

npm run deploy
# or
gro deploy

what

In 2016 I wrote a tiny snake-game for an interview in React. Today I use Svelte instead and I continue to enjoy Snake for thinking through frontend development patterns. This project started as a port of the React version to my current Svelte patterns (with some experiments and hacks) and it's growing from there.

This project plans to make many distinct versions of Snake that are interesting in terms of gameplay, game design, and/or technical implementation with Svelte. If we're lucky, it'll be simple enough for beginners to follow along and deep enough to hold the interest of more advanced students like myself.

note: the project from 2016 uses Create React App and has no lockfile, and given that I wish not wake eldritch npm horrors, I am not going to try to run the code, and I advise you not to try, so much so that I won't even directly link the repo (though it's trivially inferred; also it's archived/readonly)

on the web: ryanatkn.github.io/svelte-snake-sports

credits 🐢_🐢🐢

Svelte ∙ SvelteKit ∙ Vite ∙ esbuild ∙ uvu ∙ TypeScript ∙ ESLint ∙ Prettier ∙ Felt ∙ Gro & more

music by Alexander Nakarada (serpentsoundstudios.com, CC-BY-4.0):

• "Lurking Sloth"
• "Horde of Geese"

generated images by DALL-E:

• classsic: "macro photography of an adorable cartoon snake with big eyes next to a red apple on lush green moss in a realistic 3d video game in the style of Tim Burton"
  • /static/assets/classsic.webp
  • font is Georgia Bold
• ssspeed: "macro photography of a cute cartoon snake eating a red apple on lush green moss in a 3d video game"
  • /static/assets/ssspeed.webp
  • font is Gabriola
• buncheses: "macro photography of an adorable green cartoon snake with huge cute eyes next to a pile of red apples on lush green moss, realistic 3d video game, digital art, vibrant, artstation"
  • /static/assets/buncheses.webp
  • font is Indie Flower
• trailsss: "macro photography of an adorable green cartoon snake with big cute eyes running towards a row of red apples in a line on lush green moss, realistic 3d video game, digital art, Pixar movie character, vibrant, artstation"
  • /static/assets/trailsss.webp
  • fonts are Raleway Dots and Codystar

license 🐦

public domain ⚘ The Unlicense