Skip to content

Commit df4497b

Browse files
substacksubstack
substack
authored and
substack
committed
svg game
1 parent 1b05952 commit df4497b

File tree

6 files changed

+171
-0
lines changed

6 files changed

+171
-0
lines changed

graphics/circle.svg

+3
Loading

graphics/demo.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<html>
2+
<body>
3+
<h1>svg demo</h1>
4+
<svg viewbox="0 0 100 100" width="1200" height="800" xmlns="http://www.w3.org/2000/svg">
5+
<g>
6+
<circle id="c" cx="30" cy="20" r="10" fill="purple"
7+
stroke="orange" stroke-width="5" />
8+
<rect x="10" y="60" width="20" height="10"
9+
fill="red" />
10+
</g>
11+
<circle id="c" cx="10" cy="10" r="5" fill="green"
12+
stroke="orange" stroke-width="5" />
13+
<path d="M 10 10 L 50 10 L 20 30 z"
14+
fill="orange" stroke="black" stroke-width="3" />
15+
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"
16+
stroke="magenta" stroke-width="3" fill="transparent" />
17+
</svg>
18+
</body>
19+
</html>

graphics/game.svg

+92
Loading

graphics/main.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var loadsvg = require('load-svg')
2+
3+
loadsvg('game.svg', function (err, svg) {
4+
var player = svg.querySelector('#player')
5+
var physics = {
6+
position: [0,700],
7+
velocity: [0,0],
8+
acceleration: [0,0.1]
9+
}
10+
document.body.appendChild(svg)
11+
var prev = Date.now()
12+
loop()
13+
function loop () {
14+
var now = Date.now()
15+
var dt = now - prev
16+
prev = now
17+
physics.position[0] += physics.velocity[0] * dt
18+
physics.position[1] += physics.velocity[1] * dt
19+
physics.velocity[0] += physics.acceleration[0] * dt
20+
physics.velocity[1] += physics.acceleration[1] * dt
21+
physics.velocity[0] *= 0.9
22+
if (physics.position[1] > 0) {
23+
physics.position[1] = 0
24+
physics.velocity[1] = 0
25+
}
26+
player.setAttribute('transform', 'translate('
27+
+ physics.position[0] + ',' + physics.position[1] + ')')
28+
window.requestAnimationFrame(loop)
29+
}
30+
window.addEventListener('keydown', function (ev) {
31+
if (ev.keyCode === 0x20) {
32+
physics.velocity[1] -= 10
33+
} else if (ev.keyCode === 37) {
34+
physics.velocity[0] = -2
35+
} else if (ev.keyCode === 39) {
36+
physics.velocity[0] = +2
37+
}
38+
})
39+
})

graphics/package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"dependencies": {
3+
"bunny": "^1.0.1",
4+
"frame-loop": "^1.2.1",
5+
"glsl-hsl2rgb": "^1.1.0",
6+
"glsl-noise": "0.0.0",
7+
"glslify": "^6.1.0",
8+
"icosphere": "^1.0.0",
9+
"load-svg": "^1.0.0",
10+
"regl": "^1.3.0",
11+
"regl-camera": "^2.1.1",
12+
"resl": "^1.0.3",
13+
"svg-create-element": "^1.0.0",
14+
"teapot": "^1.0.0",
15+
"xhr": "^2.4.0"
16+
}
17+
}

svg.markdown

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ Set the "transform" attribute to any of these:
8989

9090
shifts the y down 30 units and the x right 20 units
9191

92+
---
9293
# scale
9394

9495
``` html

0 commit comments

Comments
 (0)