琢磨了一下前两天google的那个电吉他的doodle原理,于是就写了这个(伪)太鼓达人10周年纪念doodle。
http://goo.gl/v1RQw
- Chrome能出声
- FireFox4不能出声
- Safari能出声
- Opera11下面的搜索框显示不出来。。。
代码片段一:根据点击Canvas位置的颜色判定是咚还是咔。
var data=$("doodle").getContext("2d").getImageData(event.offsetX,event.offsetY,1,1).data;
var red=data[0];
var green=data[1];
var blue=data[2];
if(red>200 && green<100 && blue<100) playDon();
else if(red<150 && green>150 && blue>150) playKat();
代码片段二:播放声音。Google为了提高兼容性用的是Flash,我直接用的HTML5的Audio元素。
function playDon() {
if(don.readyState == 4)
{ don.currentTime=0; don.play(); }
}
<audio id="don" src="don.wav" proload>