svelte-snake-sports Svelte Themes

Svelte Snake Sports

archived on Svelte 4 πŸ’₯🐍🦴 games of Snake in Svelte & SvelteKit 🐍

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
logo for 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 classsic eat many apples
logo for ssspeed, macro photography of a cute cartoon snake eating a red apple on lush green moss in a 3d video game ssspeed eat apples asap
logo for 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 buncheses eat many whole bunches of apples
logo for 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 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):

generated images by DALL-E:

license 🐦

public domain ⚘ The Unlicense

Top categories

Loading Svelte Themes