注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

简单制作网页彩蛋,JavaScript实现Konami Code  

2010-11-24 09:43:47|  分类: 彩蛋 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

很久之前,在圆心的博客上看到了JavaScript 实现 Konami Code ,这东西还真有趣,有空也可以给自己的网页搞一个彩蛋玩玩。

Konami Code简单的说,就是键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A 后,页面上出现特殊的变化。这个规则来自于“魂斗罗”中的“秘技”。“秘技”的术语就叫 Konami Code

简单制作网页彩蛋,JavaScript实现Konami Code - 和申 - 和申的个人主页
 

照着圆心说的,在Google Reader上试了一把:

简单制作网页彩蛋,JavaScript实现Konami Code - 和申 - 和申的个人主页
 

google reader konami code

没想到google reader上面居然也有这样的彩蛋,哈哈

圆心在博客也给出了JavaScript实现Konami code的2种方法。

方法一:

Abhi 在 《Konami Code on Facebook : How to implement it on your site》 一文中提供了大体思路:

  1. var $ = {  
  2.     enabled: false,  
  3.     tmp: Array(),  
  4.     _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),  
  5.     init: function() {  
  6.         this.tmp = Array(65,66,39,37,39,37,40,40,38,38);  
  7.     },  
  8.     konamiCode: function(e) {  
  9.         if(!this.enabled) {  
  10.             var t = this.tmp.pop();  
  11.             if((e.keyCode-t) == 0) {  
  12.                 if(this.tmp.length == 0) {  
  13.                     this.enabled = true;  
  14.                 }  
  15.             } else {  
  16.                 this.init();  
  17.             }  
  18.         } else {  
  19.             this.action();  
  20.         }  
  21.     },  
  22.     // Change the action() function to whatever you want to  
  23.     action: function() {  
  24.         //alert("Konami Code Activated");  
  25.     }  
  26. }  
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");     } }

然后在 load 的时候调用 $.init() 方法,在 keydown 的时候调用 $.konamiCode(event) 方法。

方法二:

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

  1. // Tweetable Konami code  
  2. var k=[];  
  3. function(e){  
  4.     k.push(e.keyCode);  
  5.     if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {  
  6.         //alert("Konami Code Activated");  
  7.     }  
  8. }  
// Tweetable Konami code 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");     } }

方法2显然更帅气一点,我在自己博客上也搞了一把,不过方法二有点缺陷,需要改进,试过一次就知道了,第一次激活konami code之后,数组没有清空,那么会导致indexOf每次都包含konami code而会再次激活。也就是说,输入一次秘笈之后,每次你再按下任意按键都会触发konami code。此外,这个代码IE下就跑不了了,需要稍微处理一下事件。呃,大师也总有疏忽的时候啊。把方法二改进一下:

  1. var k=[];  
  2. function(e){  
  3.     e = e||window.event;  
  4.     k.push(e.keyCode);  
  5.     if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {  
  6.         //alert("Konami Code Activated");  
  7.     k=[];//激活后清空数组  
  8. }  
  9. }  
var k=[]; function(e){     e = e||window.event;     k.push(e.keyCode);     if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {         //alert("Konami Code Activated");     k=[];//激活后清空数组 } }

这样稍微改动即可,我已经在自己博客上加了这个代码了,各位看官可以自己尝试一把,嘿嘿。

这是我放在自己网页上的JavaScript Konami code,想试一下的人,直接把代码copy到自己网页的head中去就行了。

<script type="text/javascript">
var k=[];
document.onkeydown = function(e){
e = e||window.event;
k.push(e.keyCode);
if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
alert("谁能比我帅~~");
k=[];
}
}
</script>



转载来自:http://www.fangyuqiang.com/archives/490
参考:网页中加入彩蛋
 

org.quartz.impl.jdbcjobstore.LockException: Failure obtaining db row lock: - 和申 - 和申的个人主页



  评论这张
 
阅读(882)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016