如何在基于html的网站中添加konami代码？ [英] How to add konami code in a website based on html?

问题描述

由于某些原因，我被要求在我目前正在使用的 HTML 网站中实施 Konami代码
。但是，我不知道最好和最简单的方法来做到这一点！我想触发一个执行以下操作的命令：

1. 更改背景图像




2. 播放声音




3. 带上一些弹出式广告

顺便说一句，Konami代码不一定要用HTML来完成.- ...我在问什么是在一个只关注HTML的网站上做到这一点的最好和最简单的方法。 / p>

解决方案

将下面的代码放在 js / konami.js 在你的html文件的主体中引用它：< script src =js / konami.js>< / script>

//允许的keysvar的键映射allowedKeys = {37：'left'，38：'up '，39：'right'，40：'down'，65：'a'，66：'b'}; //'官方'Konami Code sequencevar konamiCode = ['up'，'up'，'down'，'down'，'left'，'right'，'left'，'right'，'b'，'a']; //记住变量'position'用户已到达目前为止。var konamiCodePosition = 0; //添加keydown事件listenerdocument.addEventListener（'keydown'，function（e）{//从键映射中获取键值的值var key = allowedKeys [e.keyCode]; //从konami代码中获取所需密钥的值var requiredKey = konamiCode [konamiCodePosition];如果（key == requiredKey）{//移动到konami代码序列中的下一个键konamiCodePosition ++; //如果到达最后一个键，激活作弊（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）;}

$ b 编辑：改变了序列到b，而不是a，b。感谢评论！

编辑2：在调用activateCheats之后将konamiCodePosition重置为0。感谢您的评论！

For some reasons, I was asked to implement Konami Code in an HTML website I am currently working on. However, I did not know the best and easiest way to do that! I would like to trigger a command which do the following:

1. Change Background Image

2. Play sound

3. Bring some pop-up

BTW, the Konami Code doesnt have to be done in HTML -.- ... I am asking whats the best and easiest way to do that in a site that only focus 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 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!

这篇关于如何在基于html的网站中添加konami代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！