web-dev-qa-db-fra.com

Comment ajouter du code Konami dans un site Web basé sur du HTML?

On m'a demandé d'implémenter le code Konami dans un site Web sur lequel je travaille actuellement. Il devrait faire ce qui suit:

  1. Changer l'image d'arrière-plan

  2. Jouer son

  3. Apportez du pop-up

Quelle est la façon la plus simple d'y parvenir en utilisant javascript?

javascripthtmlpopupbackground-imagemp3
15
LordSacha

Placez le code ci-dessous dans un fichier js/konami.js et référencez-le dans le corps de votre fichier html comme ceci: <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: a changé la séquence en b, a au lieu de a, b. Merci pour le commentaire!

EDIT 2: réinitialisez le konamiCodePosition à 0 après l'appel de activateCheats. Merci pour le commentaire!

33
w.stoettinger

version compacte:

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/')})
15
Peter

Ma propre version compacte et nettoyée inspirée des réponses ici:

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();
});

Dans ce cas, la fonction activate() est appelée lorsqu'elle est déclenchée.

11
Ehsan Kia

Silentdrummer a une bonne réponse. Je ne suis pas tout à fait sûr, mais je pense que cela pourrait finir par prendre trop de mémoire lors de la frappe de pages intensives. Il est recommandé de réinitialiser. Quoi qu'il en soit, voici une 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;
}
1
Goose

C'est une solution que j'ai trouvée il y a environ 3 ou 4 ans. Dans mon cas, j'ai choisi keyUp pour le garder séparé de toutes les actions qui se produisent des événements keyDown. De plus, il n'est pas nécessaire de spécifier quelles touches sont autorisées car la for loop vérifie quelle touche a été relâchée par rapport à toutes les touches du clavier.

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();
}
1
Mage'sFolly

comme module TypeScript

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;

la mise en oeuvre:

Konami.start(() => { alert("konami sequence entered!"); });

notes: SEQUENCE est un tableau des entrées attendues. en utilisant la variable head, la vérification de l'ordre et le nombre d'entrées correctes sont conservés. il fournit également un moyen simple de redémarrer si l'entrée s'écarte de la séquence. il élimine également le besoin d'une variable "count".

1
paul.selectable

J'ai vraiment aimé la réponse de Peter, alors je l'ai faite avec un espace de nom et j'ai rendu le rappel facultatif. J'ai aussi utilisé jquery parce que j'aime ça ¯\_ (ツ) _/¯

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>
0
GammaGames

Pour créer votre propre "Code Konami", ajoutez l'extrait de code suivant dans votre code HTML. PS: changez le const secretCode en ... ce que vous voulez :). Avec le code actuel, vous devez taper le bouton "flèche vers le haut", puis "h" puis "i" et enfin et surtout le bouton "flèche vers le bas".

Des questions? Veuillez demander.

<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>
0
StackOverflow