JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="jumbotron">
<h1>Try Cheat Code</h1>
<p>Input the Konami Code (up, up, down, down, left, right, left, right, B, A, Enter)</p>
</div>
<img src="http://img1.wikia.nocookie.net/__cb20110816210501/fantendo/images/3/3c/Sprite-mario-running-animation.gif" id="easter-egg"/>
</body>
CSS
#easter-egg
{
display : none;
}
JavaScript
/**
* jquery-cheat-code-plugin.js - jQuery Plugin
* Create a custom event that listens for a cheat code in your app
*
* @dependencies jQuery v1.5.0 http://jquery.com
* @author Marc Cusso <marcbaro22@gmail.com>
* @copyright Author
* @version 0.0.1 (02/07/2015)
*/
function CheatCodeEventHandler(element){
function CheatCodeController(){
this.sequence = [
'up',
'up',
'down',
'down',
'left',
'right',
'left',
'right',
'B',
'A',
'Start'
];
this.mapping = {
38 : 'up',
40 : 'down',
37 : 'left',
39 : 'right',
65 : 'A',
66 : 'B',
13 : 'Start'
};
this.state = 0;
this.cheatOn = false;
this.advanceState = function(keyPressed){
this.cheatOn = false;
var value = this.mapping[keyPressed];
if(this.sequence[this.state++] == value){
if(this.state == this.sequence.length){
this.cheatOn = true;
this.state = 0;
}
}
else{
this.state = 0;
}
};
};
this.cheatController = new CheatCodeController();
var context = this;
this.inputMapping = function(mapping){
if(!mapping) return this.cheatController.mapping;
else{
this.cheatController.mapping = mapping; //TODO validate mapping
this.cheatController.state = 0;
this.cheatController.cheatOn = false;
}
};
function validateCheatSequence(sequence){
var mapping = context.inputMapping();
for(i=0;i<sequence.length;++i){
var found = false;
Object.keys(mapping).forEach(function (key) {
var val = mapping[key];
if(val == sequence[i]) found = true;
});
if(!found) return false;
}
return true;
}
this.cheatSequence = function(sequence){
if(!sequence) return this.cheatController.sequence;
else{
if(validateCheatSequence(sequence)){
this.cheatController.sequence = sequence;
this.cheatController.state...