Untitled

// globale Variablen
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 5;
let ballSpeedY = 5;

// Schleife zum Zeichnen des Spiels
function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height); // canvas löschen
	
	// Ball zeichnen
	ctx.beginPath();
	ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
	ctx.fillStyle = '#000';
	ctx.fill();
	ctx.closePath();
	
	// Ballbewegung
	ballX += ballSpeedX;
	ballY += ballSpeedY;
	
	// Kollision mit den Wänden
	if (ballX < 0 || ballX > canvas.width) {
		ballSpeedX = -ballSpeedX;
	}
	if (ballY < 0 || ballY > canvas.height) {
		ballSpeedY = -ballSpeedY;
	}
	
	requestAnimationFrame(draw); // nächstes Frame anfordern
}

draw(); // das Spiel starten