![](https://rabenschatten.de/wp-content/uploads/2024/06/Screenshot-2024-06-15-122526-1.png)
wenn die langeweile aufkommt dann fragt man sich was kann man tun ? Nun ja mir fiel nichts besseres ein als ein PONG spiel in WordPress zu implementieren .
Falls es für jemand nützlich sein sollte dann hier ist der Code denn ich dafür verwendet habe
![](https://rabenschatten.de/wp-content/uploads/2024/06/Screenshot-2024-06-15-122526-1.png)
hier ist auch der Link zu dem spiel 😉
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background: black;
display: block;
margin: 0 auto;
}
#score {
text-align: center;
font-size: 24px;
color: white;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="score">Player: 0 | Bot: 0</div>
<canvas id="pongCanvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('pongCanvas');
const context = canvas.getContext('2d');
const paddleWidth = 10;
const paddleHeight = 100;
const ballRadius = 10;
let paddle1Y = (canvas.height - paddleHeight) / 2;
let paddle2Y = (canvas.height - paddleHeight) / 2;
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 4;
let ballSpeedY = 4;
let playerScore = 0;
let botScore = 0;
function drawPaddle(x, y, width, height) {
context.fillStyle = 'white';
context.fillRect(x, y, width, height);
}
function drawBall(x, y, radius) {
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2);
context.fillStyle = 'white';
context.fill();
context.closePath();
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle(0, paddle1Y, paddleWidth, paddleHeight);
drawPaddle(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight);
drawBall(ballX, ballY, ballRadius);
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballY + ballRadius > canvas.height || ballY - ballRadius < 0) {
ballSpeedY = -ballSpeedY;
}
if (ballX + ballRadius > canvas.width) {
if (ballY > paddle2Y && ballY < paddle2Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
} else {
playerScore++;
updateScore();
resetBall();
}
} else if (ballX - ballRadius < 0) {
if (ballY > paddle1Y && ballY < paddle1Y + paddleHeight) {
ballSpeedX = -ballSpeedX;
} else {
botScore++;
updateScore();
resetBall();
}
}
moveBot();
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
}
function updateScore() {
document.getElementById('score').textContent = `Player: ${playerScore} | Bot: ${botScore}`;
}
function movePaddle(evt) {
const rect = canvas.getBoundingClientRect();
const root = document.documentElement;
const mouseY = evt.clientY - rect.top - root.scrollTop;
if (mouseY - paddleHeight / 2 > 0 && mouseY + paddleHeight / 2 < canvas.height) {
paddle1Y = mouseY - paddleHeight / 2;
}
}
function moveBot() {
if (paddle2Y + paddleHeight / 2 < ballY) {
paddle2Y += 2;
} else {
paddle2Y -= 2;
}
// Ensure the paddle doesn't go out of bounds
if (paddle2Y < 0) {
paddle2Y = 0;
} else if (paddle2Y + paddleHeight > canvas.height) {
paddle2Y = canvas.height - paddleHeight;
}
}
canvas.addEventListener('mousemove', movePaddle);
setInterval(draw, 1000 / 60);
</script>
</body>
</html>
Das ist ein Simpler PONG mit einem Counter und Bot als gegner . Der Bot ist nicht sonderlich schlau gestellt, also sollte es nicht zu viel Herausforderung geben um gegen bot zu spielen .Es gibt allerdings kein endstand oder Win/Lose. Das kann man selbstverständlich auch implementieren ( wenn man es denn möchte 🙂 )