JavaScript Challenge #2 (Whac-A-Moo)

Frameworks & Extensions

Fiddle Options

http://mootools.net/blog/2012/08/01/javascript-challenge-2/ One of the most common requirements of web applications is to be able to respond to user input, and in particular clicks (or touches). Continuing with our theme of element generation (and in some cases animation); this week’s challenge will be to create a basic whac-a-mole game. The point of the game will be to click on highlighted elements to increase score. This can be as basic or as intricate as you wish it to be, but it should resemble the following diagram… The green block represents the block a player must click in order to gain points. This means you will need logic to randomly select one of the possible blocks and highlight it. You also need to register user clicks and update the score “label”. Hint: at times when you need to add many of the same kind of event to a variable amount of elements (in this case blocks); it is helpful and even efficient to use event delegation. You will need to use the setInterval() function or the setTimeout() function to create a predictable amount of time between each click or highlight.

Normalized CSS

Body tag

DTD

Framework <script> attribute

External Resources

Languages

Results

Ajax Requests

Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, http://jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML.

Please read API documentation and follow examples.

Examples

Legal, Credits and Links

Created and maintained by Piotr and Oskar.

Hosted by DigitalOcean.

Special thanks to MooTools community.

License

All code belongs to the poster and no license is enforced.

JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.

Links

Please read the documentation.
For updates please follow our blog, tweets or become a fan.

Tip JSFiddle

Keyboard shortcuts

HTML

var ch2 = new Object({
    'cols': 7,
    'rows': 4,
    'count': 0, // total count (auto set on create)
    'seconds': 0, // start
    'time': 20, // max seconds
    'timeout': null, // timeout id
    'duration': 1000, // how many ms hole will be on
    'difficulty': 10, // how many ms hole-on-duration will decrease each step 
    'points': 0,

// fill board with holes
    'createHoles': function() {
        var b = document.getElementById('board');
        b.style.width = this.cols * 56 + 'px';
        b.style.height = this.rows * 56 + 'px';

var e = null, id = 1; // element and it's id
        for (var r = 0; r < this.rows; r++) {
            for (var c = 0; c < this.cols; c++) {
                e = document.createElement('div'); // create element
                e.className = 'hole';
                e.id = 'hole-' + id;
                b.appendChild(e); // add to board

// add onclick event
                if (e.attachEvent) {
                    td.attachEvent('onclick', 'ch2.clickHole(' + id + ')');
                } else {
                    e.setAttribute('onclick', 'ch2.clickHole(' + id + ')');
                }

id++;
            }
        }

this.count = this.cols * this.rows; // set total hole count
    },

'clickHole': function(id) {
        var hole = document.getElementById('hole-' + id);
        if (hole.className != 'hole') {
            this.points += 10;
            document.getElementById('score').innerHTML = this.points;
            hole.className = 'hole'; // prevent multiple clicking
        }
    },

// no params - initialize
    'highlightHole': function(id, toggle) {
        if (typeof id === 'undefined') {
            // initialize
            id = this.generateRandom();
            toggle = 'on';
        }
        toggle = toggle || 'off';

'resetHoles': function() {
        for (var i = 1; i <= this.count; i++) {
            document.getElementById('hole-' + i).className = 'hole';
        };
    },

// return number betwenn 1 and 'count'
    'generateRandom': function() {
        return Math.floor((Math.random() * this.count) + 1);
    },

'newGame': function() {
        this.resetGame();
        this.highlightHole();
    },

'resetGame': function() {
        clearTimeout(this.timeout);
        this.seconds = 0;
        this.points = 0;
        this.duration = 1000;
        document.getElementById('score').innerHTML = 0;
        this.resetHoles();
    }
});

ch2.createHoles();

JavaScript

CSS

Result

Frameworks & Extensions

Fiddle Options

External Resources

Languages

Ajax Requests

Examples

jQuery

Dojo

Mootools

YUI

Processing.js

ExtJS

Legal, Credits and Links