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_ty/archive/starter-code.zip

Example Links

(Props) https://svelte.dev/examples#declaring-props

(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-declarations

(Svelte Window) https://svelte.dev/examples#svelte-window

(Svelte Shorthand Props) https://svelte.dev/repl/72808c5cdce14fc6862e1661b68d8809?version=3.22.2

00:00 Introduction

00:20 Starter Code Tour
https://github.com/phptuts/snake_game_ty/tree/starter-code

02:02 Food Component Props
https://github.com/phptuts/snake_game_ty/tree/1-food-component-props

02:48 SnakeBody Component Props
https://github.com/phptuts/snake_game_ty/tree/2-snakebody-component-props

03:59 Creating SnakeBodies
https://github.com/phptuts/snake_game_ty/tree/3-snake-bodies-array

05:19 Keyboard Events
https://github.com/phptuts/snake_game_ty/tree/4-keyboard-events

07:07 Snake Moves
https://github.com/phptuts/snake_game_ty/tree/5-snake-move

08:57 Snake Ate Apple
https://github.com/phptuts/snake_game_ty/tree/6-snake-ate-apple

10:47 Game Over Function
https://github.com/phptuts/snake_game_ty/tree/7-is-game-over

11:52 Reset Game Function
https://github.com/phptuts/snake_game_ty/tree/8-reset-game

12:34 Challenge
https://github.com/phptuts/snake_game_ty/tree/9-score-challenge

13:02 Github Pages
https://github.com/phptuts/snake_game_ty/tree/10-gh-pages

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.