phjacoby/BallGame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first work init

Browse Source
This commit is contained in:
Philipp Jacoby
2025-10-22 17:23:20 +02:00
commit 552878be84
2 changed files with 137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Gamedev Canvas Workshop</title>
<style>
* {
padding: 100;
margin: 100;
}
canvas {
background: grey;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="700" height="320"></canvas>
<button id="runButton">Start</button>
<button id="exit">Exit</button>
<script src="./script.js"></script>
</body>
</html>

112
script.js Normal file
View File

@@ -0,0 +1,112 @@
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const ballRadius = 10;
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx, dy;
let intervalID;
let paddleHeight = 10;
let paddleWidth = 500;
let paddleX = (canvas.width - paddleWidth) / 2;
let rightPressed = false;
let leftPressed = false;
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
rightPressed = true;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
rightPressed = false;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
leftPressed = false;
}
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(
paddleX,
canvas.height - paddleHeight,
paddleWidth,
paddleHeight
);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}
function checkCollision() {
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
dy = -dy;
}
x += dx;
y += dy;
checkPaddleWallCollission();
}
function checkPaddleWallCollission() {
if (paddleX >= canvas.width - paddleWidth) {
rightPressed = false;
console.log(paddleX);
} else if (paddleX <= 0) {
leftPressed = false;
}
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
drawPaddle();
checkCollision();
if (rightPressed) {
paddleX += 7;
} else if (leftPressed) {
paddleX -= 7;
}
console.log("x: " + x + " " + "y: " + y);
}
function startGame() {
if (intervalID) clearInterval(intervalID);
intervalID = setInterval(draw, 10);
}
const runButton = document.getElementById("runButton");
runButton.addEventListener("click", () => {
dx = 2;
dy = 2;
startGame();
});
const exit = document.getElementById("exit");
exit.addEventListener("click", () => {
clearInterval(intervalID);
dx = 0;
dy = 0;
});