Skip to content

Instantly share code, notes, and snippets.

@OSCUK
Last active August 6, 2024 16:09
Show Gist options
  • Save OSCUK/1872024cf0e6e48bdb5c0479edfe5f75 to your computer and use it in GitHub Desktop.
Save OSCUK/1872024cf0e6e48bdb5c0479edfe5f75 to your computer and use it in GitHub Desktop.
Pong-OSCUK
<!DOCTYTPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
<div id="scoreboard">
<div id="playerScore">Player: 0</div>
<div id="computerScore">Computer: 0</div>
</div>
<canvas id="pongCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>
const canvas = document.getElementById('pongCanvas');
const context = canvas.getContext('2d');
let playerScoreElement = document.getElementById('playerScore');
let computerScoreElement = document.getElementById('computerScore');
let playerScore = 0;
let computerScore = 0;
let paddleWidth, paddleHeight, ballSize;
let player, computer, ball;
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 60; // 60px for scoreboard height
paddleWidth = 10;
paddleHeight = canvas.height / 6;
ballSize = canvas.height / 40;
player = { x: 0, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, dy: 0 };
computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight, dy: 0 };
ball = { x: canvas.width / 2, y: canvas.height / 2, size: ballSize, dx: ballSpeed(), dy: ballSpeed() };
}
function ballSpeed() {
return canvas.width / 200;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Draw the game elements
function drawRect(x, y, w, h, color) {
context.fillStyle = color;
context.fillRect(x, y, w, h);
}
function drawBall(x, y, size, color) {
context.fillStyle = color;
context.beginPath();
context.arc(x, y, size, 0, Math.PI * 2);
context.closePath();
context.fill();
}
// Move the paddles
function movePaddle(paddle) {
paddle.y += paddle.dy;
if (paddle.y < 0) paddle.y = 0;
if (paddle.y + paddle.height > canvas.height) paddle.y = canvas.height - paddle.height;
}
// Move the ball
function moveBall() {
ball.x += ball.dx;
ball.y += ball.dy;
// Ball collision with top and bottom walls
if (ball.y + ball.size > canvas.height || ball.y - ball.size < 0) {
ball.dy *= -1;
}
// Ball collision with paddles
let playerHit = ball.x - ball.size < player.x + player.width && ball.y > player.y && ball.y < player.y + player.height;
let computerHit = ball.x + ball.size > computer.x && ball.y > computer.y && ball.y < computer.y + computer.height;
if (playerHit || computerHit) {
ball.dx *= -1;
}
// Ball goes out of bounds
if (ball.x - ball.size < 0) {
computerScore++;
updateScore();
resetBall();
}
if (ball.x + ball.size > canvas.width) {
playerScore++;
updateScore();
resetBall();
}
}
// Reset the ball to the center
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx *= -1;
}
// Update the score display
function updateScore() {
playerScoreElement.textContent = `Player: ${playerScore}`;
computerScoreElement.textContent = `Computer: ${computerScore}`;
}
// Update game elements
function update() {
movePaddle(player);
movePaddle(computer);
moveBall();
computerAI();
}
// Computer AI to move the paddle
function computerAI() {
if (ball.y < computer.y + computer.height / 2) {
computer.dy = -ballSpeed();
} else {
computer.dy = ballSpeed();
}
movePaddle(computer);
}
// Draw everything on the canvas
function draw() {
drawRect(0, 0, canvas.width, canvas.height, '#000'); // Clear the canvas
drawRect(player.x, player.y, player.width, player.height, '#fff'); // Player paddle
drawRect(computer.x, computer.y, computer.width, computer.height, '#fff'); // Computer paddle
drawBall(ball.x, ball.y, ball.size, '#fff'); // Ball
}
// Game loop
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// Control player paddle with mouse
canvas.addEventListener('mousemove', (e) => {
let canvasRect = canvas.getBoundingClientRect();
player.y = e.clientY - canvasRect.top - player.height / 2;
});
// Start the game
loop();
@font-face {
font-family: 'BitFont';
src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
}
body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
background: #000;
color: #fff;
font-family: Arial, sans-serif;
}
#scoreboard {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 800px;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 20px;
box-sizing: border-box;
}
#playerScore, #computerScore {
font-size: 28px; /* Adjust the font size as desired */
font-family: 'BitFont', sans-serif; /* Apply the custom bitmap font */
}
#pongCanvas {
background: #000;
border: 1px solid #fff;
width: 95vw;
height: calc(95vh - 60px); /* 60px for scoreboard height */
}
@OSCUK
Copy link
Author

OSCUK commented Aug 6, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment