svg game

substack · substack · commit df4497bd07b0 · 2017-06-21T13:42:12.000+02:00
diff --git a/graphics/circle.svg b/graphics/circle.svg
@@ -0,0 +1,3 @@
+<svg viewbox="0 0 1000 1000" width="800" height="500" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="300" cy="200" r="300" fill="purple"></circle>
+</svg>
diff --git a/graphics/demo.html b/graphics/demo.html
@@ -0,0 +1,19 @@
+<html>
+<body>
+<h1>svg demo</h1>
+<svg viewbox="0 0 100 100" width="1200" height="800" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <circle id="c" cx="30" cy="20" r="10" fill="purple"
+      stroke="orange" stroke-width="5" />
+    <rect x="10" y="60" width="20" height="10"
+      fill="red" />
+  </g>
+  <circle id="c" cx="10" cy="10" r="5" fill="green"
+    stroke="orange" stroke-width="5" />
+  <path d="M 10 10 L 50 10 L 20 30 z"
+    fill="orange" stroke="black" stroke-width="3" />
+  <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"
+    stroke="magenta" stroke-width="3" fill="transparent" />
+</svg>
+</body>
+</html>
diff --git a/graphics/game.svg b/graphics/game.svg
diff --git a/graphics/main.js b/graphics/main.js
@@ -0,0 +1,39 @@
+var loadsvg = require('load-svg')
+
+loadsvg('game.svg', function (err, svg) {
+  var player = svg.querySelector('#player')
+  var physics = {
+    position: [0,700],
+    velocity: [0,0],
+    acceleration: [0,0.1]
+  }
+  document.body.appendChild(svg)
+  var prev = Date.now()
+  loop()
+  function loop () {
+    var now = Date.now()
+    var dt = now - prev
+    prev = now
+    physics.position[0] += physics.velocity[0] * dt
+    physics.position[1] += physics.velocity[1] * dt
+    physics.velocity[0] += physics.acceleration[0] * dt
+    physics.velocity[1] += physics.acceleration[1] * dt
+    physics.velocity[0] *= 0.9
+    if (physics.position[1] > 0) {
+      physics.position[1] = 0
+      physics.velocity[1] = 0
+    }
+    player.setAttribute('transform', 'translate('
+      + physics.position[0] + ',' + physics.position[1] + ')')
+    window.requestAnimationFrame(loop)
+  }
+  window.addEventListener('keydown', function (ev) {
+    if (ev.keyCode === 0x20) {
+      physics.velocity[1] -= 10
+    } else if (ev.keyCode === 37) {
+      physics.velocity[0] = -2
+    } else if (ev.keyCode === 39) {
+      physics.velocity[0] = +2
+    }
+  })
+})
diff --git a/graphics/package.json b/graphics/package.json
@@ -0,0 +1,17 @@
+{
+  "dependencies": {
+    "bunny": "^1.0.1",
+    "frame-loop": "^1.2.1",
+    "glsl-hsl2rgb": "^1.1.0",
+    "glsl-noise": "0.0.0",
+    "glslify": "^6.1.0",
+    "icosphere": "^1.0.0",
+    "load-svg": "^1.0.0",
+    "regl": "^1.3.0",
+    "regl-camera": "^2.1.1",
+    "resl": "^1.0.3",
+    "svg-create-element": "^1.0.0",
+    "teapot": "^1.0.0",
+    "xhr": "^2.4.0"
+  }
+}
diff --git a/svg.markdown b/svg.markdown
@@ -89,6 +89,7 @@ Set the "transform" attribute to any of these:
 
 shifts the y down 30 units and the x right 20 units 
 
+---
 # scale
 
 ``` html
