js13kGames · Ovilia · Aug 24, 2019 · Aug 31, 2019 · Sep 6, 2019 · Sep 6, 2019
diff --git a/README.md b/README.md
@@ -0,0 +1,10 @@
+# snake-it-back
+
+![](img/image-big.jpg)
+
+This is a Web game that I'm going to join [js13kgames 2019](https://js13kgames.com) with.
+
+This year's theme is *back*. So I am making a Snake game that the dead snakes will come back to life again and become new obstacles for you.
+
+You are welcomed to [play](http://zhangwenli.com/snake-it-back) and [give advice in issues](https://github.com/Ovilia/snake-it-back/issues)!
+
diff --git a/img/image-big.jpg b/img/image-big.jpg
diff --git a/img/image-thumbnail.jpg b/img/image-thumbnail.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<html><head><style>body{text-align:center;background-color:#504a4b}canvas{width:600px;height:420px;position:relative;margin:20px 0}#score-panel{visibility:hidden;font-size:18px;margin-top:10px;color:#d1c4af}#count-down{position:absolute;left:0;right:0;top:180px;height:80px;font-size:120px;z-index:100;text-align:center;color:#585356}#main{background:#d1c4af}#start{display:none;position:absolute;top:400px;left:50%;transform:translate(-50%, -50%);background:#585356;color:#d1c4af;font-weight:700;font-size:22px;cursor:pointer;padding:5px 10px;border-radius:8px}#about, #about a{color:#d1c4af}#m{position:fixed;top:10px;right:10px;color:#d1c4af}</style><meta name="monetization" content="$pay.stronghold.co/1a1bffc0951b4954fcf8d7d0710ce9b956b"></head><body><div id="info"><div id="score-panel"> Score: <span id="score">0</span>, HP: <span id="heart">3</span></div></div><div id="count-down"></div> <canvas id="main"></canvas><div id="start">START</div><div id="about">SNAKE IT BACK: The died snakes become new obstacles. Earn your immortality. <a href="https://github.com/Ovilia/snake-it-back" target="_blank">GitHub</a></div><a href="javascript:m()" id="m">Mute</a> <script src="minified.js"></script> </body></html>
diff --git a/manifest.json b/manifest.json
@@ -1,14 +1,14 @@
 {
-  "name": "Title of the game",
-  "description": "Description of the game, including controls and optional extras for Coil subscribers if you participate in the Web Monetization category.",
+  "name": "SNAKE IT BACK",
+  "description": "The died snakes become new obstacles. Earn your immortality.",
   "images" : {
-    "image_large": "image-big.jpg",
-    "image_thumbnail": "image-small.jpg"
+    "image_large": "img/image-big.jpg",
+    "image_thumbnail": "img/image-thumbnail.jpg"
   },
-  "categories": ["Desktop", "Mobile", "Server", "Web Monetization", "WebXR"],
+  "categories": ["Desktop", "WebXR"],
   "user" : {
-    "name": "optional",
-    "website": "optional",
-    "twitter": "optional"
+    "name": "Ovilia",
+    "website": "http://zhangwenli.com",
+    "twitter": "OviliaZhang"
   }
 }
diff --git a/minified.js b/minified.js
diff --git a/snake-it-back.zip b/snake-it-back.zip
diff --git a/src/audio.js b/src/audio.js
@@ -0,0 +1,62 @@
+function Audio() {
+    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+    this.notePlayHandlers = [];
+}
+
+Audio.prototype.playNote = function (noteName, noteOnTime, sustain, callback) {
+    var oscillator = this.audioCtx.createOscillator();
+
+    oscillator.type = 'square';
+    var frequency = getHerzFromNoteName(noteName);
+    oscillator.frequency.setValueAtTime(frequency, this.audioCtx.currentTime);
+    oscillator.connect(this.audioCtx.destination);
+
+    var handler = setTimeout(function () {
+        oscillator.start();
+
+        setTimeout(function () {
+            oscillator.stop();
+
+            if (typeof callback === 'function') {
+                callback();
+            }
+        }, sustain * 1000);
+    }, noteOnTime * 1000);
+    this.notePlayHandlers.push(handler);
+};
+
+/**
+ * broken chord
+ */
+Audio.prototype.playChord = function (chordName, noteOnTime, sustain, callback) {
+    var noteSustain = sustain / 4;
+    var notes = getNotesFromChord(chordName);
+    this.playNote(notes[0], noteOnTime, noteSustain);
+    this.playNote(notes[2], noteOnTime + noteSustain, noteSustain);
+    this.playNote(notes[1], noteOnTime + noteSustain * 2, noteSustain);
+    this.playNote(notes[2], noteOnTime + noteSustain * 3, noteSustain, callback);
+};
+
+function getHerzFromNoteName(noteName) {
+    // http://pages.mtu.edu/~suits/notefreqs.html
+    return {
+        b4: 493.88,
+        c4: 261.63,
+        d4: 293.66,
+        e4: 329.63,
+        f4: 349.23,
+        g4: 392.00,
+        a4: 440.00,
+        x: 1000,
+        y: 800
+    }[noteName];
+}
+
+function getNotesFromChord(chordName) {
+    return {
+        c: ['c4', 'e4', 'g4'],
+        f: ['c4', 'f4', 'a4'],
+        g: ['b4', 'd4', 'g4']
+    }[chordName];
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,90 @@
+<html>
+    <head>
+        <style>
+            body {
+                text-align: center;
+                background-color: #504a4b;
+            }
+
+            canvas {
+                width: 600px;
+                height: 420px;
+                position: relative;
+                margin: 20px 0;
+            }
+
+            #score-panel {
+                visibility: hidden;
+                font-size: 18px;
+                margin-top: 10px;
+                color: #d1c4af;
+            }
+
+            #count-down {
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 180px;
+                height: 80px;
+                font-size: 120px;
+                z-index: 100;
+                text-align: center;
+                color: #585356;
+            }
+
+            #main {
+                background: #d1c4af;
+            }
+
+            #start {
+                display: none;
+                position: absolute;
+                top: 400px;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background: #585356;
+                color: #d1c4af;
+                font-weight: 700;
+                font-size: 22px;
+                cursor: pointer;
+                padding: 5px 10px;
+                border-radius: 8px;
+            }
+
+            #about, #about a {
+                color: #d1c4af;
+            }
+
+            #m {
+                position: fixed;
+                top: 10px;
+                right: 10px;
+                color: #d1c4af;
+            }
+        </style>
+
+        <meta name="monetization" content="$pay.stronghold.co/1a1bffc0951b4954fcf8d7d0710ce9b956b">
+    </head>
+
+    <body>
+        <div id="info">
+            <div id="score-panel">
+                Score: <span id="score">0</span>,
+                HP: <span id="heart">3</span>
+            </div>
+        </div>
+        <div id="count-down"></div>
+        <canvas id="main"></canvas>
+        <div id="start">START</div>
+
+        <div id="about">SNAKE IT BACK: The died snakes become new obstacles. Earn your immortality. <a href="https://github.com/Ovilia/snake-it-back" target="_blank">GitHub</a></div>
+
+        <a href="javascript:m()" id="m">Mute</a>
+
+        <script src="util.js"></script>
+        <script src="snake.js"></script>
+        <script src="ui.js"></script>
+        <script src="audio.js"></script>
+        <script src="index.js"></script>
+    </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<html><head><style>body{text-align:center;background-color:#504a4b}canvas{width:600px;height:420px;position:relative;margin:20px 0}#score-panel{visibility:hidden;font-size:18px;margin-top:10px;color:#d1c4af}#count-down{position:absolute;left:0;right:0;top:180px;height:80px;font-size:120px;z-index:100;text-align:center;color:#585356}#main{background:#d1c4af}#start{display:none;position:absolute;top:400px;left:50%;transform:translate(-50%, -50%);background:#585356;color:#d1c4af;font-weight:700;font-size:22px;cursor:pointer;padding:5px 10px;border-radius:8px}#about, #about a{color:#d1c4af}#m{position:fixed;top:10px;right:10px;color:#d1c4af}</style><meta name="monetization" content="$pay.stronghold.co/1a1bffc0951b4954fcf8d7d0710ce9b956b"></head><body><div id="info"><div id="score-panel"> Score: <span id="score">0</span>, HP: <span id="heart">3</span></div></div><div id="count-down"></div> <canvas id="main"></canvas><div id="start">START</div><div id="about">SNAKE IT BACK: The died snakes become new obstacles. Earn your immortality. <a href="https://github.com/Ovilia/snake-it-back" target="_blank">GitHub</a></div><a href="javascript:m()" id="m">Mute</a> <script src="minified.js"></script> </body></html>