snake.nv
· 1.2 KiB · Text
Ham
Playground
|| 'INSTRUCTIONS' you can move using the WASD keys!
'@include' (
lib/rpn.nv
lib/platforms/browser_dom.nv
lib/platforms/browser_game.nv
)
'snake' 200 200
'' start a 400 by 400 game
| '' game loop
| ''
. check if w is pressed
. check if a is pressed
. check if s is pressed
. check if d is pressed
. draw background
. draw snake
. next frame
| 'key pressed' w | 'vector' + 0 - 1
| 'key pressed' a | 'vector' - 1 + 0
| 'key pressed' s | 'vector' + 0 + 1
| 'key pressed' d | 'vector' + 1 + 0
| 'snake' $x $y 'vector' $1 $2 $3 $4
| '' move snake '@rpn' ($y $4 $3 $x $2 $1)
| '' move snake '@rpn data' ($x $y)
| 'snake' $x $y
| '' draw background | '@graphics' clear black
| '' draw snake 'snake' $x $y?
| '@graphics' draw square $x $y 10 green
| '@graphics' draw square $x $y $size $color
'@@canvas context' $context?
| '@js'
$context.fillStyle = $color;
$context.fillRect($x, $y, $size, $size);
| '' start a $x by $y game
| '@graphics' . canvas init canvas . set-resolution _ $x $y
'DOM' ( <query canvas <style display = block margin = [1rem auto] > > )
'' game loop
| '' next frame
| '@js' window.requestAnimationFrame(nextFrame);
|| '@js' const nextFrame = () => { f("", "game", "loop"); me.run(); }
| 1 | || 'INSTRUCTIONS' you can move using the WASD keys! |
| 2 | |
| 3 | '@include' ( |
| 4 | lib/rpn.nv |
| 5 | lib/platforms/browser_dom.nv |
| 6 | lib/platforms/browser_game.nv |
| 7 | ) |
| 8 | |
| 9 | 'snake' 200 200 |
| 10 | |
| 11 | '' start a 400 by 400 game |
| 12 | |
| 13 | | '' game loop |
| 14 | | '' |
| 15 | . check if w is pressed |
| 16 | . check if a is pressed |
| 17 | . check if s is pressed |
| 18 | . check if d is pressed |
| 19 | . draw background |
| 20 | . draw snake |
| 21 | . next frame |
| 22 | |
| 23 | | 'key pressed' w | 'vector' + 0 - 1 |
| 24 | | 'key pressed' a | 'vector' - 1 + 0 |
| 25 | | 'key pressed' s | 'vector' + 0 + 1 |
| 26 | | 'key pressed' d | 'vector' + 1 + 0 |
| 27 | | 'snake' $x $y 'vector' $1 $2 $3 $4 |
| 28 | | '' move snake '@rpn' ($y $4 $3 $x $2 $1) |
| 29 | | '' move snake '@rpn data' ($x $y) |
| 30 | | 'snake' $x $y |
| 31 | |
| 32 | | '' draw background | '@graphics' clear black |
| 33 | |
| 34 | | '' draw snake 'snake' $x $y? |
| 35 | | '@graphics' draw square $x $y 10 green |
| 36 | |
| 37 | | '@graphics' draw square $x $y $size $color |
| 38 | '@@canvas context' $context? |
| 39 | | '@js' |
| 40 | $context.fillStyle = $color; |
| 41 | $context.fillRect($x, $y, $size, $size); |
| 42 | |
| 43 | |
| 44 | |
| 45 | | '' start a $x by $y game |
| 46 | | '@graphics' . canvas init canvas . set-resolution _ $x $y |
| 47 | 'DOM' ( <query canvas <style display = block margin = [1rem auto] > > ) |
| 48 | '' game loop |
| 49 | |
| 50 | | '' next frame |
| 51 | | '@js' window.requestAnimationFrame(nextFrame); |
| 52 | |
| 53 | || '@js' const nextFrame = () => { f("", "game", "loop"); me.run(); } |
| 54 |