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