const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const paddleWidth = 80; const paddleHeight = 10; const paddleSpeed = 8; const ballRadius = 5; const ballSpeed = 3; const blockWidth = 40; const blockHeight = 10; const blockRowCount = 5; const blockColumnCount = 10; const blockPadding = 5; const blockOffsetTop = 30; const blockOffsetLeft = 30; let paddleX = (canvas.width - paddleWidth) / 2; let ballX = canvas.width / 2; let ballY = canvas.height - 30; let ballDX = ballSpeed; let ballDY = -ballSpeed; let rightPressed = false; let leftPressed = false; let blocks = []; for (let c = 0; c < blockColumnCount; c++) { blocks[c] = []; for (let r = 0; r < blockRowCount; r++) { blocks[c][r] = { x: 0, y: 0, status: 1 }; } } document.addEventListener('keydown', keyDownHandler); document.addEventListener('keyup', keyUpHandler); function keyDownHandler(event) { if (event.key === 'ArrowRight') { rightPressed = true; } else if (event.key === 'ArrowLeft') { leftPressed = true; } } function keyUpHandler(event) { if (event.key === 'ArrowRight') { rightPressed = false; } else if (event.key === 'ArrowLeft') { leftPressed = false; } } function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = '#0095DD'; ctx.fill(); ctx.closePath(); } function drawBall() { ctx.beginPath(); ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2); ctx.fillStyle = '#0095DD'; ctx.fill(); ctx.closePath(); } function drawBlocks() { for (let c = 0; c < blockColumnCount; c++) { for (let r = 0; r < blockRowCount; r++) { if (blocks[c][r].status === 1) { const blockX = c * (blockWidth + blockPadding) + blockOffsetLeft; const blockY = r * (blockHeight + blockPadding) + blockOffsetTop; blocks[c][r].x = blockX; blocks[c][r].y = blockY; ctx.beginPath(); ctx.rect(blockX, blockY, blockWidth, blockHeight); ctx.fillStyle = '#0095DD'; ctx.fill(); ctx.closePath(); } } } } function collisionDetection() { for (let c = 0; c < blockColumnCount; c++) { for (let r = 0; r < blockRowCount; r++) { const block = blocks[c][r]; if (block.status === 1) { if ( ballX > block.x && ballX < block.x + blockWidth && ballY > block.y && ballY < block.y + blockHeight ) { ballDY = -ballDY; block.status = 0; } } } } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawPaddle(); drawBall(); drawBlocks(); collisionDetection(); if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) { ballDX = -ballDX; } if (ballY + ballDY < ballRadius) { ballDY = -ballDY; } else if (ballY + ballDY > canvas.height - ballRadius) { if (ballX > paddleX && ballX < paddleX + paddleWidth) { ballDY = -ballDY; } else { // Game over document.location.reload(); } } if (rightPressed && paddleX < canvas.width - paddleWidth) { paddleX += paddleSpeed; } else if (leftPressed && paddleX > 0) { paddleX -= paddleSpeed; } ballX += ballDX; ballY += ballDY; requestAnimationFrame(draw); } draw();

GPTgame

Sign up for free tokens!

Ping pong 2d, break blocks, wall around, ai Player

GPTgame