Memory Blocks Game using HTML, CSS and JavaScript

Published in

Nerd For Tech

4 min readJun 28, 2021

With the oncoming of the three pillars of modern web development — HTML, CSS and JavaScript, web development has shifted to a higher level with more interactiveness and mobile-app like experience. Web games are also trending today with realistic movements and great interactivity. This article will discuss a web-based Memory Blocks Game, built completely using HTML, CSS, and JavaScript. Memory Blocks game is a memory game where you open two blocks at a time — if both the images in the blocks matches, you proceed further up the game, else you lose an attempt from the available attempts.

Components

The game is a client-side only game with three components: HTML Framework, CSS Styling, and JavaScript interactivity code. HTML defines the basic framework, like boxes, buttons etc for displaying content. CSS gives the styling, colour and required animations and JavaScript is for programming — Interactivity.

UI Design

Before we get to code, let us take a look at the UI design we are planning — There are three major UI designs to be generated

Intro Screen — Introduction of the game
Difficulty mode selection — Selection for a difficulty level for the game. The difference between each level will be explained in a later section.
Gameplay area — This is where the user plays the actual game.

Let us take a look at each of these designs.

HTML Framework

The HTML Framework defines the skeletal structure of the UI. It does not include any colours or styles, but only the plain skeletal structure and the display contents. The HTML code for the above design is given below.

CSS Styling

CSS Styling is required for all colours and alignment of the elements in the HTML framework to ensure the visual quality of a website. Similarly, CSS can also be used to implement animations and visual effects in a website. If you observe the above HTML code, you can find a lot of lines relating to CSS styling. Few CSS styles are embedded in the HTML itself while other stylings are given separately in another file:

JavaScript Code

JavaScript adds interactivity and dynamicity to a website. Our game here requires users to interact with it. It needs to be dynamic (game setup should change each time the user executes it) to become more foolproof.

The script provides the following functionalities — Let us understand what functionality each of these methods provides:

function changeImage(a): Each time a block is clicked on by a user, the image behind the block shows up on the block. If two blocks are opened by the user (which is the max opening this game allows), the images of the two blocks are compared to see if it matches (pre-fixed filenames are used to compare the images). If a match happens, the blocks are hidden, else the blocks close back and the game continues until all the blocks are opened or the user is exhausted of attempts.
function hideIntro(): This function hides the intro screen after a few seconds of the display. This method does not have any interactivity with the user.
function shuffle(): The shuffle function adds dynamicity to the game during each iteration. Image names are read into an array and shuffled randomly. This ensures that images are spread across the block and is different for each execution of the game.
function setBackground(): Sets the background image for each block. The images are not shown, but their names are ordering is assigned to each block. The blocks are set to black by default and the image is shown when the user clicks on it.
function selectDifficulty(): Shows the modal box to select difficulty.
function setDifficulty(): Gets the difficulty level chosen by the user and sets it into a variable. There are three difficulty levels for the user to chose — Easy, Intermediate and Difficult. For each level, the number of blocks remains the same but the number of attempts changes — 30, 27 and 25 respectively.
function restartGame(): Resets the gameplay area and scores including the image arrangement and difficulty levels. The previous progress will be lost.
function playAgain(): Allow users to play the game again once the game ends (either by completing the game successfully or by attempts getting exhausted).

Future Work

Create a login system for users to log in and save their previous gameplay results.
Optimize the web app for mobile devices.
Improve animations for block flips.
Include multiple themes for images in blocks (Presently I have used Programming-related images but can include other themes as well).

Thank you for reading!

Find this project on GitHub: https://github.com/vishnu-u/web-based-memory-blocks-game

Find me on LinkedIn: https://www.linkedin.com/in/vishnuu0399/

Know more about me: https://bit.ly/vishnu-u