问题
I was asked to implement the Konami Code in a website I'm currently working on. It should do the following:
Change Background Image
Play sound
Bring some pop-up
What's the easiest way to achieve this using javascript?
回答1:
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 keys
var allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down',
65: 'a',
66: 'b'
};
// the 'official' Konami Code sequence
var 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 listener
document.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!
回答2:
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/')})回答3:
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.
回答4:
Silentdrummer has a good answer. I'm not entirely sure, but I think it could end up taking up too much memory on typing intensive pages. It's good practice to reset. Either way, here's an alternative.
// Cheat Codes
neededkeys = [38,38,40,40,37,39,37,39,66,65], started = false, count = 0;
$(document).keydown(function(e) {
key = e.keyCode;
if (!started) {
if (key == 38) {
started = true;
}
}
if (started) {
if (neededkeys[count] == key) {
count++;
} else {
reset();
}
if (count == 10) {
reset();
// Do your stuff here
alert('Cheat Codes Activated');
$('body').css('background-color', '#FFA8A8');
// Turn down for what
var s=document.createElement('script');
s.setAttribute('src','https://nthitz.github.io/turndownforwhatjs/tdfw.js');
document.body.appendChild(s);
}
} else {
reset();
}
});
function reset() {
started = false;
count = 0;
}
回答5:
This is a solution I came up with around 3 or 4 years ago. In my case I chose keyUp to keep it separate from any actions that occur from keyDown events. Also there is no need to specify what keys are allowable since the for loop checks which key was released against all the keys on the keyboard.
var konamicode = [38,38,40,40,37,39,37,39,66,65];
var kc=0;
function checker() {
if (kc==10) {
// What you want to occur when code matches goes in here.
kc=0; // This resets the sequence.
alert("It Worked!");
}
}
function keyUp(e) {
var keynum;
if (window.event) { keynum = event.keyCode; }
else if (e.which) { keynum = e.which; }
for (i = 0; i < 222; i++) { // The 222 represents all the keys on the keyboard.
var kx=konamicode[kc]; // kx represents the current position in the code sequence.
if (keynum == i) {
// Checks to see if key matches sequence, and resets sequence if it doesn't.
if (i!=kx){kc=0;} else {kc++;}
}
}
checker();
}
回答6:
I really liked Peter's answer, so I made it namespaced and made the callback optional. I also used jquery because I like it ¯\_(ツ)_/¯
var Konami = Konami || {};
Konami.key = '38384040373937396665';
Konami.onCode = function(callback) {
var input = '';
$(document).on("keydown", function(e) {
input += ("" + e.keyCode);
if (input === Konami.key) {
if(typeof callback == 'undefined') {
return alert("⬆⬆⬇⬇⬅➡⬅➡🅱🅰");
}
else {
return callback();
}
}
if (!Konami.key.indexOf(input)) return;
input = ("" + e.keyCode);
});
}
Konami.offCode = function() {
$(document).off("keydown");
}
Konami.onCode();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>回答7:
as a typescript module
const Konami = (() => {
// up, up, down, down, left, right, left, right, b, a, enter
const SEQUENCE: Array<number> = [
38,
38,
40,
40,
37,
39,
37,
39,
66,
65,
13,
];
let head: number = 0;
let isActive: boolean = false;
let callback: Function | undefined;
const start = (cb: Function): void => {
if (isActive) {
return;
}
window.addEventListener("keydown", onKeyDown);
callback = cb;
isActive = true;
};
const stop = (): void => {
if (!isActive) {
return;
}
isActive = false;
window.removeEventListener("keydown", onKeyDown);
};
const onKeyDown = (event) => {
if (event.keyCode === SEQUENCE[head]) {
head++;
if (head === SEQUENCE.length) {
if (callback instanceof Function) {
callback();
}
head = 0;
}
} else {
head = 0;
}
};
return {
start,
stop,
};
})();
export default Konami;
implementation:
Konami.start(() => { alert("konami sequence entered!"); });
notes: SEQUENCE is an array of the expected inputs. by using the head var, the order checking and number of correct inputs is maintained. it also provides a simple way to restart if input deviates from the sequence. it also eliminates the needs for a "count" var.
回答8:
To create your own "Konami Code" add the following Code snippet in your HTML Code. PS: Change the const secretCode to ... what ever you want :). With the current code you have to type 'arrow up' button, then 'h' then 'i' and last but not least the 'arrow down' button.
Questions? Please ask.
<script>
const pressed = [];
const secretCode = 'ArrowUphiArrowDown';
window.addEventListener('keyup', (e) => {
console.log(e.key);
pressed.push(e.key);
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
if(pressed.join('').includes(secretCode)) {
console.log("Any quellcode that will be executed if you enter the correct code.");
}
console.log(pressed);
})
</script>
来源：https://stackoverflow.com/questions/31626852/how-to-add-konami-code-in-a-website-based-on-html