Javascript mind reader game

How to build HTML5 Mind Reader game using javascript

Have you ever played a game called The Flash Mind Reader ? It’s a simple flash game. You can play online Here or download the game by clicking Here(upnzip the folder and open the exe file).

This is what we are going to build. Mind reader game using javascript.

How to play

  • Assume a two digit number, suppose 57
  • Add together both digits 5 + 7 = 12
  • Subtract the total from that number 57 – 12 = 45
  • Look at the chart and find relevant symbol for 45
  • Then click on the circle and see what happen

Have you figured out the trick ?

How it works

It’s a pretty simple logic. Whatever you choose the two digit number the final result of your calculation will be multiples of 9. And the symbols beside these multiples(9, 18, 27, 36, 45, …) are same. Every time you click on try again button, symbols are shuffled and the a new symbol is selected for multiples of 9.

Let’s build this game using javascript

Our game is only consists of three files.

  • index.html
  • game.css
  • game.js

We will be using

  • Bootstrap
  • Font Awesome
  • And jQuery, because manipulate DOM with jQuery is very easy.

We’ll use CDN of Bootsrtap, Font awesome and jQuery.

This is the main part of HTML

Let’s write game logic

Font awesome icon names are stored in icons array.

HTML elements are wrapped with jQuery and stored in variables.

Then we declared a function renderIcons. This function does the main job. There is a for loop in this function. This loop runs 100 times as we are going to render 100 icons in chart. We generate random number between 0 to 30. We can also use (icons.length – 1) instead of 30. We will use this random number to grab random icon name from icons.

Now the main trick comes up. We check the 9th loop is running, if yes we store that particular random number to resultIconIndex variable. Because we’ll use this number for every multiples of 9. To do that we check if the current loop no. is a multiple of 9 by this expression (i % 9 == 0), if yes, we assign resultIconIndex to rand variable.

We’ll render chart by using jQuery append method. Then 100 of divs named single_icon will be appended to all_icons divThe loop iterator variable i and the icon name from array icons[rand] are interpolated into single_icon.

After loop completes its iteration, each 25 of single_icon wrapped by bootstrap class col-sm-3 and col-xs-6. So that the chart shows in four column in desktop and 2 columns in extra small screen.

Another function called showResult, This function show/hide the loader, remove icon chart from DOM and add icon class to span tag that will be shown up as result. Result icon is selected from icons array by random number resultIconIndex that was generated during 9th loop runtime.

At the end we bind showResult function to click handler of result_icon rectangle, renderIcons function to Play again button.

I wrote this few lines of jQuery for pop up boxes. It’s not related to game logic, so don’t worry about it.

game.js file look like this

Download whole project. .

Leave a Reply

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

Categories