html5 彩蛋动画,HTML5 寻找复活节彩蛋

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// give $ to jQuery

(function($) {

// add easter egg counter to page

$('document').ready(function() {

$('

0 of 4 found!

').prependTo('body');

});

/**==============================================================

* BTTF CHARACTER EASTER EGGS

* ==============================================================

*/

var characters = {};

var pressedKeys = [];

/**

* Shows how many easter eggs have been found

*/

function updateEggs() {

$('.eggsfound .count').text(characters.guessed.length);

$('.eggsfound').addClass('animate');

setTimeout(function() {

$('.eggsfound').removeClass('animate');

}, 3000);

}

/**

* Plays the audio clip for a specific easter egg character

* @param {string} character name of character

*/

function playAudio(character) {

setTimeout(function() {

characters[character].audioFile.play();

setTimeout(function() {

toggleShowChar(character);

updateEggs();

}, characters[character].audioLength);

}, 300);

}

/**

* Toggles the display of an easter egg character

* @param {string} character character name

*/

function toggleShowChar(character) {

$('body').toggleClass(characters[character].name + '-show');

}

/**

* Add characters' information once page loads

*/

$(document).ready(function() {

characters = {

'guessed': [],

'marty': {

'name': 'marty',

'nameKeys': "77,65,82,84,89",

'audioFile': $('audio.marty')[0],

'audioLength': 1300,

},

'docbrown': {

'name': 'docbrown',

'nameKeys': "69,77,77,69,84,84",

'audioFile': $('audio.docbrown')[0],

'audioLength': 2500,

},

'biff': {

'name': 'biff',

'nameKeys': "66,73,70,70",

'audioFile': $('audio.biff')[0],

'audioLength': 1100,

},

'goldie': {

'name': 'goldie',

'nameKeys': "71,79,76,68,73,69",

'audioFile': $('audio.goldie')[0],

'audioLength': 4000,

}

};

});

/**

* Track character names being typed

*/

$(window).keydown(function(e) {

pressedKeys.push(e.keyCode);

// loop through characters

for (var character in characters) {

// if the "pressedKeys" contains the current character name

if (pressedKeys.toString().indexOf(characters[character].nameKeys) >= 0) {

// reset the pressedKeys array

pressedKeys = [];

// add "show" class to animate the character in

toggleShowChar(character);

if ($.inArray(character, characters.guessed) === -1) {

characters.guessed.push(character);

}

// wait a second and play the character's audio file

playAudio(character);

}

}

// reset pressedKeys at 50 keypresses to save memory

if (pressedKeys.length > 500) {

pressedKeys = [];

}

});

})(jQuery);