记第一次在程序中埋彩蛋 写在前面 相信进来的观众一定很想知道我究竟埋了什么彩蛋🤔,这里说的“彩蛋”,指的是程序里的彩蛋(我的理解是一种区别于程序本身别有洞天的一番景象,并具有一定代表意义的小程序📟), 我埋的彩蛋的是在一个网站里的,彩蛋必须是玩家自己找到才有用的😎,先看看下面的彩蛋提示再进入网站找彩蛋哈😜。
彩蛋提示 埋彩蛋的程序是编程猫官网 ,用浏览器访问,再打开浏览器的开发者工具的控制台📟。 可以看到一个大大的codemao字符画(如果看不清楚可以拉大控制台的窗口大小),就是下面这个字符画
1 2 3 4 5 6 7 8 █████ ░░███ ██████ ██████ ███████ ██████ █████████████ ██████ ██████ ███░░███ ███░░███ ███░░███ ███░░███░░███░░███░░███ ░░░░░███ ███░░███ ░███ ░░░ ░███ ░███░███ ░███ ░███████ ░███ ░███ ░███ ███████ ░███ ░███ ░███ ███░███ ░███░███ ░███ ░███░░░ ░███ ░███ ░███ ███░░███ ░███ ░███ ░░██████ ░░██████ ░░████████░░██████ █████░███ █████░░████████░░██████ ░░░░░░ ░░░░░░ ░░░░░░░░ ░░░░░░ ░░░░░ ░░░ ░░░░░ ░░░░░░░░ ░░░░░░
发挥你们的探索能力🤓,看看能不能在控制台里找到跟这个字符画有关的彩蛋。
找到的话如果觉得有意思的话可以点个赞👍或者发评论提点提点🙏,有更好的想法都可以提哈🤘。
没找到的话下面就是彩蛋答案📋,但是记住彩蛋必须是玩家自己找到才有用的🤗,所以想清楚再决定看不看答案。
彩蛋答案 其实很容易能找到彩蛋,当你看到控制台上那么显眼的codemao字符画时,其实重点不在字符画,而是codemao
这几个字符,尝试在控制台里输入codemao
,你会发现codemao
是一个全局变量,按回车打印出来的值就是彩蛋入口了! 而打印出来的值就是”恭喜少年,你找到了编程猫的第一颗彩蛋,输入 start(); 后即可开始《编程猫躲车车》游戏!”,继续在控制台输入start()
即可触发彩蛋游戏。
埋这个彩蛋的缘由和我的想法: 为啥突然想到要在自己开发的网站上埋这个彩蛋呢🤔,可能是因为开发工作时间长了👨💻,想在工作中增加点趣味👩🎨,也可以给用户一个耳目一新的感觉,自己擅自加了这么个需求哈哈😜。做完这个彩蛋之后给到产品经理看,觉得很有意思,而且具有传播价值,所以值得一试。 然而有个运营同事听闻此事后却跟我说起教来,“彩蛋应该怎么做才有价值,才能运营起来blablabla”的😳,我是听不懂,作为一个程序员,我觉得不要为了“埋彩蛋”而“埋彩蛋”,我做这个彩蛋的时候没有太多想法🙄,并不是考虑怎么运营才怎么设计的,也不是想着怎么设计彩蛋而设计彩蛋。
“史上第一款含有彩蛋的游戏”——《冒险/魔幻历险(Adventure)》深入人心😋,而《Starship 1》的开发者因为年代久远,Ron Milner早已忘记该怎么触发彩蛋,40多年后查了代码费尽周折才找到😝。
我觉得一个程序员在自己的程序里埋彩蛋,完全是出于自己的第一想法😏,这个想法可以是像Warren Robinett一样为了打破雅达利的约束让自己的名字留在游戏里😠,也可以像Ron Milner一样为了让玩家探索彩蛋,发现自己的名字,得到10条命的奖励🤑。
而我设计这个彩蛋的想法😉,是因为我发现了可以在控制台里跑起来的字符小游戏《编程猫躲车车》,这有别于编程猫创作工具做出来的作品,一贯的在网页里运行的小游戏,同样是简单的操作,放到控制台运行却别有一番天地,虽然画质低劣又清奇,体验也差,但足以达到我理解的彩蛋效果,有别于程序本身的小游戏,codemao代表了编程猫,说不定还能激发用户的创作欲望和创意呢。。。
以上纯属个人观点,如有写的不正当的地方可以权威批评
最后 其实这个彩蛋游戏是从网上搬过来的,只是换了猫和车而已,感谢知乎大佬小芋头君 的分享,啥也不说了,源码奉上:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 (function ( ) { if (!window .console){window .console ={log :function ( ) {}};return ;} var me = 19 ; var Star = function ( ) { this .x=0 ; this .speed = 1 ; this .y=0 ; } var score = 0 ; var strs = function ( ) { var result = '' ; for (var i=0 ;i<20 ;i++){ result+="\n" for (var n =0 ;n<40 ;n++){ var now = '一' if (i==19 &&n==me){ now="码" } if (i==19 &&n==me+1 ){ now="农" } stars.forEach(function (star ) { var x= Math .floor(star.x); var y = Math .floor(star.y) if (x==n&&y==i){ if (Math .abs(star.y-19 )<1 &&(n==me||n==me+1 )){ die() } now="车" } }) result+=now; } } result+=" 《全民躲车车》得分:" +score return result; } window .onkeydown = function (e ) { if (e.keyCode==37 ){ me-=1 ; if (me<0 ) me=0 ; }else if (e.keyCode==39 ){ me+=1 if (me>38 ) me=38 } } var count=0 ;var die = function ( ) { clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) setTimeout(function ( ) { console .log("游戏结束,您的得分:" +score+",分享到微博:%o" ,"http://service.weibo.com/share/share.php?url=http%3A%2F%2Ftangeche.com&pic=http://img.souche.com/test/aab0c3d397799533e446759083c2f97c.gif&title=%E6%88%91%E5%9C%A8%E3%80%90%E5%BC%B9%E4%B8%AA%E8%BD%A6%E3%80%91%E7%8E%A9%E7%A0%81%E5%86%9C%E4%B8%93%E6%9C%89%E6%B8%B8%E6%88%8F%E3%80%8A%E7%A0%81%E5%86%9C%E8%BA%B2%E8%BD%A6%E8%BD%A6%E3%80%8B%E8%8E%B7%E5%BE%97%E4%BA%86" +score+"%E5%88%86%2C%E5%BF%AB%E6%9D%A5%E6%8C%91%E6%88%98%E6%AF%94%E6%AF%94%E7%9C%8B%E3%80%82%E7%94%A8%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E6%89%93%E5%BC%80www.tangeche.com%E9%A6%96%E9%A1%B5%EF%BC%8C%E6%89%93%E5%BC%80%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7%E7%9A%84%E6%8E%A7%E5%88%B6%E5%8F%B0%EF%BC%8C%E8%BE%93%E5%85%A5start%28%29%3B%E5%9B%9E%E8%BD%A6%EF%BC%8C%E7%84%B6%E5%90%8E%E6%8C%89%E7%85%A7%E6%8F%90%E7%A4%BA%E5%8D%B3%E5%8F%AF%E5%BC%80%E5%A7%8B%E6%B8%B8%E6%88%8F%E3%80%82%40%E5%BC%B9%E4%B8%AA%E8%BD%A6" ) },100 ) } var stars = []var appearP = 1 var timer1,timer2,timer3;var begin = function ( ) { timer1 = setInterval(function ( ) { var createCount=Math .floor(Math .random()*5 *appearP) for (var i=0 ;i<createCount;i++){ var star = new Star(); star.x = Math .floor(Math .random()*40 ) star.y = 0 ; star.speed = Math .random()*appearP; stars.push(star) } },1000 ) timer2 = setInterval(function ( ) { stars.forEach(function (star,i ) { star.y+=star.speed; if (star.y>=31 ){ stars.splice(i,1 ); score++ } }) console .log(strs()) count++; if (count>300 ){ console .clear() count = 0 ; } },100 ) timer3 = setInterval(function ( ) { appearP*=1.1 },3000 ) } console .log("输入 start(); 后即可开始《码农躲车车》游戏!" )window .start = function ( ) { appearP=1.1 starts=[]; score=0 ; me = 19 ; count = 0 ; console .log("%c请先用鼠标点击一下弹个车网页页面,游戏需要捕捉网页上的键盘事件(你应该懂吧)!" ,"font-size:16px;color:#ff6700;" ) console .log("使用键盘左右键移动最下方的码农,躲开所有的汽车,汽车数量和速度会一直增加,看看谁坚持的最久吧!" ) var countdown = 6 ; setTimeout(function ( ) { if (countdown--<=1){ begin(); }else{ console.log(countdown) setTimeout(arguments.callee,1000) } },1000) return ("倒计时!") } })();