Tibor SzászInteraction matters

Konami codes in javascript

If you ever played any platform, fighting or combat games like Contra or Mortal Combat, then you will be familiar with the special key combinations for executions or special attacks that gives you some extra power, effect, or god mode. The Konami code was one of the fist cheat code in the video gaming history, that special combination later adapted by many games.

In the age of websites, many sites also installed small easter eggs for their visitors, just for fun. See the list here.

I played a little with implementing it, and just a few rows were enough to achieve the desired effect.

var p = 0;
var order = [38,38,40,40,37,39,37,39,66,65];
document.onkeyup = function(e)
{
	var key = (window.event) ? event.keyCode : e.keyCode;
	p = (order[p] == key) ? ++p : 0;
	if( p == order.length ) alert('Boom, secrets unlocked');
};

Recursive AJAX calls

Last day I had to hack a webshop's basket management system, and deleting the items had to be done via AJAX. The problem was, that each call had to wait the previous to be completed, otherwise some products kept in the session. The solution was simple: call the AJAX requests recursively on the 'onComplete' event.

Here is a cleaned up code, using MooTools 1.2.4. Call addAjaxParam() to prepare the ajaxParams array.

var ajaxParams = [];
function addAjaxParam( pid )
{
    var obj = {
        'option': 'module_shop_action',
        'product_id': pid
    }
    ajaxParams.push( obj );
}

How to write drag and drop code from scratch?

Drag and drop is a very cool feature in the browsers too, if really needed. Most JS libraries has this functionality, from jQuery to MooTools. But how they do it?

Well, it's not black magic, actually really simple.


The idea
You need to combine two different mouse events: mouseDown and mouseMove, then track the mouse position, update an elements position, finally cancel the mouseMove event on mouseUp.

The goal
Create a freely movable window that you can move with a handle.

Click "read more" to see the codes.

Category: Programming - Tags: javascript tutorial drag-and-drop - 2