pong

2018-06-17 18:10:22 +00:00
parent d70d1379e3
commit 1eb0212574
3 changed files with 69 additions and 0 deletions
--- a/NodeJS/Pong/css/style.css
+++ b/NodeJS/Pong/css/style.css
@@ -0,0 +1,14 @@
+body {
+    background-color: black;
+}
+
+canvas {
+    padding: 0;
+    margin: auto;
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
--- a/NodeJS/Pong/game.js
+++ b/NodeJS/Pong/game.js
@@ -0,0 +1,41 @@
+let c = document.getElementById("canv");
+let ctx = c.getContext("2d");
+
+let playerP = {
+    width: 30,
+    height: 60,
+    x: 30 / 2,
+    y: ctx.canvas.height / 2
+}
+
+
+window.addEventListener("keydown", onKeyDown, false);
+
+function onKeyDown(event) {
+    switch (event.key) {
+        case 'W':
+        case 'w':
+            playerP.y++;
+            break;
+        case 'S':
+        case 's':
+            playerP.x--;
+            break;
+    }
+}
+
+function gameLoop() {
+    draw();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    ctx.fillStyle="#FFFFFF";
+    ctx.fillRect(0, 0, 400, 400);
+
+    ctx.fillStyle="#FF00FF";
+    ctx.fillRect(playerP.x, playerP.y, playerP.w, playerP.h);
+}
+
+setInterval(gameLoop, 10);
--- a/NodeJS/Pong/index.html
+++ b/NodeJS/Pong/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Pong!</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
+</head>
+<body>
+    <canvas id="canv" width="400" height="400" onkeypress="onKeyPressed(event)"></canvas>
+    <script src="game.js"></script>
+</body>
+</html>