autumn / snake game

| 'INSTRUCTIONS' | ~~ you can move using the WASD keys ! || '@include' ( https://gist.casuallyblue.dev/autumn/056799f483464c668e0a6a2d9db099df/raw/HEAD/game.nv https://gist.casuallyblue.dev/autumn/e1c6774f800249be87a94240042135db/raw/HEAD/reduce.nv ) 'DOM' ( <query h2 <style text-align = center > @clear @append [score : 0] > ) 'snake' . head 5 11 . body 4 11 . body 3 11 'direction' right 'movement speed' 4 'timer' 0 'food' 19 11 'score' 0 'cell size' 16 'grid size' 23 '' start game | '' start game 'cell size' $cell? 'grid size' $grid? | '' (@reduce @main = start a { $cell $grid * } by { $cell $grid * } game .) | '' game loop | '' check if w is pressed '' check if a is pressed '' check if s is pressed '' check if d is pressed '' update movement timer '' check if snake can eat food '' draw background '' draw food '' draw snake '' next frame | 'key pressed' w 'direction' down? | | 'key pressed' a 'direction' right? | | 'key pressed' s 'direction' up? | | 'key pressed' d 'direction' left? | | 'key pressed' w 'direction' $_ | 'direction' up | 'key pressed' a 'direction' $_ | 'direction' left | 'key pressed' s 'direction' $_ | 'direction' down | 'key pressed' d 'direction' $_ | 'direction' right | '' move 'direction' up? | '' move snake 'vector' + 0 - 1 | '' move 'direction' left? | '' move snake 'vector' - 1 + 0 | '' move 'direction' down? | '' move snake 'vector' + 0 + 1 | '' move 'direction' right? | '' move snake 'vector' + 1 + 0 | '' move snake? 'vector' $1 $2 $3 $4 'snake' head $x $y 'grid size' $size? | 'new body position' $x $y '' (@reduce seen = head { $x $2 $1 0 $size 1 - wrap } { $y $4 $3 0 $size 1 - wrap } .) | '' move snake? 'snake' body $x $y 'new body position' $nx $ny | 'new body position' $x $y 'seen' body $nx $ny | '' move snake 'new body position' $x $y | '' reset snake | '' update movement timer 'movement speed' $speed? 'timer' $speed | '' move 'timer' 0 | '' update movement timer 'timer' $time | '' (@reduce timer = { $time 1 + } .) | '' check if snake can eat food 'snake' head $x $y? 'food' $x $y? | '' move food to random location '' extend snake '' increase score '' set score text | '' check if snake can eat food | | '' move food to random location 'food' $x $y 'grid size' $max? | '' (@reduce food = { 0 $max random } { 0 $max random } .) | '' increase score 'score' $score | '' (@reduce score = { $score 1 + } .) | '' set score text 'score' $score? | 'DOM' (<query h2 @clear @append [score : ] @append $score >) | '' extend snake? 'snake' $segment $x $y | 'seen' $segment $x $y | '' extend snake | '' duplicate tail segment | '' duplicate tail segment 'seen' $segment $x $y? | 'snake' $segment $x $y '' reset snake | '' draw background | '@graphics' clear #000c0f | '' draw snake? 'snake' head $x $y 'pixel_position' $px $py 'cell size' $size? | '@graphics' draw square $px $py $size #5af7ff 'seen' head $x $y | '' draw snake? 'snake' body $x $y 'pixel_position' $px $py 'cell size' $size? | '' (@reduce @graphics = draw square { $px 1 + } { $py 1 + } { $size 2 - } #10b0b0 .) 'seen' body $x $y | '' draw snake? 'snake' $segment $x $y? | '' convert $x $y to pixel position | '' draw snake | '' reset snake | '' draw food 'pixel_position' $x $y 'cell size' $size? | '@graphics' draw circle $x $y $size #f0b050 | '' draw food? 'food' $x $y? | '' convert $x $y to pixel position | '@graphics' draw square $x $y $size $color '@@canvas context' $c? | '@js' $c.fillStyle = $color; $c.fillRect($x, $y, $size, $size); | '@graphics' draw circle $x $y $width $color '@@canvas context' $c? | '@js' $c.beginPath(); const r = $width / 2; $c.arc(Number($x) + r, Number($y) + r, r, 0, 2 * Math.PI); $c.fillStyle = $color; $c.fill(); | '' convert $x $y to pixel position 'cell size' $scalar? | '' (@reduce pixel_position = { $x $scalar * } { $y $scalar * } .) | '' reset snake? 'seen' $segment $x $y | 'snake' $segment $x $y | '' reset snake |