Simple Html Game Code

 

In this tutorial, we will create a really simple memory game using HTML5, CSS3, and Javascript. Users will be able to reveal some images and memorize the location of the picture. The purpose of this game is to reveal all the same images. Here is the list of the requirements for our front-end code.

  1. Simple Html Game Source Code
  2. Simple Memory Game Html Code
Pokemon
  • Jun 07, 2021 Basic Snake HTML Game. Snake is a fun game to make as it doesn't require a lot of code (less than 100 lines with all comments removed). This is a basic implementation of the snake game, but it's missing a few things intentionally and they're left as further exploration for the reader.
  • Alvaromontoro / snakes-and-ladders. Code Issues Pull requests. Snakes and Ladders: a multiplayer game developed using only CSS and HTML without a single line of JavaScript. Css game html html5 css3 html-css no-javascript css-games html-game. Updated on Sep 23, 2018.

Game: Group: Ian Boswell: http://steamcommunity.com/id/ianboswell.

  • We will use the following external libraries which are JQuery and Animated.css (for image effect).
  • We will have a canvas image where our images will be placed. We are going to have 15 different unique images. The total images will be 30 images. Each of a unique image will be duplicated. That's why 15 x 2 = 30 images.
  • We will have statistic game which will display a number of image clicks and number of correct guesses.
  • When creating our game, we will consider the following screen, if a user using a mobile to view our game, it will be automatically resized accordingly. The size of our game width will cover: over 640px, between 321px and 640px and max-width of 320px

Here is the list of our game logic.

  • In our game canvas, there will be two layers available, the first layer will contain our images and while the top layer will have question mark images to cover our images so they are not displayed or revealed.
  • We are going to create an array of 30 images slots which will contain our 15 unique images and a copy of another 15 duplicated images. Once created, we will shuffle the 30 images, so every time the game is loaded, they are randomly placed.
  • Users will be able to reveal the image by clicking the question mark image cover. Users can click two images at a time. If both images do not match, then they will be closed again otherwise if they do match, they will stay open. We will use animated.css effect to flip the image open and close.
  • We will have statistic game which will display a number of image clicks and number of correct guesses.
  • When creating our game, we will consider the following screen, if a user views the game using a mobile, it will be automatically resized accordingly by using css3 media. The size of our game width will cover: over 640px, between 321px and 640px and max-width of 320px
  • When users have revealed all images, we will then display a message box to congrats users. Users will be able to restart the game again. By default this message will be hidden.

Here is the full code of the HTML5 file.

Things to remember when to load your javascript external files, always remember to place them at the end of the body. This will enhance the speed of your page load as the scripts files will be loaded at the very end. Just remember to make sure the script to be executed when the page has been fully loaded.

From the above code you can see that we have divided the game structure into 3 sections. They are:

  • canvas-game div
    This section will load the images and cover images content.
  • game-statistic div
    This section will display the statistic of number of clicks and the number of correct guess.
  • game-message div
    This section will display the game message to congrats users when the game is over. Users will be able to restart the game by clicking the button Restart. By default this section will be hidden using CSS.

CSS3 Fulle Code.

If you see above code, you will notice I have included 3 styles of the game if the game is viewed using different screen size. I will explain some of the CSS codes that I think is important and what they do for the game.

Based on the above code, we want to make sure there is no padding or margin applied on the default html5 document body. The text-align: center is used to center all the body content in the center.

In the canvas game, we want to set the margin position to 0 auto, this will ensure the canvas game is positioned centrally and by applying text-align:left, this will make sure inside the content of the canvas-game will be aligned to left. You also notice I include the position:relative to canvas-game this is because when displaying the cover images layer, I want it to be displayed in the exact same location as the images layer. The cover images layer will be positioned as absolute against this layer. You can see the following CSS code, I use the position left and top to 0 positions and with z-index property to 100, it will make it sits nicely on top of this layer. You can check more details about z-index by clicking this tutorial link.

For the images and image wrapper, it will be sized to 100px x 75px and with layout images slots as 6 images in each row and up to 5 rows which in total will be 30 image slots. That's when you see our game-canvas width it will be 612px, this number comes from: 6 x 100px which end up to 600px. The 12px comes from the border size of each picture, each side on left and right hand side will have 1px which end up 6 x 2px for each picture which is 12px. If we sum up the total it will be 600px + 12px. For the height, the logic of calculating the height will be the same as calculating the width.

For the game message, by default this section will be hidden, this can be done by setting the display css to none.

Simple Html Game Code

For adjusting the game screen, you can see I have included 2 extra media queries for a size up to 320px and 640px. This can be identified by specifying the following CSS.

The last part of the code will be the logic itself which is the javascript.

Javascript Fulle Code.

Let me explain of what the following codes do.

Simple Html Game Source Code

The above code is pretty simple to understand, it basically perform two loops one loop is to fill in 15 numbers (starting from 0) and a copy of the duplicated 15 numbers. This array is used to represent the images name. Once the array has been filled in, we then called a shuffleArray function to shuffle the content of the array.

The above code will insert images into a div tag repeated at 30 times. It also inserts image cover (question image) which will sit nicely at top of the image. We then add a click event to the box-cover. So when users click this cover image, it will reveal the behind image. I have included the comments into the code, the idea is users can only reveal two images at a time, if they are matched, they will be kept open, otherwise, it will be flipped and closed. Once it reveals all the images, it will then display a congrats message and users will be able to restart the game to play again.

Simple Memory Game Html Code

Demo of Memory Game

If you want to see the Memory Game in action, you can click this link.

Demo Files

You can download the sample code below.

Do you have any questions? Feel free to post your comment below.