Examples
Ninja-code examples from easy to hard. Open any of them in the editor and change them. Running one earns experience.
Finishing an example earns experience. Repeating the same one earns less each time: half on the second run, a quarter on the third, then a small fixed amount. To level up, try something new.
Examples清單
Your first circle
The most basic shape a program takes: canvas first, then something to draw. Watch the ._發布() at the end of each line — without it nothing appears.
Basics+15 XP
A circle that moves
Put the drawing inside _無限循環 and it runs 60 times a second. Add a little to the position each time and it looks like movement.
Basics+20 XP
Follow the mouse
X and Y always hold where the mouse is right now. No function call needed — just use them.
Basics+20 XP
Gravity and jumping
A sprite is a thing that moves and bumps into other things. Give it gravity and it falls; give it a floor and it lands.
Games+25 XP
Catch the apples
A small but complete game: a group to manage many apples, _重疊 to detect a catch, a variable to keep score.
Games+40 XP
Loops draw flowers
A loop lets three lines draw a hundred things. Add trigonometry and they line up as circles, spirals and petals.
Loops+30 XP
Buttons and text boxes
The screen is not only for drawing — you can put real buttons and text boxes on it. They are the browser's own, so tapping one on a phone brings up the keyboard.
Interface+25 XP
Turn numbers into a chart
A pile of numbers hides the point; a bar chart shows it at a glance. A chart works like a circle or a square: set it up, call ._發布(), and there it is.
Charts+30 XP
Celebrate
Getting it right should feel like something. The effects are animations a designer drew; one line puts one on screen, far easier than coding confetti yourself.
Effects+20 XP
Do it later
A lot in a game does not happen right now: start in three seconds, spawn a monster every half second. That is what _稍後 and _每隔 say.
Timing+25 XP
Filters and glow
One filter and the same picture is a different picture. Working out blur, greyscale or brightness yourself needs university maths; here it is one command.
Visual effects+25 XP
Draw a map with text
A platform map needs no hand-counted coordinates. Lay the map out as a few lines of text, let '#' mean wall, and the program builds it.
Games+40 XP
Sound and effects
A game without sound feels half finished. The built-in sounds need no files — the program synthesises them; the effects are ready-made animations, one line each.
Visual effects+25 XP
Load an image
A canvas is not limited to circles and squares. _載入圖片 reads a file in, _圖片 draws it out. Images must be loaded inside _預先載入.
Images+30 XP
An image that animates
A sprite sheet is several frames sitting side by side in one image. _載入動畫 slices it up and ._畫格(n) picks which frame shows now. Swap every few frames and it moves.
Images+40 XP