D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
HarryStevens
Full window
Github gist
Superbox
Focus the scene, and use the arrow keys to move.
<!DOCTYPE html> <html> <head> <style> body { margin: 0; } </style> </head> <body> <div id="scene"></div> <script src="scene.js"></script> <script src="player.js"></script> <script> let left = 0, right = 0, up = 0; const myScene = new Scene; myScene.init("#scene"); const myPlayer = new Player; myPlayer.init({width: 100, height: 100, y: myScene.height}); myScene.addPlayer(myPlayer); function tick(){ requestAnimationFrame(tick); myScene.movePlayer({left, right, up}); myScene.draw(); } tick(); addEventListener("keydown", e => { if (e.code === "ArrowLeft") { left = 1; right = 0; } if (e.code === "ArrowRight") { right = 1; left = 0; } if (e.code === "ArrowUp") up = 1; }); addEventListener("keyup", e => { if (e.code === "ArrowLeft") left = 0; if (e.code === "ArrowRight") right = 0; if (e.code === "ArrowUp") up = 0; }); </script> </body> </html>