liuffy.github.io/sleep.html at master · liuffy/liuffy.github.io · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="img/favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="img/favicon/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="img/favicon/manifest.json">
    <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg">
    <link rel="shortcut icon" href="img/favicon/favicon.ico">
    <meta name="msapplication-config" content="img/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/animsition.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/graph.css">
    <link rel="stylesheet" href="css/main.css">
    <title> | Sleep Defender </title>
    <link rel="stylesheet" href="css/light.css">
  </head>
  <body class="animsition">
    <div class="showbox">
      <div class="loader">
        <svg viewBox="25 25 50 50" class="circular">
          <circle cx="50" cy="50" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" class="path"></circle>
        </svg>
      </div>
    </div>
    <div class="background"></div>
    <div class="flex-wrapper">
      <div class="main-content align-center">
        <div class="container-fluid">
          <div class="row">
            <div class="container">
              <div class="row">
                <div class="col-md-7 col-md-offset-1 visible-lg visible-md">
                  <div class="open-project-lightbox">


                  <a href="img/portfolio/open/Sleep1.png"><span class="plus"><span></span><span></span></span>
                  <img alt="" src="img/portfolio/open/Sleep1.png"></a>

                  <a href="img/portfolio/open/grid_3.gif"><span class="plus"><span></span><span></span></span><img alt="" src="img/portfolio/open/grid_3.gif"></a>

                  <a href="img/portfolio/open/Sleep3.png"><span class="plus"><span></span><span></span></span><img alt="" src="img/portfolio/open/Sleep3.png"></a></div>

                </div>
                <div class="col-md-3 col-md-offset-0 col-sm-8 col-sm-offset-1 project-description">
                  <h5 class="text-1-opacity">Sleep Defender </h5>
                  <p>Sleep Defender is a JavaScript bullet evasion game inspired by Defender (classic space shooter game). It uses PixiJS for optimized DOM manipulation and HowlerJS for attaching sound effects to game and keyboard events. It features different game scenes, which is achieved through manipulation of the game loop.</p>

                  <p><span class="cool-feature">Cool feature:</span> Some of the enemy characters can follow you around - this is achieved through simple vector mathematics.
                  </p>
                  <div class="project-info">
                    <p><span class="info text-uppercase">client</span><span class="info-description"> Personal Project</span></p>
                    <p><span class="info text-uppercase">completed</span><span class="info-description"> February 2017</span></p>
                    <p><span class="info text-uppercase">github</span><span class="info-description"><a href="https://github.com/liuffy/Sleep-Defender" target="_blank">Sleep Defender</a></span></p>
                    <p><span class="info text-uppercase">live</span><span class="info-description"><a href="http://sophia-liu.com/Sleep-Defender/" target="_blank">Play Sleep Defender</a></span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container navigation">
      <div class="portfolio-open-nav"><a href="open.html" class="prev animsition-link"><i class="fa fa-angle-left"></i>prev</a><a href="tracktive.html" class="next animsition-link">next<i class="fa fa-angle-right"></i></a>
      <a href="portfolio.html" class="close animsition-link back">EXIT</a></div>
    </div>
    <script>
      if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
          document.write('<script src="js/browser-polyfill.min.js"><\/script>');
          document.write('<script src="js/innersvg.js"><\/script>');
      }
    </script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/animsition.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src="js/isotope.pkgd.js"></script>
    <script src="js/masonry-horizontal.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/graph.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>