Last active
August 6, 2024 16:09
-
-
Save OSCUK/1872024cf0e6e48bdb5c0479edfe5f75 to your computer and use it in GitHub Desktop.
Pong-OSCUK
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
link for the font!!
https://fonts.google.com/specimen/Press+Start+2P