game-word-catcher.js

$(document).ready(function() {
  $("#wordblock").FallingWords();
});

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

function catchWord(word) {
  alert("You selected " + word);
}

function divideTextInSpans(text) {
  return shuffle($.map(text.split(","), function(word) {
    return "<span class='word' onclick='catchWord(\"" + word + "\")'>" + word + "</span>";
  })).join(" ");
}

function setAnimation(elem, count, delay) {
  $(elem).css("position", "absolute");
  $(elem)[0].style[Modernizr.prefixed('animation')] = "wordfall" + count + " " + delay + "s";
  $(elem)[0].style[Modernizr.prefixed('animation-fill-mode')] = "forwards";
}


(function($) {
  $.fn.FallingWords = function(options) {
    var settings = $.extend({
      'paddingRight': 20,
      'paddingBottom': 20,
      'fallIntervalSecs': 0.008,
      'speed': 20000,
      'rotate': false,
      'delay': 10
    }, options);
    /* Internal settings */
    var multiplier = 360;
    var adder = 720;

    var style = document.documentElement.
    appendChild(document.createElement("style"));
    return shuffle(this).each(function() {
      var newInnerHtml = divideTextInSpans($(this).text());
      $(this).html(newInnerHtml);
      $(this).children().each(function(count) {
        var rotateDegree = Math.random() * multiplier + adder;
        rotateDegree = settings.rotate ? rotateDegree : 0;
        var index = Modernizr._prefixes.length;
        var rule = "";
        var elem = $(this);
        var offset = $(elem).offset();
        var targetTop = $(document).height() -
          offset.top -
          settings.paddingBottom;
        var targetLeft = offset.left + settings.paddingRight;
        while (index--) {
          rule = "@" + Modernizr._prefixes[index] + "keyframes wordfall" + count + "\
          { from{ \
            top:" + offset.top + "px; \
            left:" + offset.left + "px; \
            } \
            to{ \
            top:" + targetTop + "px; \
            left:" + targetLeft + "px; \
            -webkit-transform:rotate(" + rotateDegree + "deg); \
            -moz-transform:rotate(" + rotateDegree + "deg); \
            -transform:rotate(" + rotateDegree + "deg); \
            } \
          } ";
          try {
            style.sheet.insertRule(rule);
          } catch (err) {}
        }
        var random_time = Math.floor(Math.random() * 5);
        var interval = (count * settings.fallIntervalSecs)* random_time * settings.speed;
        setTimeout(function() {
          setAnimation(elem, count, settings.delay);
        }, interval);

      });

    });
  };
})(jQuery);

index.html

<div id="cloud">
  <center><b>Catch the correct answer</b></center>
</div>
<div id="wordblock">the boy, the play, the world, the sun
</div>

<div id="footer">

  Target: die Welt

</div>

style.css

.word {
  background: #57ce89;
  color: white;
  padding: 10px;
  cursor: hand;
  min-width: 100px;
  text-align: center;
  margin: 0px 30px;
}

#wordblock {
  top: 20px;
  position: fixed;
}

#cloud {
  top: 0;
  background: #57ce89;
  color: white;
  position: relative;
  z-index: 99;
  padding: 20px;
}

#footer {
  bottom: 0;
  background: #57ce89;
  color: #fff;
  font-weight: bolder;
  text-align: center;
  position: absolute;
  width: 100%;
  font-size: 20px;
  padding: 10px 0;
}