fishies.html

<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="favicon.gif" type="image/gif" />
<head>
  <meta name="description" content="Fishies swimming" />
  <meta name="keywords" content="fish, game, animation" />
  <meta name="author" content="William Chung" />
  <meta charset="utf-8" />
  <title>FISHIES</title>
  <style type="text/css" media="screen">
    /*******************
     * FISH PROPERTIES *
     *******************/
    .Mleft{
      position: absolute;
      border-radius:50%;
      top:45%;
      left:45%;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      -webkit-transition: 1s ease-out;
      transition: 1s ease-out;
      width: 50px;
    }
    #o_fish{
      display: none;
    }
    #o_fish-path{
      fill: white;
    }
    .Oleft{
      display: inline;
      position:absolute;
      width:25px;
      height:25px;
      border-radius:50%;
      top:45%;
      left:45%;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      -webkit-transition: 3s ease-out;
      transition: 3s ease-out;
    }
    .Oright{
      position:absolute;
      width:25px;
      height:25px;
      border-radius:50%;
      top:45%;
      left:45%;
      -webkit-transition: 3s ease-out;
      transition: 3s ease-out;
    }

    /***********************************************
     * Everything unrelated to the fish animations *
     ***********************************************/
    /* hidden */
    .hide{
      display: none;
    }
    /* coordinate box */
    #coord{
      position: absolute;
      left: 10px;
      bottom: 10px;
    }
    /* eat count */
    #eaten{
      position: absolute;
      text-align: center;
      right: 50%;
      top: 10px;
    }
    /* Button 1 */
    #FishIt{
      position: absolute;
      right: 50%;
      bottom: 10px;
      color: #3465a4;
      border-radius: 5px;
    }
    /* toggle for darkmode */
    #darkToggle{
      position: absolute;
      left: 10px;
      top: 10px;
    }

    /* toggle Dark Mode */
    .darken{
      -webkit-filter: invert(100%);
      filter: invert(100%);
    }

    /* Prevent scrolling away */
    html {
      overflow-y: hidden;
      overflow-x: hidden;
    }
    body{
      background-color: #A8DBFB;
    }
  </style>
  <script type="text/javascript">
    // Variables
    var fX = -25;               // X variable for how centered the main fish will be
    var fY = -25;               // Y variable for how centered the main fish will be
    var xFLIP = -1;             // Flipping direction of the main fish
    var growthFactor = 3;       // How fast do you want to grow?
    var growthLOG = 9;          // Base of the logarithmic function log_growthFactor
    var o_fish_count = 0;       // Number of background fishies (Also doubles as an
                                // id assignment variable
    var o_fish_brightness = 1;  // Brightness of fish ranging from 1 to 5
    var o_fish_list = [];       // Empty list for bg-fishies
    var eaten = 0;              // Number of fishies eaten
    var mSpeed = 0.5;           // Speed of the main fish (lower is faster)
    var oSpeed = 3;             // Speed of the other fishies (lower is faster)

    // Width + height 
    var width = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

    var height = window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;


    function clog(anything){console.log(anything)} // I'm lazy = type less

    // Removing from o_fish_list
    function removeFish(fish){
      var index = o_fish_list.indexOf(fish);
      if (index > -1) { o_fish_list.splice(index, 1) }
      else { clog("Failed to remove " + fish) }
    }

    // Removing from html
    function removeElement(id) {
      var element = document.getElementById(id);
      //clog(element);
      element.parentNode.removeChild(element);
    }

    // Big fish eat small fish helper function
    function bigFishEating(){
      var d = document.getElementById('Mfish');
      var fishMain = d.getBoundingClientRect();
      var fList = [];
      // Convert list element to rectangle
      for (var i = 0; i < o_fish_list.length; i++){
        fList.push(o_fish_list[i].getBoundingClientRect());
      }
      // Remove upon overlap
      for (var i = 0; i < fList.length; i++){
        var overlap = !(fishMain.right < fList[i].left ||
                        fishMain.left > fList[i].right ||
                        fishMain.bottom < fList[i].top ||
                        fishMain.top > fList[i].bottom);
        if (overlap){
          removeElement(o_fish_list[i].id); // delete the fish when eaten
          removeFish(o_fish_list[i]); // remove fish from records
          eaten++;
          if (eaten <= 1){
            document.getElementById("eaten").innerHTML = "You've eaten " + 
                                                          eaten + " fishie";
          }
          else{
            document.getElementById("eaten").innerHTML = "You've eaten " + 
                                                          eaten + " fishies";
          }
        }
      }
    }

    // Constantly check if any fishies are overlapped by the big fish every 250 ms.
    setInterval(function(){bigFishEating();}, 250);

    // Let's Credit the source: http://jsbin.com/gejuz/1/edit?html,output
    (function() {
      document.onmousemove = handleMouseMove;
      var oldCoordX = 0; // used to determine the direction main fish is facing
      function handleMouseMove(event) {
        var eventDoc, doc, body, pageX, pageY;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
          eventDoc = (event.target && event.target.ownerDocument) || document;
          doc = eventDoc.documentElement;
          body = eventDoc.body;

          event.pageX = event.clientX +
            (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
            (doc && doc.clientLeft || body && body.clientLeft || 0);
          event.pageY = event.clientY +
            (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
            (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        // Use event.pageX / event.pageY here

        // Everything related to the main fishy is below here:
        var d = document.getElementById('Mfish');
        //d.style.position = "absolute";
        d.style.left = event.pageX + fX + 'px';
        d.style.top = event.pageY + fY +'px';

        // Show coordinates if the url has "xy"
        if (location.hash.substr(1) == "xy"){
          var text = "X: " + event.pageX + ", Y: " + event.pageY +
          " | BGfishies: " + o_fish_count;
          document.getElementById("coord").innerHTML = text;
        }
        else{
          document.getElementById("coord").innerHTML = "";
        }

        if ( oldCoordX > event.pageX ){
          xFLIP = 1;
          //d.classList.add("Mright");
          //d.classList.remove("Mleft");
        }
        else{
          xFLIP = -1;
          //d.classList.add("Mleft");
          //d.classList.remove("Mright");
        }
        oldCoordX = event.pageX;

        var growth = 1;
        function loggo(val) {
          return Math.log(val) / Math.log(growthLOG);
        }
        // don't scale until afterwards
        if ( growthFactor * Math.log(eaten) >=1 ) {
          growth = growthFactor * loggo(eaten);
        }
        d.style.transform = "scaleX(" + xFLIP + ") scale(" + growth + ")";
        d.style.transition = mSpeed + "s ease-out";
        //clog(fList);

      }
    })();
    //////////////////////////
    // End of main function //
    //////////////////////////

    // Background fishies
    function otherFish(){
      // random numbers
      function randW(){
        min = Math.ceil(50);
        max = Math.floor(width - 50);
        // The maximum is inclusive and the minimum is inclusive
        return Math.floor(Math.random() * (max - min + 1)) + min;
        }
      function randH(){
        min = Math.ceil(50);
        max = Math.floor(height - 50);
        // The maximum is inclusive and the minimum is inclusive
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      // Has darker colors
      //function getRandomColor() {
      //  var letters = 'FEDCBA9876543210';
      //  var color = '#';
      //  for (var i = 0; i < 6; i++) {
      //    //Base 16 :D
      //    color += letters[Math.floor(Math.random() * 16)];
      //  }
      //  return color;
      //}
      
      function getRandColor(brightness){
        // Six levels of brightness from 0 to 5, 0 being the darkest
        var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
        var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
        var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] +
        mix[2]].map(function(x){ return Math.round(x/2.0)});
        return "rgb(" + mixedrgb.join(",") + ")";
      }

      var itm = document.getElementById("o_fish");
      var e = itm.cloneNode(true);
      e.style.position = "absolute";
      e.style.display = "inline";
      e.id = "o_fish-" + o_fish_count; // Give the fish a unique id
      o_fish_list.push(e); // Add fish to list
      o_fish_count++; // increment the id by 1
      
      var child1 = e.children;
      //clog(child1);
      for (var i = 0; i < child1.length; i++) {
          if (child1[i].tagName == "g") {
            var child2 = child1[i].children;
            //clog(child2);
            for (var j = 0; j < child2.length; j++) {
              if (child2[j].tagName == "path") {
                var color = getRandColor(o_fish_brightness);
                //clog(color);
                child2[j].style.fill = color;
              }
            }
          }
      }

      var holdRandW; // Was using this to debug
      var oldCoordX;
      e.style.transition = oSpeed + "s ease-out";
      function moveFishy(){
        holdRandW = randW();
        e.style.left = holdRandW + "px";
        e.style.top = randH() +'px';
        //clog(holdRandW);
        if ( holdRandW < oldCoordX ){
          e.classList.add("Oright");
          e.classList.remove("Oleft");
          //e.setAttribute('class','Oright');
          //clog(randH() + " | Oright");
        }
        else{
          e.classList.add("Oleft");
          e.classList.remove("Oright");
          //e.setAttribute('class','Oleft');
          //clog(randH() + " | Oleft");
        }
        setTimeout(moveFishy, 2000);
        oldCoordX = holdRandW;
      }

      document.body.appendChild(e); // Add fish to the html
      moveFishy();

      if (o_fish_count == 2500){
        //alert("Aren't you getting a bit crazy here...?");
      }
    }
    ////////////////////////////
    // End of background fish //
    ////////////////////////////

    function moreFish(){
      //document.getElementById("FishIt").style.display = "none"; //Hide button
      otherFish();
    }
  </script>
</head>
<body>
  <img
      id="Mfish"
      class="Mleft"
      src="data:image/svg+xml;charset=UTF-8, %3Csvg xmlns='http://www.w3.org/2000/svg' id='Mfish' viewBox='0 0 15.870892 11.059746'%3E%3Cg transform='translate(-0.32264107,-285.34704)' id='Mfish-layer1'%3E%3Cpath id='Mfish-path' d='m 12.590442,294.97791 c -0.87312,-0.58043 -1.73126,-1.056 -1.90698,-1.05683 -0.17571,-8.4e-4 -0.8107108,0.36829 -1.4111088,0.82025 -0.755888,0.56902 -1.639909,0.84466 -2.874293,0.89622 -1.553455,0.0649 -1.990642,-0.0844 -3.400232,-1.16065 -2.71028989,-2.06946 -3.25563889,-5.23582 -1.238506,-7.1909 1.068351,-1.03549 1.352333,-1.12754 3.478548,-1.12754 1.887825,0 2.555142,0.16281 3.614844,0.88195 0.71479,0.48507 1.5147378,0.88194 1.7776678,0.88194 0.26293,0 1.31315,-0.56198 2.33382,-1.24884 1.25286,-0.84311 1.97186,-1.13276 2.21308,-0.89154 0.58592,0.58592 0.59236,8.52129 0.008,9.46052 -0.62745,1.00793 -0.68986,1.00156 -2.59452,-0.26458 z m -3.5277768,-2.47894 0.881945,-1.06668 1.9177418,1.23679 c 1.05475,0.68023 1.94896,1.20018 1.98714,1.15544 0.0382,-0.0447 -0.0113,-1.29718 -0.10999,-2.78322 l -0.17939,-2.70188 -1.10219,0.67209 c -1.50463,0.91748 -2.9117138,0.84748 -4.1651478,-0.20721 -0.850821,-0.71592 -1.428215,-0.88195 -3.067175,-0.88195 -2.255711,0 -2.865711,0.38905 -2.865711,1.82772 0,0.7536 0.205541,1.03265 0.886526,1.20356 0.487589,0.12238 1.101526,0.0441 1.364305,-0.17401 0.361246,-0.29981 0.587115,-0.26478 0.92605,0.14361 0.368589,0.44412 0.335835,0.66437 -0.184258,1.23907 -0.347892,0.38442 -0.885739,0.70399 -1.195216,0.71016 -0.456217,0.009 -0.429183,0.11445 0.142871,0.55678 1.142249,0.88323 3.671572,0.38917 4.762499,-0.93027 z m -4.543654,-2.93796 c -0.307422,-0.37042 -0.287644,-0.58323 0.08278,-0.89065 0.370421,-0.30742 0.583224,-0.28764 0.890645,0.0828 0.307422,0.37042 0.287644,0.58322 -0.08278,0.89064 -0.37042,0.30743 -0.583223,0.28765 -0.890644,-0.0828 z' /%3E%3C/g%3E%3C/svg%3E"
  >

  <!-- inline svg of background fish for easy JS manipulation -->
  <svg
    id="o_fish"
    viewBox="0 0 15.870892 11.059746">
    <g
      transform="translate(-0.32264107,-285.34704)"
      id="o_fish-layer1">
    <path
      id="o_fish-path"
      d="m 12.590442,294.97791 c -0.87312,-0.58043 -1.73126,-1.056 -1.90698,-1.05683 -0.17571,-8.4e-4 -0.8107108,0.36829 -1.4111088,0.82025 -0.755888,0.56902 -1.639909,0.84466 -2.874293,0.89622 -1.553455,0.0649 -1.990642,-0.0844 -3.400232,-1.16065 -2.71028989,-2.06946 -3.25563889,-5.23582 -1.238506,-7.1909 1.068351,-1.03549 1.352333,-1.12754 3.478548,-1.12754 1.887825,0 2.555142,0.16281 3.614844,0.88195 0.71479,0.48507 1.5147378,0.88194 1.7776678,0.88194 0.26293,0 1.31315,-0.56198 2.33382,-1.24884 1.25286,-0.84311 1.97186,-1.13276 2.21308,-0.89154 0.58592,0.58592 0.59236,8.52129 0.008,9.46052 -0.62745,1.00793 -0.68986,1.00156 -2.59452,-0.26458 z m -3.5277768,-2.47894 0.881945,-1.06668 1.9177418,1.23679 c 1.05475,0.68023 1.94896,1.20018 1.98714,1.15544 0.0382,-0.0447 -0.0113,-1.29718 -0.10999,-2.78322 l -0.17939,-2.70188 -1.10219,0.67209 c -1.50463,0.91748 -2.9117138,0.84748 -4.1651478,-0.20721 -0.850821,-0.71592 -1.428215,-0.88195 -3.067175,-0.88195 -2.255711,0 -2.865711,0.38905 -2.865711,1.82772 0,0.7536 0.205541,1.03265 0.886526,1.20356 0.487589,0.12238 1.101526,0.0441 1.364305,-0.17401 0.361246,-0.29981 0.587115,-0.26478 0.92605,0.14361 0.368589,0.44412 0.335835,0.66437 -0.184258,1.23907 -0.347892,0.38442 -0.885739,0.70399 -1.195216,0.71016 -0.456217,0.009 -0.429183,0.11445 0.142871,0.55678 1.142249,0.88323 3.671572,0.38917 4.762499,-0.93027 z m -4.543654,-2.93796 c -0.307422,-0.37042 -0.287644,-0.58323 0.08278,-0.89065 0.370421,-0.30742 0.583224,-0.28764 0.890645,0.0828 0.307422,0.37042 0.287644,0.58322 -0.08278,0.89064 -0.37042,0.30743 -0.583223,0.28765 -0.890644,-0.0828 z"
    />
    </g>
  </svg>

<div id="coord"></div>
<div id="eaten"></div>
<div id="darkToggle">
  <input id="toggleBox0" type="checkbox" onChange="darkThis(this)"><label for="toggleBox0">Dark Mode</label><br>
  <input id="toggleBox1" type="checkbox" onChange="constaSpawn(this)"><label for="toggleBox1">ConstaSpawn</label>
</div>
<button id="FishIt" onclick="moreFish();">Spawn More Fish</button>
<!-- Script for checkboxes -->
<script type="text/javascript">
  // Dark mode stuff
  var colorToggle = document.getElementById("toggleBox");
  var child1 = document.body.childNodes;

  // Helper function for searching and setting colors
  function recurseDark(child){
    for (var i = 0; i < child.length; i++) {
      if ( child[i].tagName != null ){
        child[i].classList.toggle('darken');
        recurseDark(child[i]);
      }
    }
  }

  function darkThis(_this) {
    // Set bg before everything else
    if (_this.checked){ document.body.style.background = "#313F48" }
    else { document.body.style.background = "#A8DBFB" }
    // Recursively search and change colors
    recurseDark(child1);
  }

  // Constantly Spawn
  var constaSawnFish;
  function constaSpawn(_this) {
    if (_this.checked) {
      constaSawnFish = setInterval(moreFish, 1500);
    }
    else {
      clearInterval(constaSawnFish);
    }
  }
</script>
</body>
</html>