Draw ball. Move ball by cursor keys.

kenzan100 · Dec 28, 2020 · 5baa3f8 · 5baa3f8 · kenzan100 · Dec 28, 2020
1 parent d13f560
commit 5baa3f8
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -2,9 +2,15 @@
 <html>
     <head>
         <meta charset="utf-8" />
+        <title>Your. First. Game. Ever.</title>
+        <style>
+         * { padding: 0; margin: 0; }
+         canvas { background: #eee; display: block; margin: 0 auto; }
+        </style>
     </head>
     <body>
         Hi.
+        <canvas id="myCanvas" width="480" height="320"></canvas>
         <script src="main.js"></script>
     </body>
 </html>
diff --git a/src/client/index.js b/src/client/index.js
@@ -1 +1,46 @@
 console.log('Hello');
+
+const canvas = document.getElementById("myCanvas");
+const ctx = canvas.getContext("2d");
+
+let x = 10;
+let y = 10;
+let dx = 0;
+let dy = 0;
+
+function draw_ball(x, y) {
+    ctx.beginPath();
+    ctx.arc(x, y, 20, 0, Math.PI*2, false);
+    ctx.fillStyle = "green";
+    ctx.fill();
+    ctx.closePath();
+}
+
+const inputs = {
+    keyDownActions: {
+        'Left':  () => { dx = -2; dy = 0; },
+        'Right': () => { dx =  2; dy = 0; },
+        'Up':    () => { dy = -2; dx = 0; },
+        'Down':  () => { dy =  2; dx = 0; },
+    },
+
+    keyDownHandler(e) {
+        let val = e.key.replace('Arrow', '');
+        const fn = this.keyDownActions[val];
+        if (typeof fn == 'function') {
+            fn();
+        };
+    },
+};
+
+const renderer = {
+    render() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        x += dx;
+        y += dy;
+        draw_ball(x, y);
+    },
+};
+
+document.addEventListener("keydown", inputs.keyDownHandler.bind(inputs), false);
+setInterval(renderer.render, 1000/60);