shelly.run

Cute browser game that teaches coding fundamentals
with JavaScript in the browser console.

About The Project

Control shelly via the browser console. Shelly will react to the functions and variables you invoke or modify.

One of the major technical innovations making shelly.run possible, is the reactive console bindings.
Learn more about reactive browser console by seing it in action on this Svelte REPL or get bindConsole.js from this Gist.

See bindConsole.js used in the wild on this repo at app/src/components/Shelly.svelte

Built With

Getting Started

1. Go to https://shelly.run
2. Open browser console*
3. Run list() to browse the interactive documentation

*Mac: Cmd + Option + J
*Windows: Ctrl + Shift + J

Roadmap ⚡️

• Reactive browser console (control shelly from console)
• Cute animations 😍🐢
• Alpha version is online!
• Map screen space to world space
• Make walk() and run() distance parameters work
• Add shelly.paint() for tracing (canvas API)
• Make it pretty so people can create and post art
• Add interactive tutorial and difficulties
  • Intro: instructions to open console
  • Noob: using functions, mutating variables
  • Turtle master: turtle graphics! Loops etc.
  • HACKER 😈: using list() and modifying variables directly to do anything. Browse server files, change shelly sprites etc. JavaScript is the limit
  
  ...
• Add undo() to shelly.shell.js, save all prompts in a stack
• Add save() to shelly.shell.js, save program in browser, and to file
• Create a website for everyone to post their art, online gallery
• Improve list()
• Modding community at shelly.run/mods

Some demo programs to try out

(Paste these in the browser console on shelly.run)

These would be considered difficulty of HACKER 😅 (hard)
It's just to show the reactive console 🐢

Shelly animated:

shelly.walk(), shelly.run(), shelly.hide() and shelly.stay()

Shelly running:

shelly.run()

shelly.transform.rot = -30
setInterval(()=>{
    shelly.transform.pos.y += 1
    shelly.transform.pos.x += 0.3
}, 100)

Shelly running in circles:

shelly.run()

R=20
fx=(t)=>(Math.cos(t)*R) + 50
fy=(t)=>(Math.sin(t)*R) + 50

t = 0
setInterval(()=>{
    shelly.transform.pos.x = fx(t)
    shelly.transform.pos.y = fy(t)
    t += 0.1
    t %= Math.PI*2

    shelly.transform.rot = (360/Math.PI*0.5)*t
}, 100)

Easter Egg 🥚🐰 Only for hackers

COL=['orange','blue','hotpink','cyan','green','red']
index=0
setInterval(() => {
    shelly.color = COL[index]
    index++
    index %= COL.length
}, 40)
F0 = 'https://shelly.run/skins/hacker/F0.png'
F1 = 'https://shelly.run/skins/hacker/F1.png'
F2 = 'https://shelly.run/skins/hacker/F2.png'
F3 = 'https://shelly.run/skins/hacker/F3.png'
F4 = 'https://shelly.run/skins/hacker/F4.png'
F5 = 'https://shelly.run/skins/hacker/F5.png'
F6 = 'https://shelly.run/skins/hacker/F6.png'
states.run.animation = [F3,F2,F4,F2]
states.walk.animation = [F3,F1,F4,F1]
states.idle.animation = [F6,F5,F5,F5,F5,F5,F5,F5,F5,F6,F5,F5,F5,F5,F5]
states.hide.animation = [F0]

Screenshare (Chrome only, make sure you're on 25% zoom!)

License

Distributed under MPL-2.0. See LICENSE.txt.