Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
scaramouche18 authored Jan 13, 2024
0 parents commit f962873
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 0 deletions.
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movement controller</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<canvas id="canvas" width="1000px" height="600px" ></canvas>
<script src="scripts/script.js"></script>
<script src="scripts/inputHandler.js"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions inputHandler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
addEventListener("keydown",function(e){
if(e.code === 'KeyD'){vx = 5; }
if(e.code === 'KeyA'){vx = -5;}
if(e.code === 'KeyS'){vy = 5;}
if(e.code === 'KeyW'){vy = -5;}
});

addEventListener("keyup",function(e){
if(e.code ==='keyD'){vx = 0; }
if(e.code ==='keyA'){vx = 0; }
if(e.code === 'KeyS'){vy = 0;}
if(e.code === 'KeyW'){vy = 0;}

})
21 changes: 21 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
console.log("main js loaded");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let x = 0;
let y = 0;
let vx = 0;
let vy = 0;



function update(){
ctx.clearRect(0, 0, canvas.width, canvas.height );
x += vx;
y += vy;
if (x < 0 || x + 50 > canvas.width) vx = -vx; // reverse direction if rectangle hits the edge
if (y < 0 || y + 50 > canvas.height) vy = -vy; // reverse direction if rectangle hits the edge
ctx.fillRect(x, y, 50, 50);
requestAnimationFrame(update)
}

update();
Empty file added style.css
Empty file.

0 comments on commit f962873

Please sign in to comment.