How to add konami code in a website based on html?
Place the code below in a file js/konami.js
and reference it in the body of your html file like this: <script src="js/konami.js"></script>
// a key map of allowed keysvar allowedKeys = { 37: 'left', 38: 'up', 39: 'right', 40: 'down', 65: 'a', 66: 'b'};// the 'official' Konami Code sequencevar konamiCode = ['up', 'up', 'down', 'down', 'left', 'right', 'left', 'right', 'b', 'a'];// a variable to remember the 'position' the user has reached so far.var konamiCodePosition = 0;// add keydown event listenerdocument.addEventListener('keydown', function(e) { // get the value of the key code from the key map var key = allowedKeys[e.keyCode]; // get the value of the required key from the konami code var requiredKey = konamiCode[konamiCodePosition]; // compare the key with the required key if (key == requiredKey) { // move to the next key in the konami code sequence konamiCodePosition++; // if the last key is reached, activate cheats if (konamiCodePosition == konamiCode.length) { activateCheats(); konamiCodePosition = 0; } } else { konamiCodePosition = 0; }});function activateCheats() { document.body.style.backgroundImage = "url('images/cheatBackground.png')"; var audio = new Audio('audio/pling.mp3'); audio.play(); alert("cheats activated");}
EDIT: changed the sequence to b, a instead of a, b. Thanks for the comment!
EDIT 2: reset the konamiCodePosition to 0 after activateCheats was called. Thanks for the comment!
compact version:
function onKonamiCode(cb) { var input = ''; var key = '38384040373937396665'; document.addEventListener('keydown', function (e) { input += ("" + e.keyCode); if (input === key) { return cb(); } if (!key.indexOf(input)) return; input = ("" + e.keyCode); });}onKonamiCode(function () {alert('\o/')})
My own compact and cleaned version inspired by the answers here:
let cursor = 0;const KONAMI_CODE = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];document.addEventListener('keydown', (e) => { cursor = (e.keyCode == KONAMI_CODE[cursor]) ? cursor + 1 : 0; if (cursor == KONAMI_CODE.length) activate();});
In this case, the activate()
function is called when triggered.