added music, license, links

joelalejandro · Mar 9, 2020 · a533ded · a533ded
1 parent d96cd0b
commit a533ded
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 128 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# Fly, Butterfly
+
+A 100% vanilla JavaScript-made game about butterflies and flowers. Submission for the Indie Game Garage Jam #0.
+
+## Technologies and tools used
+
+- Aseprite
+- HTML, CSS, JavaScript
+- Visual Studio Code
diff --git a/assets/PixelAdventures.mp3 b/assets/PixelAdventures.mp3
diff --git a/game/ui.css b/game/ui.css
@@ -0,0 +1,139 @@
+* {
+ box-sizing: border-box;
+}
+
+a {
+ color: #d3167c;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background: #000;
+}
+
+#game {
+ clip-path: inset(-1px);
+ width: 160px;
+ height: 320px;
+ border: 1px solid black;
+ outline: 1px solid white;
+ position: absolute;
+ cursor: none;
+ z-index: 1;
+ background: url(../assets/Surface1.png);
+ left: 50%;
+ top: 45%;
+ margin-left: -80px;
+ margin-top: -160px;
+ user-select: none;
+ animation: 300s scroll infinite linear;
+}
+
+#player {
+ position: absolute;
+ left: 50%;
+ bottom: 25%;
+ z-index: 10;
+}
+
+.spawn {
+ position: absolute;
+ top: -32px;
+ animation: 10s spawn linear;
+}
+
+#score {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ z-index: 20;
+ font: bold 10px monospace;
+ color: #fff;
+ filter: drop-shadow(1px 1px 0px #000);
+ letter-spacing: 2px;
+}
+
+#score:before {
+ content: "Score";
+ text-transform: uppercase;
+ display: block;
+ font: bold 8px monospace;
+ color: #fff;
+ letter-spacing: 0;
+}
+
+#life {
+ position: absolute;
+ top: 10px;
+ right: 8px;
+ z-index: 20;
+ filter: drop-shadow(1px 1px 0px #000);
+ -webkit-appearance: none;
+ appearance: none;
+ width: 50px;
+ height: 10px;
+}
+
+#life::-webkit-progress-value {
+ background: #d3167c;
+}
+
+#life:before {
+ content: "Life";
+ text-transform: uppercase;
+ display: block;
+ font: bold 8px monospace;
+ color: #fff;
+ text-align: right;
+}
+
+#gameover {
+ background: rgba(0,0,0,0.5);
+ color: #fff;
+ position: absolute;
+ font: 12px monospace;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ padding: 10px;
+ width: 100%;
+ height: 100%;
+}
+
+#gameover button {
+ background: #d3167c;
+ border: 1px solid black;
+ font: bold 12px monospace;
+ color: #fff;
+}
+
+#gameover span {
+ display: block;
+ font-size: 30px;
+}
+
+footer {
+ position: absolute;
+ bottom: 5px;
+ text-align: center;
+ font: 10px monospace;
+ color: white;
+ width: 100%;
+}
+
+@keyframes scroll {
+ 100% {
+ background-position: 0 10000px;
+ }
+}
+
+@keyframes spawn {
+ 100% {
+ top: 320px;
+ }
+}
diff --git a/index.html b/index.html
@@ -2,140 +2,22 @@
 <html>
  <head>
  <title>Fly, Butterfly!</title>
- <style>
- * {
- box-sizing: border-box;
- }
-
- html, body {
- margin: 0;
- padding: 0;
- overflow: hidden;
- width: 100%;
- height: 100%;
- background: #000;
- }
-
- #game {
- clip-path: inset(-1px);
- width: 160px;
- height: 320px;
- border: 1px solid black;
- outline: 1px solid white;
- position: absolute;
- cursor: none;
- z-index: 1;
- background: url(./assets/Surface1.png);
- left: 50%;
- top: 50%;
- margin-left: -80px;
- margin-top: -160px;
- user-select: none;
- animation: 300s scroll infinite linear;
- }
-
- #player {
- position: absolute;
- left: 50%;
- bottom: 25%;
- z-index: 10;
- }
-
- .spawn {
- position: absolute;
- top: -32px;
- animation: 10s spawn linear;
- }
-
- #score {
- position: absolute;
- top: 10px;
- left: 10px;
- z-index: 20;
- font: bold 10px monospace;
- color: #fff;
- filter: drop-shadow(1px 1px 0px #000);
- letter-spacing: 2px;
- }
-
- #score:before {
- content: "Score";
- text-transform: uppercase;
- display: block;
- font: bold 8px monospace;
- color: #fff;
- letter-spacing: 0;
- }
-
- #life {
- position: absolute;
- top: 10px;
- right: 8px;
- z-index: 20;
- filter: drop-shadow(1px 1px 0px #000);
- -webkit-appearance: none;
- appearance: none;
- width: 50px;
- height: 10px;
- }
-
- #life::-webkit-progress-value {
- background: #d3167c;
- }
-
- #life:before {
- content: "Life";
- text-transform: uppercase;
- display: block;
- font: bold 8px monospace;
- color: #fff;
- text-align: right;
- }
-
- #gameover {
- background: rgba(0,0,0,0.5);
- color: #fff;
- position: absolute;
- font: 12px monospace;
- display: flex;
- flex-direction: column;
- justify-content: center;
- text-align: center;
- padding: 10px;
- width: 100%;
- height: 100%;
- }
-
- #gameover button {
- background: #d3167c;
- border: 1px solid black;
- font: bold 12px monospace;
- color: #fff;
- }
-
- #gameover span {
- display: block;
- font-size: 30px;
- }
-
- @keyframes scroll {
- 100% {
- background-position: 0 10000px;
- }
- }
-
- @keyframes spawn {
- 100% {
- top: 320px;
- }
- }
- </style>
+ <link rel="stylesheet" href="game/ui.css">
+ <base target="_blank">
  </head>
  <body>
  <main id="game">
  <img src="assets/Butterfly.gif" id="player">
  </main>
 
+ <footer>
+ Game and visual assets made by <a href="https://twitter.com/joelalejandro">@joelalejandro</a> | <a href="https://github.com/joelalejandro/fly-butterfly">Check out the source code on GitHub</a><br>
+
+ “Pixel adventures” | Music by <a href="http://www.marcelofernandezmusic.com">Marcelo Fernandez</a> (<a href="http://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a>).
+ </footer>
+
+ <audio loop autoplay src="assets/PixelAdventures.mp3"></audio>
+
  <script src="game/engine/Utils.js"></script>
  <script src="game/engine/GameElement.js"></script>
  <script src="game/engine/GameScene.js"></script>