Skip to content
0:00 / 0:00

#canvasapi#snakegame#vanillajavascript

Create Snake Game Using JavaScript and HTML5 | JavaScript Project For Beginners

Code Explained

43K subscribers • 5 videos on Hallway

YouTube
  • Recommended by 1 person: 1 in engineering communities.
  • May be out of date. Uploaded 8 years ago, in an area where tools change fast.

Beginner. No background in the topic needed.

250K views8 years ago1 recommendation

Game developmentProgramming languagesJavaScriptGame programming

A step-by-step tutorial on building a classic Snake game using vanilla JavaScript and HTML5 Canvas.

In this tutorial, we're going to create the snake game we used to play on NOKIA mobile phones. Snake is the common name for a video game concept where the player maneuvers a line which grows in length, with the line itself being a primary obstacle. The concept originated in the 1976 arcade game Blockade, and the ease of implementing Snake has led to hundreds of versions (some of which have the word snake or worm in the title) for many platforms. After a variant was preloaded on Nokia mobile phones in 1998, there was a resurgence of interest in the snake concept as it found a larger audience. There are over 300 Snake-like games for iOS alone. The player controls a dot, square, or object on a bordered plane. As it moves forward, it leaves a trail behind, resembling a moving snake. In some games, the end of the trail is in a fixed position, so the snake continually gets longer as it moves. In another common scheme, the snake has a specific length, so there is a moving tail a fixed number of units away from the head. The player loses when the snake runs into the screen border, a trail or other obstacle, or itself. And today you're going to create the Snake game using JavaScript and HTML(or HTML5). We won't use any framework to build the game, just Vanilla JavaScript. If you want to follow along with me when I type in the code, you'll need to download the starter template from GitHub. ----------------------------------------------------------------------------------------------------- | LINKS | ----------------------------------------------------------------------------------------------------- DOWNLOAD SOURCE CODE + STARTER TEMPLATE: codeexplained.org/2018/08/create-snake-game-using-javascript… 🌍 Social Media Links. ◾ Facebook : facebook.com/Code.Explained.Official ◾ Twitter : twitter.com/code_explained ◾ Instagram : instagram.com/Code.Explained.Official/ ◾ GitHub : github.com/CodeExplainedRepo 💲 Suppport the Channel Paypal : paypal.me/CodeExplained Buy Me a Coffee: buymeacoffee.com/CodeExplained ----------------------------------------------------------------------------------------------------- | HASH TAGS | ----------------------------------------------------------------------------------------------------- #JavaScript #beginners #jstutorials #JavaScript #Games #JavaScriptGames

Why it's here

1 person recommends this

What people say. Recommended as a clear, beginner-friendly tutorial for building a simple game in pure JavaScript.

u/th3originalsin r/Frontend • Recommends

beginners Snake Game Using Pure JavaScript

u/th3originalsin r/Frontend • Recommends

Build Snake Game | Logic Explained for JavaScript Beginners