記第一次在程序中埋彩蛋
記第一次在程序中埋彩蛋
寫在前面
相信進來的觀眾一定很想知道我究竟埋了什麽彩蛋??,這裏說的“彩蛋”,指的是程序裏的彩蛋(我的理解是一種區別於程序本身別有洞天的一番景象,並具有一定代表意義的小程序??),
我埋的彩蛋的是在一個網站裏的,彩蛋必須是玩家自己找到才有用的??,先看看下面的彩蛋提示再進入網站找彩蛋哈??。
彩蛋提示
埋彩蛋的程序是編程貓官網,用瀏覽器訪問,再打開瀏覽器的開發者工具的控制臺??。
可以看到一個大大的codemao字符畫(如果看不清楚可以拉大控制臺的窗口大小),就是下面這個字符畫
█████ ??███ ██████ ██████ ███████ ██████ █████████████ ██████ ██████ ███??███ ███??███ ███??███ ███??███??███??███??███ ?????███ ███??███ ?███ ??? ?███ ?███?███ ?███ ?███████ ?███ ?███ ?███ ███████ ?███ ?███ ?███ ███?███ ?███?███ ?███ ?███??? ?███ ?███ ?███ ███??███ ?███ ?███ ??██████ ??██████ ??████████??██████ █████?███ █████??████████??██████ ?????? ?????? ???????? ?????? ????? ??? ????? ???????? ??????
發揮你們的探索能力??,看看能不能在控制臺裏找到跟這個字符畫有關的彩蛋。
找到的話如果覺得有意思的話可以點個贊??或者發評論提點提點??,有更好的想法都可以提哈??。
沒找到的話下面就是彩蛋答案??,但是記住彩蛋必須是玩家自己找到才有用的??,所以想清楚再決定看不看答案。
彩蛋答案
其實很容易能找到彩蛋,當你看到控制臺上那麽顯眼的codemao字符畫時,其實重點不在字符畫,而是codemao
這幾個字符,嘗試在控制臺裏輸入codemao
,你會發現codemao
是一個全局變量,按回車打印出來的值就是彩蛋入口了!
而打印出來的值就是"恭喜少年,你找到了編程貓的第一顆彩蛋,輸入 start(); 後即可開始《編程貓躲車車》遊戲!",繼續在控制臺輸入start()
埋這個彩蛋的緣由和我的想法:
為啥突然想到要在自己開發的網站上埋這個彩蛋呢??,可能是因為開發工作時間長了??????,想在工作中增加點趣味??????,也可以給用戶一個耳目一新的感覺,自己擅自加了這麽個需求哈哈??。做完這個彩蛋之後給到產品經理看,覺得很有意思,而且具有傳播價值,所以值得一試。
然而有個運營同事聽聞此事後卻跟我說起教來,“彩蛋應該怎麽做才有價值,才能運營起來blablabla”的??,我是聽不懂,作為一個程序員,我覺得不要為了“埋彩蛋”而“埋彩蛋”,我做這個彩蛋的時候沒有太多想法??,並不是考慮怎麽運營才怎麽設計的,也不是想著怎麽設計彩蛋而設計彩蛋。
“史上第一款含有彩蛋的遊戲”——《冒險/魔幻歷險(Adventure)》深入人心??,而《Starship 1》的開發者因為年代久遠,Ron Milner早已忘記該怎麽觸發彩蛋,40多年後查了代碼費盡周折才找到??。
我覺得一個程序員在自己的程序裏埋彩蛋,完全是出於自己的第一想法??,這個想法可以是像Warren Robinett一樣為了打破雅達利的約束讓自己的名字留在遊戲裏??,也可以像Ron Milner一樣為了讓玩家探索彩蛋,發現自己的名字,得到10條命的獎勵??。
而我設計這個彩蛋的想法??,是因為我發現了可以在控制臺裏跑起來的字符小遊戲《編程貓躲車車》,這有別於編程貓創作工具做出來的作品,一貫的在網頁裏運行的小遊戲,同樣是簡單的操作,放到控制臺運行卻別有一番天地,雖然畫質低劣又清奇,體驗也差,但足以達到我理解的彩蛋效果,有別於程序本身的小遊戲,codemao代表了編程貓,說不定還能激發用戶的創作欲望和創意呢。。。
以上純屬個人觀點,如有寫的不正當的地方可以權威批評
最後
其實這個彩蛋遊戲是從網上搬過來的,只是換了貓和車而已,感謝知乎大佬小芋頭君的分享,啥也不說了,源碼奉上:
(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;//Math.floor(Math.random()*3+1)
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 ("倒計時!")
}
})();
記第一次在程序中埋彩蛋