HTML Snake Game

Introduction

Making Snake is enjoyable since it doesn't need a lot of code less than 100 lines when all comments are removed. That is a simple version of the snake game; certain elements are purposefully left out for the reader to discover.

A basic game called "Snake Game" involves a snake moving around a box in an attempt to eat an apple. Once it has consumed the apple, the snake grows longer and moves more quickly. The game is finished when the Snake runs into itself or any of the box's four walls.

Additional Research

Score

The Snake should get one point for eating an apple. Apply context. Use fill Text() to show the score on the screen.

Support for touchscreens and mobile

Let the game resize to the size of a phone. Look at

/straker/pen/VazMaL on codepen.io

to accommodate touch controls

And Improve the spawning of apples

Even if the Snake is already there, the apple appears on any random grid in the game. Please make it so that it appears only in vacant grid spaces.

<h1>snake game </h1>

<div class="scoreDisplay"></div>

<div class="grid"></div>

<div class="button">

  <button class="top">top</button>

  <button class="bottom">bottom</button>

  <button class="left">left</button>

  <button class="right">right</button>

</div>

<div class="popup">

  <button class="playAgain">play Again</button>

</div>

This HTML is really simple.

Our scores will be shown as a division of the class score. Display.
The game will be in a class grid division, measuring 10 by 10.
For customers playing the game on the phone, the class button essentially includes a button (we will automate it with the keyboard for desktop users).
We'll save our replay button in the popup class as well.

CSS

body {

  background: rgb(212, 211, 211);

}

.grid {

  width: 200px;

  height: 200px;

  border: 1px solid red;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;

}

.grid div {

  width: 20px;

  height: 20px;

  /*border:1px black solid;

box-sizing:border-box*/

}

.snake {

  background: blue;

}

.apple {

  background: yellow;

  border-radius: 20px;

}

.popup {

  background: rgb(32, 31, 31);

  width: 100px;

  height: 100px;

  position: fixed;

  top: 100px;

  left: 100px;

  display: flex;

  justify-content: center;

  align-items: center;

}

The CSS grid, or gameboard, displays flex and a fixed size. This allows the grid's contents (div) to align horizontally, much like inline components, rather than the typical block display they now have.

The flex-wrap feature prevents the divs from expanding over the grid's predefined dimension by moving them to the next line.

The components of the game board will be created dynamically by JS; however, in this case, we may specify the width and height (using the grid div). Over time, we will remove the comments from the code since I put them here to make the divs easier to read.

Whereas the replay div is housed in a fixed div called the popup class, the Snake and Apple classes indicate where the Snake and bonus are in the game.

HTML Online Code Editor

Take advantage of OneCompiler's HTML online code editor to write, run, and share HTML code online without cost. Utilizing the most recent version of HTML5, it's one of the most feature-rich and reliable online code editors for the HTML language. With OneCompiler, you can quickly and easily begin using the HTML compiler. Upon selecting HTML as the language, the editor displays boilerplate code examples. Beginning with the scripts.js tab, you may provide information about the scripts and stylesheets, and you can code.

About HTML

In 1991, Berners-Lee developed HTML, or Hyper Text Markup Language, now the industry standard markup language for Web sites. HTML is used on almost every webpage on the internet.

Syntax assistance

A document declaration of <!DOCTYPE html> must precede any HTML document.
starting with <html> HTML pages terminate with </html>.
With <h1> to <h6> as the heading definitions, <h1> is the most significant.
Head and the least significant subheading is <h6>.
The <p>..</p> element defines paragraphs here.
It is the <a> element that defines links.
Example

<a href="https://onecompiler.com/html"> Internet HTML compiler

<img> tags define images, with the image name serving as the src property.
Clickable elements are denoted by <button>.The tag </button>
Unordered/bullet lists are defined in <ul>, whereas ordered/number lists are defined in <ol>. <li> defines the list of components.

Features and elements of HTML

Everything is an HTML element From the start to the end tag.
The HTML element
content is the text between an element's start and finish tags.
While anything may be a tag name, choosing the relevant term corresponding to the material used is best.
Keep the final tag in mind.
We refer to items that are devoid of content as such.
Attributes are a way for an element to have more details about itself.
The following example uses an as the tag name and href as an attribute.
Example:

<a href="https://onecompiler.com/html">HTML online compiler</a>

HTML Tables

Tables in HTML are specified inside the <table> element.
In the <tr> element, the table row should be specified.
The <th> element should specify the table heading.
In the <td> tag, table data should be specified.
In the <caption> element, the table caption has to be specified.

Javascript - HTML

To enhance interactivity, JavaScript is included in HTML sites.
The HTML scripting element, <script>, is used for writing code.
Script code may be written in this tag, or you can reference an external script.
Example :

JavaScript, which manages the logic of the Snake and its presentation to the canvas, will go here after the canvas adds the script tag. First, let's specify what ought to happen if the window is. On load is triggered. We want the canvas to periodically repaint itself with the Snake and Apple's updated locations and an event listener for player key presses.

You now have a basic understanding of operating with an HTML canvas element. The `draw` function, which will be called regularly to update the canvas, should now be defined. An elementary illustration of how the `draw` function may seem is as follows:

function draw() {

// Clear the canvas

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw something on the canvas

  ctx.fillStyle = "blue";

  ctx.fillRect(50, 50, 100, 100);

}

After clearing the canvas using the `draw` function, a blue rectangle of 100 pixels in width and height will be drawn at (50, 50). The `keyDownEvent` function, which will manage keyboard input, should now be defined:

function keyDownEvent(e) {

  // Log the keycode of the pressed key

  console.log("Key pressed: " + e.keyCode);

}

The pressed key's keycode will be recorded in the console by this {keyDownEvent} function. You are welcome to modify these features to meet your requirements!

← Prev Next →

HTMLs Tutorial

HTML5 Advance

Misc