by

Snake Game Html Code



Hello! In this tutorial, I going to teach how to make a simple game using HTML, JavaScript, and CSS.

Here we are going to make a simple 8-bit Snake Game.

The important point is that our snake is formed by a chain of small squares.

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. Though, this game is usually played as a dual player. The current implementation is a single player and is more intended to show the concepts used and the potential behind it. Before I actually start explaining the code and implementation, I would like to touch the background by explaining the HTML Canvas element which is heart of the game.

The snake is moving with the help of an illusion wherein the last square is brought to the front.

This is built using a module pattern for code structure.

Snake

I am using Sublime Text for editing, you can use any editor of your wish.

Snake Game Html Code

Also read: 3D Photo/Image Gallery (on space) Using HTML5 CSS JS

How to make a simple game using HTML

Let’s begin by creating a canvas element first.

Proceed by creating a button.

Follow the code for the procedure.

I have created a canvas of id=’canvas1′.

For button:-

Now I have added instructions for the game.

Now we make the settings javascript file for our game.

Google Snake Game Html Code

The getElementById() method returns the element that has the ID attribute with the specified value.

The variable ctx stores the content of the canvas

Create some global variables.

The parameter of getContext() tells that canvas is in the 2d plane.

Snake And Ladder Game Html Code

Snake and ladder game html code

Now to draw the elements in canvas, create a javascript file and name it drawing.

Let’s draw the snake and its food.

The scoreText() function keeps the track of the score.

The cookie() function creates the food for the snake.

The bodySnake() function creates the head of the snake.

The above function creates the structure of the snake for our game. Initially, the length of the snake is 8 squares.

Game

Create the structure of the food at random places inside the canvas using the following function:-

Now, we have to check whether the snake collides with itself or not.

Code

Its time for the main function of our game.

Now, in the end we call the inint() function.

Don’t forget to close your module

Now, to add the controls we create a new file called application.js

The onekeydown event occurs when the user presses the arrow key.

The key bindings for the arrow keys are 37,38,39,40.

If the snake is facing left, then it cannot directly turn right because it would collide with itself.

We start by using a self-invoking anonymous function with drawModule() as a parameter.

Next, link your javascript file to the HTML document.

To add styling to your page use CSS.

I hope you enjoyed this tutorial.

Simple Html Game Code

Go ahead and make your own game and play!

Also, read JavaScript mousemove Event | Execute on moving the mouse pointer

Leave a Reply

Nov 4th, 2019
Never
Not a member of Pastebin yet?Sign Up, it unlocks many cool features!
  1. <html>
  2. <title></title>
  3. html, body {
  4. margin: 0;
  5. body {
  6. display: flex;
  7. justify-content: center;
  8. canvas {
  9. }
  10. </head>
  11. <canvas width='400' height='400'></canvas>
  12. var canvas = document.getElementById('game');
  13. var grid = 16;
  14. x: 160,
  15. // snake velocity. moves one grid length every frame in either the x or y direction
  16. dy: 0,
  17. // keep track of all grids the snake body occupies
  18. // length of the snake. grows when eating an apple
  19. };
  20. x: 320,
  21. };
  22. // @see https://stackoverflow.com/a/1527820/2124254
  23. return Math.floor(Math.random() * (max - min)) + min;
  24. // game loop
  25. requestAnimationFrame(loop);
  26. // slow game loop to 15 fps instead of 60 (60/15 = 4)
  27. return;
  28. count = 0;
  29. context.clearRect(0,0,canvas.width,canvas.height);
  30. snake.x += snake.dx;
  31. // wrap snake position horizontally on edge of screen
  32. snake.x = canvas.width - grid;
  33. else if (snake.x >= canvas.width) {
  34. }
  35. // wrap snake position vertically on edge of screen
  36. snake.y = canvas.height - grid;
  37. else if (snake.y >= canvas.height) {
  38. }
  39. // keep track of where snake has been. front of the array is always the head
  40. // remove cells as we move away from them
  41. snake.cells.pop();
  42. // draw apple
  43. context.fillRect(apple.x, apple.y, grid-1, grid-1);
  44. context.fillStyle = 'green';
  45. // drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is
  46. context.fillRect(cell.x, cell.y, grid-1, grid-1);
  47. if (cell.x apple.x && cell.y apple.y) {
  48. // canvas is 400x400 which is 25x25 grids
  49. apple.y = getRandomInt(0, 25) * grid;
  50. // check collision with all cells after this one (modified bubble sort)
  51. for (var i = index + 1; i < snake.cells.length; i++) {
  52. // snake occupies same space as a body part. reset game
  53. if (cell.x snake.cells[i].x && cell.y snake.cells[i].y) {
  54. snake.y = 160;
  55. snake.maxCells = 4;
  56. snake.dy = 0;
  57. apple.y = getRandomInt(0, 25) * grid;
  58. }
  59. }
  60. document.addEventListener('keydown', function(e) {
  61. // prevent snake from backtracking on itself by checking that it's
  62. // not already moving on the same axis (pressing left while moving
  63. // left won't do anything, and pressing right while moving left
  64. // shouldn't let you collide with your own body)
  65. // left arrow key
  66. snake.dx = -grid;
  67. }
  68. else if (e.which 38 && snake.dy 0) {
  69. snake.dx = 0;
  70. // right arrow key
  71. snake.dx = grid;
  72. }
  73. else if (e.which 40 && snake.dy 0) {
  74. snake.dx = 0;
  75. });
  76. requestAnimationFrame(loop);
  77. </body>

Html5 Snake Code

RAW Paste Data

Snake Game Html Code Pdf