p3.edhebert.com/index.html at master · edhebert/p3.edhebert.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
    <head>
        <!--
            Ed Hebert
            ehebert@fas.harvard.edu
            DWA15 Project 3 - Javascript
            Created a creature using Javascript and the canvas element.
            This 'kitefish' wanders on its own, eats mouse clicks, grows, and even poops!
        -->
        <meta charset="UTF-8">
        <title>Kitefishing - Ed Hebert, DWA15 Project Three</title>
        <link rel="stylesheet" href="css/styles.css">

        <!-- Typekit fonts embed (these need to be loaded in head tag to function properly) -->
        <script type="text/javascript" src="//use.typekit.net/mmh0znz.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

    </head>
    <body>
        <header>
            <h1>Kitefishing</h1>
            <h2>Feed the kitefish your mouse clicks.</h2>
        </header>

        <div id="buttons">
            <button id='poop'>Poop the Kitefish</button>
            <button id='tails'>Remove Kitefish Tails</button>
        </div>

        <!-- canvas that displays all the Paper.js scripts -->
        <canvas id="myCanvas" data-paper-resize="true"></canvas>

        <!-- video loop downloaded from https://www.youtube.com/watch?v=n3mZYEUpdzo
             and converted to HTML video formats with Miro Video Converter -->
        <video autoplay loop preload poster="video/water.jpg">
            <source src="video/water-looping.mp4" type="video/mp4">
            <source src="video/water-looping.webmhd.webm" type="video/webm">
            <source src="video/water-looping.oggtheora.ogv" type="video/ogg">
            <img src="video/water.jpg" alt="pool"/>
        </video>

        <!-- Javascript used in the site functionality -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <!-- Paper.js javascript vector library -->
        <script type="text/javascript" src="js/paper-full.min.js"></script>
        <script src="js/scripts.js" type="text/javascript"></script>

        <!-- GA Tracking -->
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-44004266-3', 'edhebert.com');
            ga('send', 'pageview');
        </script>
    </body>
</html>