<!DOCTYPE html>

<head>

<title>ASCII Pong</title>

<style>

body {

margin: 0;

padding: 20px;

background-color: #1e1e1e;

color: #fff;

font-family: monospace;

text-align: center;

overflow: hidden;

}

canvas {

border: 3px solid #4a90e2;

margin: auto;

display: block;

background-color: black;

}

</style>

</head>

<body>

// Canvas setup

const canvas = document.getElementById("pongCanvas");

const ctx = canvas.getContext("2d");

// Game constants (ASCII art dimensions)

const BALL_SIZE = 10;

const PADDLE_WIDTH = 80; // Width of paddles in pixels on screen, not characters

const PADDLE_HEIGHT = 30;

const PADDLE_SPEED = 7;

let leftPaddleY = canvas.height / 2 - PADDLE_HEIGHT / 2;

let rightPaddleY = canvas.height / 2 - PADDLE_HEIGHT / 2;

let ballX = canvas.width / 2;

let ballY = canvas.height / 2;

let ballSpeedX = 3 * (Math.random() > 0.5 ? 1 : -1);

let ballSpeedY = 3 * (Math.random() > 0.5 ? 1 : -1);

// Key states

const keysPressed = {};

window.addEventListener("keydown", e => {

keysPressed[e.key] = true;

});

window.addEventListener("keyup", e => {

keysPressed[e.key] = false;

});

function drawPaddle(x, y, width, height) {

ctx.fillStyle = "#00ff00";

ctx.fillRect(x - width/2, y, width, height);

// Draw a vertical line to represent the paddle's edge

ctx.strokeStyle = "white";

ctx.beginPath();

ctx.moveTo(x + width / 2, y - height);

ctx.lineTo(x + width / 2, y + height);

ctx.stroke();

}

function drawBall() {

ctx.fillStyle = "#ffffff";

ctx.fillRect(ballX - BALL_SIZE/2, ballY - BALL_SIZE/2, BALL_SIZE, BALL_SIZE);

// Draw a small dot in the center to make it pop

ctx.fillStyle = "white";

ctx.beginPath();

ctx.arc(ballX, ballY, 1.5, 0, Math.PI * 2);

ctx.fill();

}

function drawNet() {

const netHeight = canvas.height;

ctx.strokeStyle = "#808080";

ctx.lineWidth = 3;

ctx.beginPath();

ctx.moveTo(canvas.width / 2 - 15, 0);

ctx.lineTo(canvas.width / 2 - 15, netHeight);

ctx.stroke();

}

function updateBall() {

ballX += ballSpeedX;

ballY += ballSpeedY;

// Wall collisions (top and bottom)

if (ballY <= 0 || ballY >= canvas.height) {

ballSpeedY = -ballSpeedY;

}

// Paddle collision

const paddleLeft = leftPaddleY < ballY && ballX + BALL_SIZE / 2 > canvas.width / 2 - 15;

if (paddleLeft && ballX <= canvas.width / 2) {

ballSpeedX = Math.abs(ballSpeedX);

ballSpeedY += (Math.random() * 0.8) - 0.4;

}

const paddleRight = rightPaddleY < ballY && ballX + BALL_SIZE / 2 > canvas.width / 2;

if (paddleRight && ballX >= canvas.width / 2) {

ballSpeedX = Math.abs(ballSpeedX);

ballSpeedY += (Math.random() * 0.8) - 0.4;

}

// Left paddle movement

if (keysPressed['w']) leftPaddleY -= PADDLE_SPEED;

if (keysPressed['s']) leftPaddleY += PADDLE_SPEED;

// Right paddle movement (using arrow keys)

if (keysPressed['ArrowUp']) rightPaddleY -= PADDLE_SPEED;

if (keysPressed['ArrowDown']) rightPaddleY += PADDLE_SPEED;

// Keep paddles on screen

leftPaddleY = Math.max(0, Math.min(leftPaddleY, canvas.height - PADDLE_HEIGHT));

rightPaddleY = Math.max(0, Math.min(rightPaddleY, canvas.height - PADDLE_HEIGHT));

}

function render() {

// Clear the screen

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawNet();

updateBall();

drawPaddle(canvas.width / 2 - 15, leftPaddleY + 30, PADDLE_WIDTH, PADDLE_HEIGHT);

drawPaddle(canvas.width / 2 - 15, rightPaddleY + 30, PADDLE_WIDTH, PADDLE_HEIGHT);

drawBall();

}

// Game loop

function gameLoop() {

render();

requestAnimationFrame(gameLoop);

}

// Start the game!

gameLoop();

</script>

</body>

</html>