Coding Snake Game in Svelte.js (Javascript)
In this tutorial we'll be using Svelte.JS, an easy to use web framework based on HTML, CSS, and Javascript, to build a snake game. If you don't know Svelte.JS click on the example links below to learn more.
Svelte JS Official Website
https://svelte.dev
Live Demo:
https://phptuts.github.io/snake_game_ty/
Code:
https://github.com/phptuts/snake_game_ty
Starter Code:
https://github.com/phptuts/snake_game...
Example Links
(Props) https://svelte.dev/examples#declaring...
(If Template) https://svelte.dev/examples#if-blocks
(Each Template) https://svelte.dev/examples#each-blocks
(Dom Events) https://svelte.dev/examples#dom-events
(Reactive Declarations) https://svelte.dev/examples#reactive-...
(Svelte Window) https://svelte.dev/examples#svelte-wi...
(Svelte Shorthand Props) https://svelte.dev/repl/72808c5cdce14...
00:00 Introduction
00:20 Starter Code Tour
https://github.com/phptuts/snake_game...
02:02 Food Component Props
https://github.com/phptuts/snake_game...
02:48 SnakeBody Component Props
https://github.com/phptuts/snake_game...
03:59 Creating SnakeBodies
https://github.com/phptuts/snake_game...
05:19 Keyboard Events
https://github.com/phptuts/snake_game...
07:07 Snake Moves
https://github.com/phptuts/snake_game...
08:57 Snake Ate Apple
https://github.com/phptuts/snake_game...
10:47 Game Over Function
https://github.com/phptuts/snake_game...
11:52 Reset Game Function
https://github.com/phptuts/snake_game...
12:34 Challenge
https://github.com/phptuts/snake_game...
13:02 Github Pages
https://github.com/phptuts/snake_game...
13:36 Final Demo and Outro
Notes / Errors
To prevent scrolling with the game have the onKeyDown Method take in an event parameter and call preventDefault. Also, the original game did not allow users to die so easily. So if you are going down you should not be able to go up. These are some minor fixes you can do to make the game better.
Auf dieser Seite können Sie das Online-Video Coding Snake Game in Svelte.js (Javascript) mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Noah Glaser 16 Mai 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 2,537 Mal angesehen und es wurde von 53 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
