Wanna Play My Diglett Hunter Game?

This is my third semester in Faculty of Computer Science, University of Indonesia. We got an interesting assignment from Web Design and Programming class: to create a “catching mouse” game. The game must be created as a plain HTML file with Javascript and must make use of browser cookies. The deadline was about two weeks.

So, here is my submission: Diglett Hunter. It has poor design; but well, at least the game works. You can choose on of the three themes for the interface. When you make a new high score, your score will be recorded (in browser cookies, not in server :D).

Here is a quick explanation on several parts of the game. Note that this explanation is not exhaustive. It is assumed that you know the basics of HTML DOM and Javascript.

Generating Board

The board consists of 5 x 5 unit squares, generated by the following JS code. This is actually a <table> that consists of 5 <tr>s, each consisting of 5 <td>s.

function genBoard()
    document.write('<table id="tableBoard">\n');
    for (var i = 0; i < 5; i++)
        for (var j = 0; j < 5; j++)
            document.write('<td id="tdCell' + i + j + ');">');
            document.write('<a href="#"><img id="imgCell' + i + j + '" src="mouse.png" onclick="hitCell(' + i + ', ' + j + ');"/></a>');

Each cell has onlick attribute that specifies what to do if the user clicks on that cell. Please consult to scripts.js for more reference 😀

Changing Theme

It is pretty simple; just changing the href attribute of the <link> tag that specifies the stylesheet. The tag has id “linkTheme”.

function changeTheme(themeName)
    document.getElementById('linkTheme').href = themeName + '.css';

Updating the Top Scorers

The top scorers are stored in the cookies. The n-th top scorer’s name is stored as “topNamen=xxx“, while the score is stored as “topScoren=xxx“.

First, retrieve the top 10 scorers from the cookies and save them in arrays.

function updateTopScorers(playerName, score)
    var topNames = new Array();
    var topScores = new Array();
    for (var i = 1; i <= 10; i++)
        topNames[i] = getCookie('topName' + i);
        topScores[i] = getCookie('topScore' + i);
        if (topNames[i] == '')
            topNames[i] = '?';
        if (topScores[i] == '')
            topScores[i] = 0;
            topScores[i] = parseInt(topScores[i]);

Then, we take the new score into account. Just iterate all scores and find the first score that is lower than the new score. It is pretty much like the Insertion Sort algorithm.

    for (var i = 1; i <= 10; i++)
        if (score > topScores[i])
            for (var j = 10; j > i; j--)
                topNames[j] = topNames[j-1];
                topScores[j] = topScores[j-1];
            topNames[i] = playerName;
            topScores[i] = score;
            alert('Congratulations! You make a new top scorer!');

After that, update the cookies and the top scorers list in the HTML page.

    for (var i = 1; i <= 10; i++)
        setCookie('topName'+i, topNames[i]);
        setCookie('topScore'+i, topScores[i]);

        document.getElementById('tdTopName'+i).innerHTML = topNames[i];
        document.getElementById('tdTopScore'+i).innerHTML = topScores[i];

The top scorers are shown in a table, in <td>s with ids tdTopNamen and tdTopScoren.

For the rest of the game, you can take a look at the .js file (“script.js”). It has some documentation, but only in Indonesian.

I hope you like this lame game! 😀

About Ashar Fuadi

Ashar Fuadi is a competitive programmer from University of Indonesia. He loves to code, especially for TopCoder SRM, Codeforces, and ICPC.
Follow Ashar on Google+ and Twitter.


  1. aw. crap.
    60 points with 14 hits, 16 misses.

    here’s some ideas for the game:
    1. When it hit, add an animation that it get hurt or something.
    2. Digtrio just somehow came up and dizzy me for a while, because there is no rule says anything about it. Does diglett just evolve after being hit? 😀

    anyway, cool stuff! 😀

Speak Your Mind