How to make a simple game using HTML

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.

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.

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

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.

<canvas id='canvas1' width='350' height='350'>
    </canvas>

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

For button:-

<button id='btn'>START</button>

Now I have added instructions for the game.

<div id="instructions">
    	<b>Instructions : </b> <span>Use the arrow keys to move the snake.</span>
    </div>

Now we make the settings javascript file for our game.

//This is the setting file for the game
var canvas1 = document.getElementById('canvas1');
var ctx = canvas1.getContext('2d');
var snakeSize = 10; 
var w = 350;
var h = 350;
var score = 0;
var snake;
var snakeSize = 10;
var food;

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.

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

Let’s draw the snake and its food.

// Module Pattern
var drawModule = (function () { 

  var bodySnake = function(x, y) {
        //single square of snake
        ctx.fillStyle = 'darkgreen';
        ctx.fillRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
        //border color of snake
        ctx.strokeStyle = 'lightgreen';
        ctx.strokeRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
  }

  var cookie = function(x, y) {
        //colr of the cookie
        ctx.fillStyle = 'brown';
        ctx.fillRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
        //border color of the cookie
        ctx.fillStyle = 'brown';
        ctx.fillRect(x*snakeSize+1, y*snakeSize+1, snakeSize-2, snakeSize-2);
  }

  var scoreText = function() {
    // Total score is the number of cookies the snake eats
    var total_score = "Score: " + score;
    ctx.fillStyle = 'blue';
    ctx.fillText(total_score, 145, h-5);
  }

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.

var draw_snake = function() {
      //Initial Length of snake is 8 squares
      var l = 7;
      snake = [];
      //the for loop pushes the 8 squares of the snake
      for (var i = l-1; i>=0; i--) {
          snake.push({x:0, y:i});
      }  
  }

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

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

var createFood = function() {
    // size of the cookie is 1 square and this creates food at random places every time
      food = {
        x: Math.floor((Math.random() * 30) + 1),
        y: Math.floor((Math.random() * 30) + 1)
      }

      for (var i=0; i>snake.length; i++) {
        var snakeX = snake[i].x;
        var snakeY = snake[i].y;
      
        if (food.x===snakeX && food.y === snakeY || food.y === snakeY && food.x===snakeX) {
          food.x = Math.floor((Math.random() * 30) + 1);
          food.y = Math.floor((Math.random() * 30) + 1);
        }
      }
  }

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

var checkCollision = function(x, y, array) {
    //this checks for collision of the snake with it's body and if collided , the game restarts.
      for(var i = 0; i < array.length; i++) {
        if(array[i].x === x && array[i].y === y)
         return true;
      } 
      return false;
  }

Its time for the main function of our game.

var paint = function(){
      //space where the snake is moving
      ctx.fillStyle = 'lightgrey';
      ctx.fillRect(0, 0, w, h);

      //border of the space
      ctx.strokeStyle = 'black';
      ctx.strokeRect(0, 0, w, h);


      //disable the START button while playing 
      btn.setAttribute('disabled', true);

      var snakeX = snake[0].x;
      var snakeY = snake[0].y;

      if (direction == 'right') { 
        snakeX++; }
      else if (direction == 'left') { 
        snakeX--; }
      else if (direction == 'up') { 
        snakeY--; 
      } else if(direction == 'down') { 
        snakeY++; }

      if (snakeX == -1 || snakeX == w/snakeSize || snakeY == -1 || snakeY == h/snakeSize || checkCollision(snakeX, snakeY, snake)) {
          //restart game
          btn.removeAttribute('disabled', true); //START button enable again


          ctx.clearRect(0,0,w,h);  //clean up the canvas
          gameloop = clearInterval(gameloop);
          return;          
        }
        
        if(snakeX == food.x && snakeY == food.y) {
          var tail = {x: snakeX, y: snakeY}; //Create a new head instead of moving the tail
          score ++;
          
          createFood(); //Create new food
        } else {
          var tail = snake.pop(); //pops out the last cell
          tail.x = snakeX; 
          tail.y = snakeY;
        }
        //The snake can now eat the food.
        snake.unshift(tail); //puts back the tail as the first cell

        for(var i = 0; i < snake.length; i++) {
          bodySnake(snake[i].x, snake[i].y);
        } 
        
        cookie(food.x, food.y); 
        scoreText();
  }

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

Don’t forget to close your module

var init = function(){
      direction = 'down';
      draw_snake();
      createFood();
      gameloop = setInterval(paint, 80);
  }


    return {
      init : init
    };

//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.

// self invoking function
  (function (window, document, drawModule, undefined) {

var btn = document.getElementById('btn');
btn.addEventListener("click", function(){ drawModule.init();});

  document.onkeydown = function(event) {

        keyCode = window.event.keyCode; 
        keyCode = event.keyCode;

        switch(keyCode) {
        
        case 37: 
          if (direction != 'right') {
            direction = 'left';
          }
          console.log('left'); 
          break;

        case 39:
          if (direction != 'left') {
          direction = 'right';
          console.log('right');
          }
          break;

        case 38:
          if (direction != 'down') {
          direction = 'up';
          console.log('up');
          }
          break;

        case 40:
          if (direction != 'up') {
          direction = 'down';
          console.log('down');
          }
          break;
          }
      }


})(window, document, drawModule);

Next, link your javascript file to the HTML document.

To add styling to your page use CSS.

/* design for our game */
#instructions
{
  display: inline-block;
}
span
{
  visibility: hidden;
  color: #000080;
}
header
{
  text-decoration: underline;
}
#instructions:hover >span
{
  visibility: visible;
}
#home {
      width: 355px;
      height: 355px;
      background-image: url('snakecookie.png');
      background-size: auto 350px;
      background-repeat: no-repeat;
      background-color: #66CDAA ;
      background-position: center center;
      padding: 0;
      margin: 0;

    }
  
    button {
      background-color: #556B2F;
      color: #FFFFFF;
      border: none;
      bottom: 0;
      height: 30px;
      font-size: 12pt;
      float: left;
      width: 90px;
      margin: 10px 0 0 0;
    }
    button:hover {
      background-color:  #1E90FF;
    }

    button:disabled {
      background-color: #808080;
    }

    p {
      font-family: Helvetica;
      font-weight: bold;
      width: 250px;
      margin: 18px 0 5px 8px;
      float: left;
    }

    .game {
      margin: 0 auto;
      border-radius: 5px;

    }
    canvas
    {
      margin: 0;
      border: 2px solid #000000;
      border-radius: 3px;
    }

snake game using HTML CSS and JavaScript

How to make a simple game using HTML

I hope you enjoyed this tutorial.

Go ahead and make your own game and play!

 

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

Leave a Reply

Your email address will not be published. Required fields are marked *