Let playAgain = document.querySelector(".playAgain") Let popup = document.querySelector(".popup") The first thing we need to do is define our variables: let grid = document.querySelector(".grid") The snake and Apple classes are to show us where the snake and bonus is on the game, while the popup class is a fixed div that houses the replay div.Īt this point, you should have something like this: Structure with HTML and CSS I included the comments here to help you actually see the divs, so as time goes on we will uncomment the code. We will be dynamically creating the game board contents from JS but we can give a width and height here (with the. The flex wrap property simply moves the divs to the next line, preventing them from going past the set dimension of their parent element (grid). This allows the contents (div) of this grid to line up in a horizontal manner as if they were inline elements instead of the normal block display which they possess. In the CSS, the grid which is the gameboard has a set dimension and a display of flex. And the popup class will hold our replay button.The class button basically contains a button for users playing the game on a phone (we will automate it with the keyboard for desktop user).There's a div of class grid that will house the game (this is going to be a 10 by 10 grid).We have a div of class scoreDisplay that will display our scores.Then the game is over when the snake runs into itself or any of the four walls of the box.Īlright, let's start with the HTML and CSS (the skeleton for our game). Once it successfully eats the apple, the length of the snake increases and the movement becomes faster.
#Snake vs block keyboard how to
In this article I am going to show you how to build a snake game with JavaScript.Ī snake game is a simple game where a snake moves around a box trying to eat an apple.
0 kommentar(er)
