My first attempt at programming a basic SNAKE game in HTML. I found this version on GitHub, studied it thoroughly, and basically memorized it. Some special information about this snake game 💢 This game is made using JavaScript programming language and some amount of HTML and CSS code. Which is very simple and simple. 💢 The main feature of this game is that you can play this game with the mouse. Python Classic Snake Game Code Listing. The listing for our Snake Game is below. Depending on your level of experiece, you may be able to understand exactly how it works or maybe just some of it. That's all fine. Whatever your level, you should experiment with the code, play with it. Snake Game In HTML And JAVASCRIPT project is a web application which is developed in HTML CSS platform. This HTML CSS project with tutorial and guide for developing a code. Snake Game In HTML And JAVASCRIPT is a open source you can Download zip and edit as per you need. If you want more latest HTML CSS projects here. This is simple and basic. In this tutorial, we will use the HTML canvas tag for developing this game, with Javascript code controlling the gameplay and the visuals of the game like the snake and the apple, growing of snake, etc. Following is the HTML code where we have used the tag to setup the game UI.
As seen in Can you fit a whole game into a QR code?
Information
The above QR code contains a complete Windows executable that will run on Windows 7 and up. It's a simple but fully playable implementation of Snake.
A QR code is a data storage medium like any other, and while it's almost always used to store ASCII text, it can also be used to store binary data. As such, virtually any computer data can theoretically be stored in a QR code provided it can fit within the size limitations.
A QR code comes in various standard sizes, the largest being version 40 which can store up to 2,953 bytes (roughly 2.9 KB) of binary data. The above code is not quite that large, it's only storing around 1.4 KB of data (shrunk down from 3.2 KB with Crinkler, slightly larger than the executable shown in the video because I decided to add a little more functionality).
Method 1: Webcam (automatic)
You can treat this QR code much like a QR code in the real world by using your computer's webcam to read it (e.g. after loading this page on a phone or printing the QR code out). For this, I recommend using zbarcam. I've included a download link with everything you need:
- Open 'Read Snake From QR.bat'. After a moment, your webcam will activate.
- Using either your phone screen or a print-out, hold the QR code up to the camera.
- Once it recognizes the code, it will close and Snake will appear, freshly read from the QR code.
Method 2: Webcam (manual)
This method is the same as the above, however if you'd rather input the commands manually than running my script, go for it:
- Open Command Prompt
- cd to the zbarcam folder.
- Run the following command:
zbarcam --raw --oneshot -Sbinary > snake.exe
The arguments used are as follows:
- --raw - Disables any character encoding conversion.
- --oneshot - Stops reading and closes zbarcam after the code has been successfully read.
- -Sbinary - Informs zbarcam that the data in the code is binary data.
- Using either your phone screen or a print-out, hold the QR code up to the camera.
- Once it recognizes the code, it will close and an executable called 'snake.exe' will appear in the same folder.
- Open 'snake.exe'.
- The version of zbarcam provided above has been patched to correctly output binary data on Windows. This project exposed a bug in zbarcam where binary data was incorrectly treated as text, inadvertently corrupting it as Windows attempted to convert LF line endings to CRLF. The fix used here has since been merged into zbar's master source code, but as of July 2020 no stable release version has included the fix yet.
- The version of zbarcam provided above has been compiled with DirectShow support for greater compatibility with webcam devices. In my video, I use a build that has not been compiled for DirectShow (using VfW instead) which leads to a black and white webcam feed. This build provides a feed in color.
As a proof-of-concept, I wrote an implementation of Snake in JavaScript that, when minified, could also fit into the maximum QR code size which I briefly showcased in the video. Some people were interested in playing this, so it is available here.
• QR code on Wikipedia
• ZBar on GitHub
Many people who are starting out with a new project get caught up in decidingon technologies, what frameworks to use and what database to pick. When often —especially if you are a beginner — it is a better idea to just get started,and make something with the tools you know.
This is the first part of a tutorial that will show how you can build a snake game in less thana hundred lines of JavaScript, without any frameworks. There is some HTMLand CSS in addition, but nothing scary. Any beginner to the web platform shouldbe able to go through the guide, and experienced developers will learnsomething new as well.
Getting started with Snake
Start with an empty HTML document and open it in Chrome.Insert the following code that just sets up a HTML document withstyle / script tags and a function to set up the game.
Let’s start from the top: The head tag. In here we have a title to put a documenttitle on the page, as well as a style tag containing styling to center the contentsof the page horizontally and change the font to a sans-serif one.
The the body element, which contains a h1 element with the title of the game anda single div element that will contain the game board. We have it tagged with the id ‘board’so we can access the element from JavaScript. We also have a script that will soon containall of our game logic.
The body element also has an onload handler, which calls the initGame functiondefined in the script tag. This means that once the document is completely loaded,the code inside initGame will run. There is nothing there yet, so lets’ get started!
Note: If you view the source code on all examples, there will be a script tag atthe bottom that handles integration with the iframe when the examples are included onthis page. You can inspect it if you like, but it is not necessary to understand it.
Creating the board
We’ll start out by creating the game board.
The board will be represented as a two-dimensional array, that is, an array of arrays.We create this as a constant variable inside the script tag called board, we alsodefine the width and height of the board with two constant variables. Here I havearbitrarily picked 26 by 16 cells (this is a convenient size to fit on screen).
To make it simple, we’ll build the entire board out of div elements, and will stylethese to look like cells, apples and the snake. We create these diivs by iterating overthe Y and X axes, creating columns and rows of items:
Each cell will be defined by an empty object {}. In this object we will put the state for each cell.
We need to fetch the board from the DOM (remember the <div?). Wedo this using document.getElementById and store it in a variable. This is done outsidethe loops.
Snake Game Html Code Pdf
For every cell, we create a div element on the board via document.createElement.Then we add this cell to the boardElement, meaning every cell will have a matching div in the DOM.
You can use the developer tools for Chrome to look at the document structure, and you willsee all the elements.
Finally, we need to store all these cells inside the board array of arrays.We do this by creating an array for every row, and pushing the cells intothis row in the inner loop, and every row into the board array for everyouter loop, giving us our final initGame function:
However, if you run this code, nothing will show up. This is because divelements by default are invisible, we need to give the some styling to makethem visible on the page.
To make the divs visible, we assign them a black background color, a width and aheight. We do this using CSS, by adding some code inside the <style> tag in the template.To style the cells we use the #board div selector. This targets all thediv elements inside the element with the id board.
If you try only this they will all lay out in a loooong column down the pagethat is 24 pixels wide. To fix this, we need to float the elements. This movesthem around so that there is not a line break after every element. Insteadthe page will now display as rows and columns of solid blocks.
The box-sizing property is necessary so that the width of the borders don’t make thecells wider than 24px. You can read up on box-sizing if you are curious about this.
If you view the above example, you will notice that the grid is not square,.We also need to limit the board in width, so that the grid is only 26 cellswide. We specify the width of #board to be 26 * 24px, and use the calcfunction in CSS to not have to calculate this number manually. The margin: automeans that the board will be centered horizontally on-screen.
We now have a black grid for the snake game!
It is not very interesting yet though, because we don’t have any snakeon the game board to control.
Keep track of the game state
Next we need to add the snake to the board. We start by defining the properties the snakehas in this game, there are a few:
- Direction — The snake is moving either left, right, up or down. We can store this as strings
'Up','Down','Left'and ‘Right’. - Position — Defined as a X and Y position on the board. Note that 0, 0 will be top left on the board and 25, 15 will be bottom right.
- Length — Length of the snake in segments.
Let’s create global variables for these properties:
We also need to store the tail of the snake. To keep track of this, we store the information about the tail in the board. So we’ll add a property snake to every cell on the board.
We’ll give it an integer value of 0 to denote that the snake is not on the space (at the start of the game).
Start the game
We also need to give some default values to the snake properties. We’ll do that in a new startGame function. This function will set all the properties to default values at the start of the game.
The snake will start moving upwards, with a length of 5 segments.It will start in the center of the board (divide width and height by 2), we need to use Math.floorhere to round down, since if the board width is 25, 12.5 is not a meaningful position on the grid.
Why create a new function for this? We could just use default values for global variables?The reason is we also need to do the same thing when the player dies to reset the game state, by putting it in a function we can reuse.
Snake Game Html Code Notepad
In other words: initGame will only run once for the entire application, but startGame will run multiple times.
Add a call to startGame from the end initGame (before the final }). With thisaddition, we’re done with the first part of the tutorial.
Wrapping up
Next time, we will make the snake visible on the board and implement keyboardcontrols, so that you can steer it around the board using the keyboard.
Snake Game Html Codepen
Continue with part 2 of the tutorial.