Developing Brain Tuner like game using Javascript

Introduction

We can find a game named Brain Tuner in IGoogle. It helps the players to sharpen their calculation power. IGoogle also provides a widget to place this in any website. I thought it to develop my own while developing a children website. It consists simple and very easy steps.

This game purely is developed using javascript and HTML Controls. So it fits in any browser. I tested this in IE-8 and Firefox 3.6.12.

You can find various Javascript methods while developing this. Some of these are:

Generating Random numbers.
Using Timer to start and stop Time Period.
Using setTimeout and clearTimeout fucntions.
Adding numbers by using parseInt function

This example is limited to genreate 10 calculations only. You can customize this as per your requirement.

Steps To Develop Brain Tuner like Game:

Place a Button and a Textbox
Next, place a table within a div tag, which is hidden first when you open this game.
Copy the javascript code in < head> < /head> part as shown below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%--Brain Tuner like game by www.codemyne.net--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Developing Brain Tuner like game using JavaScript</title>
<script type="text/javascript">
var x = "correct.jpg";
var y = "wrong.jpg";
var z = "blank.jpg";
var correct = 0;
var wrong = 0;
try {
var sec = 0;
var tout;
var timer_is_on = 0;
            
function timedCount() {
                document.getElementById('txt').value = sec;
                sec = sec + 1;
                tout = window.setTimeout('timedCount()', 1000);
            }
function doTimer() {
    if (!timer_is_on) {
                    start();
                    timer_is_on = 1;
                    timedCount();
                }
            }
            function ResetGame() {
            document.getElementById('txt').value = "";
            ResetTextBoxes();
            //RemoveTableRows();
            clearTimeout(tout);
            sec = 0;
            timer_is_on = 0;
            doTimer();
            }
            function ResetTextBoxes() {
                correct = 0;
                wrong = 0;
                document.getElementById('Text1').value = "";
                document.getElementById('Text2').value = "";
                document.getElementById('Text3').value = "";
                document.getElementById('Text4').value = "";
                document.getElementById('Text5').value = "";
                document.getElementById('Text6').value = "";
                document.getElementById('Text7').value = "";
                document.getElementById('Text8').value = "";
                document.getElementById('Text9').value = "";
                document.getElementById('Text10').value = "";
                document.images['A'].src = z;
                document.images['B'].src = z;
                document.images['C'].src = z;
                document.images['D'].src = z;
                document.images['E'].src = z;
                document.images['F'].src = z;
                document.images['G'].src = z;
                document.images['H'].src = z;
                document.images['I'].src = z;
                document.images['J'].src = z;
            }           
        }
        catch (e) {
            alert(e);
        }
        function start() {
        var min = 0;
        var max = 10;
        var s;
        var s1 = '+';
        var s2 = '-';
        var s3 = 'x';
        // get the reference for the body
        var mybody = document.getElementsByTagName("body")[0];
        // get the reference for the div
        var divTable = document.getElementById("divTable");
            
            divTable.style.visibility = 'visible';
            divTable.style.borderStyle = 'solid';
            divTable.style.borderWidth = '2';
            divTable.style.borderColor = 'Teal';
            divTable.style.width = '210px';          
            mytable = document.getElementById("tableId");
            for (var i = 0; i < 10; i++) {
                mytable.rows[i].cells[0].innerHTML = Math.floor(Math.random() * max);
                s = Math.floor(Math.random() * 3);
                    if (s == 0) {
                    mytable.rows[i].cells[1].innerHTML = s1;
                }
                    if (s == 1) {
                    mytable.rows[i].cells[1].innerHTML = s2;
                }
                    if (s == 2) {
                    mytable.rows[i].cells[1].innerHTML = s3;
                }
                    var cell0 = mytable.rows[i].cells[0].innerHTML
                    if (mytable.rows[i].cells[1].innerHTML == "-") {
                    mytable.rows[i].cells[2].innerHTML = Math.floor(Math.random() * cell0);
                }
                    else {
                    mytable.rows[i].cells[2].innerHTML = Math.floor(Math.random() * max);
                }
                mytable.rows[i].cells[3].innerHTML = '=';
            }
            document.getElementById("Text1").focus();
        }
            function Calculate(row, txt, imgname) {
            mytable = document.getElementById("tableId");
                var val1 = mytable.rows[row].cells[0].innerHTML;
                var val2 = mytable.rows[row].cells[2].innerHTML;
                var symbol = mytable.rows[row].cells[1].innerHTML;
                var textbox = document.getElementById(txt);
                var result;
                var ans;
                if (textbox.value != "") {
                ans = textbox.value;
            }
            if (symbol == "+") {
                result = parseInt(val1) + parseInt(val2);
            }
            if (symbol == "-") {
                result = parseInt(val1) - parseInt(val2);
            }
            if (symbol == "x") {
                result = parseInt(val1) * parseInt(val2);
            }
            if (ans == result) {
                document.images[imgname].src = x;
                correct++;
            }
            else {
                document.images[imgname].src = y;
                wrong++;
            }
            result = null;
            ans = null;
            if (row == 9) {
            clearTimeout(tout);
            var reachedtime = document.getElementById('txt').value;
            alert('Finished in ' + reachedtime + '  Sec. \n Correct  ' + correct + '\n wrong  ' + wrong);
            correct = 0;
            wrong = 0;
            }
        }     
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        <h2>Brain Tuner Game</h2>
        </div>
        <div>
        <input type="button" value="Play" onclick="ResetGame()" />
        <input type="text" id="txt" readonly="readonly" size="1" />      
        </div>
        <br />
        <br />
        <div id="divTable" style="visibility: hidden;">
        <br />
        <table id="tableId" cellpadding="5" cellspacing="5" style="font-size: 20px; font-weight: 600">
        <tbody id="tbody">
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text1" size="3" onblur="Calculate(0,'Text1','A')" />
        </td>
        <td>
        <img alt="" name="A" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text2" size="3" onblur="Calculate(1,'Text2','B')" />
        </td>
        <td>
        <img alt="" name="B" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text3" size="3" onblur="Calculate(2,'Text3','C')" />
        </td>
        <td>
        <img alt="" name="C" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text4" size="3" onblur="Calculate(3,'Text4','D')" />
        </td>
        <td>
        <img alt="" name="D" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text5" size="3" onblur="Calculate(4,'Text5','E')" />
        </td>
        <td>
        <img alt="" name="E" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text6" size="3" onblur="Calculate(5,'Text6','F')" />
        </td>
        <td>
        <img alt="" name="F" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text7" size="3" onblur="Calculate(6,'Text7','G')" />
        </td>
        <td>
        <img alt="" name="G" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text8" size="3" onblur="Calculate(7,'Text8','H')" />
        </td>
        <td>
        <img alt="" name="H" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text9" size="3" onblur="Calculate(8,'Text9','I')" />
        </td>
        <td>
        <img alt="" name="I" src="blank.jpg" />
        </td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
        <input type="text" id="Text10" size="3" onblur="Calculate(9,'Text10','J')" />
        </td>
        <td>
        <img alt="" name="J" src="blank.jpg" />
        </td>
        </tr>
        </tbody>
        </table>
        <br />
        <br />
        </div>
    </form>
</body>
</html>

Here is the your 'Brain Tuner' game.
Note: Use 'TAB' to move to next row.

Comments/Suggestions are invited. Happy coding......!

Comments Post a Comment

Tags

About me

Our Contacts

Latest Tweets

Comments Post a Comment

Tags

About me

Our Contacts

Newsletter

Latest Tweets