Focus the scene, and use the arrow keys to move.
xxxxxxxxxx
<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>