Mystery Game #5
← Back to Games List
// Pong Implementation
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Game objects
const leftPaddle = {
x: 20,
y: canvas.height / 2 - 50,
width: 10,
height: 100,
speed: 8,
score: 0
};
const rightPaddle = {
x: canvas.width - 30,
y: canvas.height / 2 - 50,
width: 10,
height: 100,
speed: 8,
score: 0
};
const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 8,
speed: 7,
dx: 7,
dy: 0
};
// Controls
let upPressed = false;
let downPressed = false;
let wPressed = false;
let sPressed = false;
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowUp') upPressed = true;
if (e.key === 'ArrowDown') downPressed = true;
if (e.key === 'w') wPressed = true;
if (e.key === 's') sPressed = true;
});
document.addEventListener('keyup', (e) => {
if (e.key === 'ArrowUp') upPressed = false;
if (e.key === 'ArrowDown') downPressed = false;
if (e.key === 'w') wPressed = false;
if (e.key === 's') sPressed = false;
});
function movePaddles() {
// Left paddle (W/S keys)
if (wPressed && leftPaddle.y > 0) {
leftPaddle.y -= leftPaddle.speed;
}
if (sPressed && leftPaddle.y < canvas.height - leftPaddle.height) {
leftPaddle.y += leftPaddle.speed;
}
// Right paddle (Up/Down arrows)
if (upPressed && rightPaddle.y > 0) {
rightPaddle.y -= rightPaddle.speed;
}
if (downPressed && rightPaddle.y < canvas.height - rightPaddle.height) {
rightPaddle.y += rightPaddle.speed;
}
}
function moveBall() {
ball.x += ball.dx;
ball.y += ball.dy;
// Top and bottom collisions
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.dy *= -1;
}
// Paddle collisions
if (ball.dx < 0 &&
ball.x - ball.radius < leftPaddle.x + leftPaddle.width &&
ball.y > leftPaddle.y &&
ball.y < leftPaddle.y + leftPaddle.height) {
ball.dx *= -1;
let relativeIntersectY = (leftPaddle.y + (leftPaddle.height/2)) - ball.y;
let normalizedIntersectY = relativeIntersectY / (leftPaddle.height/2);
ball.dy = -normalizedIntersectY * ball.speed;
}
if (ball.dx > 0 &&
ball.x + ball.radius > rightPaddle.x &&
ball.y > rightPaddle.y &&
ball.y < rightPaddle.y + rightPaddle.height) {
ball.dx *= -1;
let relativeIntersectY = (rightPaddle.y + (rightPaddle.height/2)) - ball.y;
let normalizedIntersectY = relativeIntersectY / (rightPaddle.height/2);
ball.dy = -normalizedIntersectY * ball.speed;
}
// Score points
if (ball.x + ball.radius > canvas.width) {
leftPaddle.score++;
resetBall(-1);
}
if (ball.x - ball.radius < 0) {
rightPaddle.score++;
resetBall(1);
}
}
function resetBall(direction) {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dy = 0;
ball.dx = ball.speed * direction;
}
function draw() {
// Clear canvas
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw center line
ctx.strokeStyle = 'white';
ctx.setLineDash([5, 15]);
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.stroke();
ctx.setLineDash([]);
// Draw paddles
ctx.fillStyle = 'white';
ctx.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
ctx.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);
// Draw ball
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
// Draw scores
ctx.font = '32px Arial';
ctx.fillText(leftPaddle.score, canvas.width/4, 50);
ctx.fillText(rightPaddle.score, 3*canvas.width/4, 50);
}
function gameLoop() {
movePaddles();
moveBall();
draw();
requestAnimationFrame(gameLoop);
}
// Start the game
gameLoop();
# Pong Implementation
import pygame
from dataclasses import dataclass
from typing import Tuple
@dataclass
class Paddle:
x: float
y: float
width: int = 10
height: int = 100
speed: int = 8
score: int = 0
@dataclass
class Ball:
x: float
y: float
radius: int = 8
speed: float = 7
dx: float = 7
dy: float = 0
class PongGame:
def __init__(self):
pygame.init()
self.width = 800
self.height = 600
self.screen = pygame.display.set_mode((self.width, self.height))
pygame.display.set_caption('Pong')
# Create game objects
self.left_paddle = Paddle(20, self.height/2 - 50)
self.right_paddle = Paddle(self.width - 30, self.height/2 - 50)
self.ball = Ball(self.width/2, self.height/2)
self.clock = pygame.time.Clock()
# Create dashed line surface
self.center_line = pygame.Surface((2, self.height))
self.center_line.fill((255, 255, 255))
for y in range(0, self.height, 20):
pygame.draw.rect(self.center_line, (0, 0, 0),
(0, y, 2, 10))
def handle_input(self) -> bool:
for event in pygame.event.get():
if event.type == pygame.QUIT:
return False
keys = pygame.key.get_pressed()
# Left paddle (W/S keys)
if keys[pygame.K_w] and self.left_paddle.y > 0:
self.left_paddle.y -= self.left_paddle.speed
if (keys[pygame.K_s] and
self.left_paddle.y < self.height - self.left_paddle.height):
self.left_paddle.y += self.left_paddle.speed
# Right paddle (Up/Down arrows)
if keys[pygame.K_UP] and self.right_paddle.y > 0:
self.right_paddle.y -= self.right_paddle.speed
if (keys[pygame.K_DOWN] and
self.right_paddle.y < self.height - self.right_paddle.height):
self.right_paddle.y += self.right_paddle.speed
return True
def move_ball(self):
self.ball.x += self.ball.dx
self.ball.y += self.ball.dy
# Top and bottom collisions
if (self.ball.y + self.ball.radius > self.height or
self.ball.y - self.ball.radius < 0):
self.ball.dy *= -1
# Paddle collisions
if (self.ball.dx < 0 and
self.ball.x - self.ball.radius <
self.left_paddle.x + self.left_paddle.width and
self.ball.y > self.left_paddle.y and
self.ball.y < self.left_paddle.y + self.left_paddle.height):
self.ball.dx *= -1
relative_intersect_y = ((self.left_paddle.y +
self.left_paddle.height/2) - self.ball.y)
normalized_intersect_y = (relative_intersect_y /
(self.left_paddle.height/2))
self.ball.dy = -normalized_intersect_y * self.ball.speed
if (self.ball.dx > 0 and
self.ball.x + self.ball.radius > self.right_paddle.x and
self.ball.y > self.right_paddle.y and
self.ball.y < self.right_paddle.y + self.right_paddle.height):
self.ball.dx *= -1
relative_intersect_y = ((self.right_paddle.y +
self.right_paddle.height/2) - self.ball.y)
normalized_intersect_y = (relative_intersect_y /
(self.right_paddle.height/2))
self.ball.dy = -normalized_intersect_y * self.ball.speed
# Score points
if self.ball.x + self.ball.radius > self.width:
self.left_paddle.score += 1
self.reset_ball(-1)
if self.ball.x - self.ball.radius < 0:
self.right_paddle.score += 1
self.reset_ball(1)
def reset_ball(self, direction: int):
self.ball.x = self.width / 2
self.ball.y = self.height / 2
self.ball.dy = 0
self.ball.dx = self.ball.speed * direction
def draw(self):
# Clear screen
self.screen.fill((0, 0, 0))
# Draw center line
self.screen.blit(self.center_line,
(self.width/2 - 1, 0))
# Draw paddles
pygame.draw.rect(self.screen, (255, 255, 255),
(self.left_paddle.x, self.left_paddle.y,
self.left_paddle.width, self.left_paddle.height))
pygame.draw.rect(self.screen, (255, 255, 255),
(self.right_paddle.x, self.right_paddle.y,
self.right_paddle.width, self.right_paddle.height))
# Draw ball
pygame.draw.circle(self.screen, (255, 255, 255),
(int(self.ball.x), int(self.ball.y)),
self.ball.radius)
# Draw scores
font = pygame.font.Font(None, 48)
left_score = font.render(
str(self.left_paddle.score), True, (255, 255, 255))
right_score = font.render(
str(self.right_paddle.score), True, (255, 255, 255))
self.screen.blit(left_score, (self.width/4, 50))
self.screen.blit(right_score, (3*self.width/4, 50))
pygame.display.flip()
def run(self):
while True:
if not self.handle_input():
break
self.move_ball()
self.draw()
self.clock.tick(60)
pygame.quit()
if __name__ == '__main__':
game = PongGame()
game.run()
Play Game