exploding javascripts

exploding.css

rect.snake {
  fill: #555353;
}

rect.food {
  fill: #45720B;
}

svg {
  height: 100%;
  width: 100%;
  background-color: #222;
}

div#container {
  height: 100%;
  width: 100%;
  border: 4px solid gray;
}

exploding.js

$(document).ready(function() {
  function randomchoice(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
  }
  var width = $('svg')[0].getBoundingClientRect().width;
  var height = $('svg')[0].getBoundingClientRect().height;
  var max_id = 1;
  var current_text = null;
  var last_keypress_time = Date.now();
  var all_effects = ['rotate', ['contract', 'expand'], 'fly']
  var texts = [{
      id: 1,
      text: "Start typing!",
      x: width/2,
      y: height/2,
      fontsize: 30,
      rotation: 0,
      effects: ['fly', 'rotate'],
      deltax: 2,
      deltay: 2,
      color: 'darkorange',
      start_time: Date.now() + 10000
  }];
  var colors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728'] // d3.scale.category10().range();


  function get_random_effects() {
    var effects = [];
    for (var i = 0; i < all_effects.length; i++) {
      if (Math.random() < 0.5) {
        var effect = all_effects[i];
        if ($.isArray(effect)) {
          effects.push(randomchoice(effect));
        } else {
          effects.push(effect)
        }
      }
    }
    if (effects.length > 0 && !(effects.length == 1 && effects[0] == 'rotate'))  {
      return effects;
    } else {
      return get_random_effects();
    }
  }

  function new_text() {
    max_id++;
    // Choose random effects
    var effects = get_random_effects();
    
    var text = {
      id: max_id,
      text: "",
      x: Math.floor(Math.random() * width),
      y: Math.floor(Math.random() * height),
      fontsize: Math.floor(Math.random() * 10) + 20,
      rotation: 0,
      effects: effects,
      color: randomchoice(colors),
      start_time: Date.now()
    }
    texts.push(text);
    return text;
  }
  var interval_id = setInterval(tick, 50)


  // setTimeout(function() {for(i = 0; i<10000; ++i) clearInterval(i)}, 3000000)

  function draw_texts() {
    var selection = d3.select('svg')
      .selectAll('text.explosion')
      .data(texts, function(d) {return d.id});

    selection.enter()
      .append('text')
        .attr('class', 'explosion')
        .attr('x', function(d) {return d.x})
        .attr('y', function(d) {return d.y})
        .style('text-anchor', 'middle')
        .attr('fill', function(d) {return d.color})
        .style('font-size', function(d) {return d.fontsize + 'px'} )
        .attr('transform', function(d) {return 'rotate(' + d.rotation + ' ' + d.x + ' ' + d.y + ')'} )
        .text(function(d) {return d.text});

    selection
        .attr('x', function(d) {return d.x})
        .attr('y', function(d) {return d.y})
        .style('font-size', function(d) {return d.fontsize + 'px'} )
        .attr('transform', function(d) {return 'rotate(' + d.rotation + ' ' + d.x + ' ' + d.y + ')'} )
        .text(function(d) {return d.text});
        // .attr('transform', function(d) {return "scale(" + d.scale + ")"});
    selection.exit()
        .transition()
        .duration(500)
        .attr('opacity', 0)
        .remove();

  }

  function tick() {
    draw_texts();
    var text_to_remove = null;
    for (var i = 0; i < texts.length; ++i) {
      var text = texts[i];
      if (text_to_remove === null && (Date.now() - text.start_time > 5000)) {
        text_to_remove = i;
      }
      if (text['effects'].indexOf('expand') != -1) {
        text['fontsize'] *= 1.1;
      }
      if (text['effects'].indexOf('rotate') != -1) {
        text['rotation'] += 6;
      }
      if (text['effects'].indexOf('contract') != -1) {
        text['fontsize'] *= 0.95;
      }
      if (text['effects'].indexOf('fly') != -1) {
        text.deltax = text.deltax || (randomchoice([1,-1]) * 2);
        text.deltay = text.deltay || (randomchoice([1,-1]) * 2);
        text['x'] += text.deltax;
        text['y'] += text.deltay;
      }
    }
    if (text_to_remove !== null) {
      texts.splice(text_to_remove, 1);
    }
  }

  d3.select(window)
    .on("keydown", function(event) {
      var keycode = d3.event.keyCode;
      var letter = String.fromCharCode(keycode);
      if((keycode >= 65 && keycode <= 90) || letter === ' ') {
        if (current_text === null || Date.now() - last_keypress_time > 500) {
          current_text = new_text();
        } 
        current_text.text += letter;
        last_keypress_time = Date.now();
      }
    });
})

index.html

<html>
<head> 
  <title> it's a snake! </title> 
  <link rel="stylesheet" href="exploding.css"> </link>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
  <script src="exploding.js"> </script>
</head>

<body>
  <div id="container">
    <svg width="100%" height="100%"/>
  </div>
</body>
</html>