web-dev-qa-db-ja.com

HTMLベースのWebサイトにコナミコードを追加する方法

現在取り組んでいるWebサイトにコナミコードを実装するように依頼されました。次のことを行う必要があります。

  1. 背景画像を変更

  2. 音を出す

  3. ポップアップを表示

JavaScriptを使用してこれを実現する最も簡単な方法は何ですか？

javascripthtmlpopupbackground-imagemp3
15
LordSacha

以下のコードをファイルに配置しますjs/konami.jsとし、次のようにhtmlファイルの本文で参照します：<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");
}

編集：シーケンスをa、bではなくb、aに変更しました。コメントをありがとう！

編集2：activateCheatsが呼び出された後、konamiCodePositionを0にリセットします。コメントをありがとう！

33
w.stoettinger

コンパクトバージョン：

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

ここでの答えに触発された自分のコンパクトでクリーンなバージョン：

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

この場合、トリガーされたときにactivate()関数が呼び出されます。

11
Ehsan Kia

Silentdrummerは良い答えを持っています。私は完全にはわかりませんが、集中的なページを入力するときにメモリを使いすぎてしまう可能性があると思います。リセットすることをお勧めします。いずれにせよ、これが代替案です。

// 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

これは、3、4年ほど前に思いついたソリューションです。私の場合、keyDownイベントから発生するアクションと区別するためにkeyUpを選択しました。 forループは、リリースされたキーをキーボードのすべてのキーに対してチェックするため、許可されるキーを指定する必要もありません。

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

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;
_

実装：

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

notes： SEQUENCEは、予期される入力の配列です。 head varを使用すると、順序チェックと正しい入力の数が維持されます。また、入力がシーケンスから逸脱した場合に再起動する簡単な方法も提供します。また、「カウント」変数の必要もなくなります。

1
paul.selectable

私はピーターの答えが本当に好きだったので、名前空間にしてコールバックをオプションにしました。気に入ったのでjqueryも使用しました¯\ _（ツ）_ /¯

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

独自の「コナミコード」を作成するには、HTMLコードに次のコードスニペットを追加します。 PS：const secretCodeを...に変更してください:)現在のコードでは、「上矢印」ボタンを押し、次に「h」、「i」、最後に「下矢印」ボタンを入力する必要があります。

質問は？問い合わせてください。

<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