Google今天的Doodle挺好玩的,主要是图做的给力呀!照着做了一个,没像Google那样做很细致的判断及比较复杂的浏览器兼容性处理,但是效果是完全有的!
DOM灰常简单:
<div id="horse">
<div id="run"></div>
<div id="bg"></div>
</div>
JavaScript也很简单:
(function(){
var a, e = c = 0, f = 1, stop = false;
var horse = document.getElementById('horse');
var run = document.getElementById('run');
var runFn = function(){
var d = c % 67;
if(f < 63){
f = f*1.05;
}else if(d>0 && d<4){
f = 67;
c = c-d;
}
c = (c+f) % 804;
horse.style.backgroundPosition = -c+"px 0";
if(e<67){
e = e+f;
run.style.backgroundPosition = horse.style.backgroundPosition;
}
a = window.setTimeout(runFn, 41);
};
horse.onmousedown = function(){
run.style.marginTop = '2px';
};
horse.onmouseup = horse.onmouseout = function(){
run.style.marginTop = '';
};
horse.onclick = function(){
if(!stop){
runFn();
}else{
window.clearTimeout(a);
window.location = window.location;
}
stop = !stop;
};
})();
好像没什么好特别解释的,这种简单的实现,20分钟可以搞定啊~
==============================================================
还真有人研究。。。荣幸啊。。。
图的width是804,共12个图, 804/12=67,
另外人的视觉暂留是0.1~0.4s,一般动画、电影是二十四分之一秒一帧,也就是41ms。
分享到:
相关推荐
Google粘土动画Doodle代码,挺好玩的,好东西!绝对的!
NULL 博文链接:https://bun-ny.iteye.com/blog/1278540
Doodle
Google创意动画Doodle代码
2011年google圣诞节doodle源码
我的主题Google Doodle关于您的Google Doodle的50多个字词。我正在制作一个带有熊猫的Google Doodle。我还没有为Google Doodle制定最终的计划。它可能是lofi学习图像的仿冒品,也可能是动画熊猫,有一定几率出现白化...
Doodle Jump 源代码,需要的请下载,Doodle Jump 是 app store排名前20的游戏,与之前发放的tiny wings一样,有需要参考的下载吧,放出两个链接: Doodle Jump: ...
使用C++实现Doodle Jump
Google首页电吉他Doodle源码 html css
为了纪念电吉他之父莱斯·保罗(Les Paul,1915年6月9日-2009年8月13日)诞辰96周年,Google Doodle又出神作,首页的Logo被设计成一个电吉他形,并且鼠标滑过会弹出美妙的音乐,当你按下键盘图标时,还可以直接用...
如果您是GoogleDoodle游戏的粉丝,那么将GoogleDoodle制作的所有游戏聚合到一个地方的扩展程序对您来说可能是一个方便的工具。通过此扩展,您可以回到过去并玩针对特定事件的爱和关怀制作的游戏。游戏集合始终是最新...
刚做完的人机交互js实验。。。有武大国软的孩纸么? 主要的实现代码在doodle-library.js中 提供了两个test.js和一个utils.js 实现了通过js在canvas上绘图的一些功能
doodle
Google粘土动画Doodle代码.zip
这是一款益智类,考验反应力和决断力的游戏,游戏名叫Doodle Jump。玩家控制小人,小人是不断往上跳的,玩家需要控制它不让它掉落下去,并找板子让小人跳的更高。跳的越高得分越多,但越到后面板子越稀少,同时还有...
Doodle+Bubble老版本软件,体验很不错。