diff --git a/NodeJS/Pong/css/style.css b/NodeJS/Pong/css/style.css new file mode 100644 index 0000000..f81696a --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/NodeJS/Pong/game.js b/NodeJS/Pong/game.js new file mode 100644 index 0000000..4d3d39a --- /dev/null +++ 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); diff --git a/NodeJS/Pong/index.html b/NodeJS/Pong/index.html new file mode 100644 index 0000000..3186bb5 --- /dev/null +++ b/NodeJS/Pong/index.html @@ -0,0 +1,14 @@ + + +
+ + +