JavaScript Konami Code 实现代码

在 Facebook 上有一个彩蛋：
登录 facebook.com ，点击你首页的任何地方，键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后，再点击页面或滚动一下滚动条，你会发现特殊的变化（如下图），嘿嘿 ^^

玩过“魂斗罗”的朋友，肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami Code，详细见图示：

那如何用 JavaScript 也在自己的页面上添加一个类似的彩蛋呢？
Abhi 在 《Konami Code on Facebook : How to implement it on your site》 一文中提供了大体思路：


代码如下:

var $ = {
enabled: false,
tmp: Array(),
_konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
init: function() {
this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
},
konamiCode: function(e) {
if(!this.enabled) {
var t = this.tmp.pop();
if((e.keyCode-t) == 0) {
if(this.tmp.length == 0) {
this.enabled = true;
}
} else {
this.init();
}
} else {
this.action();
}
},
// Change the action() function to whatever you want to
action: function() {
//alert("Konami Code Activated");
}
}

不过 Abhi 的方法还是冗余了点，Jan Jarfalk 在留言中提供了一个短小精悍的代码：


代码如下:

var k=[];
function(e){
k.push(e.keyCode);
if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
//alert("Konami Code Activated");
}

赞 (0)

相关推荐

  • JavaScript Konami Code 实现代码

    JavaScript Konami Code 实现代码

    在 Facebook 上有一个彩蛋: 登录 facebook.com ,点击你首页的任何地方,键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后,再点击页面或滚动一下滚动条,你会发现特殊的变化(如下图),嘿嘿 ^^ 玩过"魂斗罗"的朋友,肯定一眼就能看出输入的字符原来就是"魂斗罗"中的"秘技".其实"秘技"的术语叫 Konami Code,详细见图示

  • JavaScript 验证码的实例代码(附效果图)

    JavaScript 验证码的实例代码(附效果图)

    效果如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">    <title></title>    <style type="text/css">    .code    {            background:url(code_bg.jpg);            f

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • Javascript Worker子线程代码实例

    这篇文章主要介绍了Javascript Worker子线程代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 main.js code: //创建 var worker = new Worker("./worker.js"); //发送 worker.postMessage(1); //接收 worker.onmessage = (e)=>{ console.log("main.js:"); consol

  • JavaScript编写棋盘覆盖代码详解

    JavaScript编写棋盘覆盖代码详解

    一.前言 之前做了一个算法作业,叫做棋盘覆盖,本来需要用c语言来编写的,但是因为我的c语言是半桶水(哈哈),所以索性就把网上的c语言写法改成JavaScript写法,并且把它的覆盖效果显示出来 二.关键代码 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • javascript 打字游戏实现代码

    javascript 打字游戏实现代码

    效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu

  • javascript密码强度校验代码（两种方法）

    javascript密码强度校验代码（两种方法）

    先看效果图: javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo. 第一种方法: /* *密码安全程度 *return :全部为字母或者数字,或者密码长度小于 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) retur

  • JavaScript图片轮播代码分享

    为大家分享的JavaScript图片轮播代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

  • javascript自定义滚动条实现代码

    javascript自定义滚动条实现代码

    在工作中经常会遇到内容会超出固定的一个范围,超出的内容一般会使用到滚动条来滚动显示. 但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~ 网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*) 其中这三个问题深深地困扰我: 1.滚动条高度 2.每次点击向上.向下按钮的时候滚动条应该移动多少距离 3.每拖动1px滚动条,页面需要移动多少? 整个的框架大概是长这样的: 先来看看第一个问题.

  • javascript 缓冲效果实现代码 推荐

    菜鸟版代码如下: 理解这段代码就基本上掌握了 复制代码 代码如下: function f_s() { var obj = document.getElementById("top"); obj.style.display = "block"; obj.style.height = "1px"; var sw = function () { var s_width = parseInt(obj.style.height); if (s_width

随机推荐