Paddle Ball<\/title>\n <style>\n canvas {\n display: block;\n margin: 0 auto;\n background-color: lightgray;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1>\n <canvas id=\"gameCanvas\" width=\"600\" height=\"500\"><\/canvas>\n <script>\n const canvas = document.getElementById('gameCanvas');\n const ctx = canvas.getContext('2d');\n\n let score = 0;\n let paddle = { x: canvas.width \/ 2 - 50, y: canvas.height - 20, width: 50, height: 10 };\n\n let ball = {\n x: canvas.width \/ 2,\n y: canvas.height \/ 2,\n radius: 7,\n dx: 4,\n dy: -4\n };\n\n let target = {\n x: Math.random() * (canvas.width - 50),\n y: Math.random() * (canvas.height \/ 2 - 50),\n radius: 25\n };\n\n function drawPaddle() {\n ctx.fillStyle = 'black';\n ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);\n }\n\n function drawBall() {\n ctx.beginPath();\n ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);\n ctx.fillStyle = 'blue';\n ctx.fill();\n ctx.closePath();\n }\n\n function drawTarget() {\n ctx.beginPath();\n ctx.arc(target.x, target.y, target.radius, 0, Math.PI * 2);\n ctx.fillStyle = 'red';\n ctx.fill();\n ctx.closePath();\n }\n\n function drawScore() {\n ctx.font = '24px Arial';\n ctx.fillStyle = 'black';\n ctx.fillText(`Score: ${score}`, 10, 30);\n }\n\n function gameLoop() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n drawPaddle();\n drawBall();\n drawTarget();\n drawScore();\n\n ball.x += ball.dx;\n ball.y += ball.dy;\n\n if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {\n ball.dx = -ball.dx;\n }\n\n if (ball.y - ball.radius < 0) {\n ball.dy = -ball.dy;\n } else if (\n ball.y + ball.radius > paddle.y &&\n ball.x > paddle.x && ball.x < paddle.x + paddle.width\n ) {\n ball.dy = -ball.dy;\n } else if (ball.y + ball.radius > canvas.height) {\n ball.x = canvas.width \/ 2;\n ball.y = canvas.height \/ 2;\n ball.dy = -ball.dy;\n }\n\n let distance = Math.hypot(ball.x - target.x, ball.y - target.y);\n if (distance < ball.radius + target.radius) {\n score++;\n target.x = Math.random() * (canvas.width - 50);\n target.y = Math.random() * (canvas.height \/ 2 - 50);\n }\n\n requestAnimationFrame(gameLoop);\n }\n\n function movePaddle(e) {\n let mouseX = e.clientX - canvas.getBoundingClientRect().left;\n paddle.x = mouseX - paddle.width \/ 2;\n }\n\n canvas.addEventListener('mousemove', movePaddle);\n\n gameLoop();\n\n\n\nfunction resizeApply() {\n var minWidth = 1200;\n var body = document.getElementsByTagName('body')[0];\n if (window.innerWidth < minWidth) { body.style.zoom = (window.innerWidth \/ minWidth); }\n else body.style.zoom = 1;\n}\n\nwindow.onload = function() {\n window.addEventListener('resize', function() {\n resizeApply();\n });\n}\n\nresizeApply();\n\n\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Paddle Ball<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2243","page","type-page","status-publish","hentry"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/pages\/2243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tippang.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2243"}],"version-history":[{"count":8,"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/pages\/2243\/revisions"}],"predecessor-version":[{"id":2255,"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/pages\/2243\/revisions\/2255"}],"wp:attachment":[{"href":"https:\/\/tippang.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2243,"date":"2023-05-12T02:58:49","date_gmt":"2023-05-11T17:58:49","guid":{"rendered":"https:\/\/tippang.com\/?page_id=2243"},"modified":"2023-05-12T03:09:16","modified_gmt":"2023-05-11T18:09:16","slug":"paddle-ball","status":"publish","type":"page","link":"https:\/\/tippang.com\/?page_id=2243","title":{"rendered":"Paddle Ball"},"content":{"rendered":"\n\n\n\n \n \n Paddle Ball<\/title>\n <style>\n canvas {\n display: block;\n margin: 0 auto;\n background-color: lightgray;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1>\n <canvas id=\"gameCanvas\" width=\"600\" height=\"500\"><\/canvas>\n <script>\n const canvas = document.getElementById('gameCanvas');\n const ctx = canvas.getContext('2d');\n\n let score = 0;\n let paddle = { x: canvas.width \/ 2 - 50, y: canvas.height - 20, width: 50, height: 10 };\n\n let ball = {\n x: canvas.width \/ 2,\n y: canvas.height \/ 2,\n radius: 7,\n dx: 4,\n dy: -4\n };\n\n let target = {\n x: Math.random() * (canvas.width - 50),\n y: Math.random() * (canvas.height \/ 2 - 50),\n radius: 25\n };\n\n function drawPaddle() {\n ctx.fillStyle = 'black';\n ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);\n }\n\n function drawBall() {\n ctx.beginPath();\n ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);\n ctx.fillStyle = 'blue';\n ctx.fill();\n ctx.closePath();\n }\n\n function drawTarget() {\n ctx.beginPath();\n ctx.arc(target.x, target.y, target.radius, 0, Math.PI * 2);\n ctx.fillStyle = 'red';\n ctx.fill();\n ctx.closePath();\n }\n\n function drawScore() {\n ctx.font = '24px Arial';\n ctx.fillStyle = 'black';\n ctx.fillText(`Score: ${score}`, 10, 30);\n }\n\n function gameLoop() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n drawPaddle();\n drawBall();\n drawTarget();\n drawScore();\n\n ball.x += ball.dx;\n ball.y += ball.dy;\n\n if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {\n ball.dx = -ball.dx;\n }\n\n if (ball.y - ball.radius < 0) {\n ball.dy = -ball.dy;\n } else if (\n ball.y + ball.radius > paddle.y &&\n ball.x > paddle.x && ball.x < paddle.x + paddle.width\n ) {\n ball.dy = -ball.dy;\n } else if (ball.y + ball.radius > canvas.height) {\n ball.x = canvas.width \/ 2;\n ball.y = canvas.height \/ 2;\n ball.dy = -ball.dy;\n }\n\n let distance = Math.hypot(ball.x - target.x, ball.y - target.y);\n if (distance < ball.radius + target.radius) {\n score++;\n target.x = Math.random() * (canvas.width - 50);\n target.y = Math.random() * (canvas.height \/ 2 - 50);\n }\n\n requestAnimationFrame(gameLoop);\n }\n\n function movePaddle(e) {\n let mouseX = e.clientX - canvas.getBoundingClientRect().left;\n paddle.x = mouseX - paddle.width \/ 2;\n }\n\n canvas.addEventListener('mousemove', movePaddle);\n\n gameLoop();\n\n\n\nfunction resizeApply() {\n var minWidth = 1200;\n var body = document.getElementsByTagName('body')[0];\n if (window.innerWidth < minWidth) { body.style.zoom = (window.innerWidth \/ minWidth); }\n else body.style.zoom = 1;\n}\n\nwindow.onload = function() {\n window.addEventListener('resize', function() {\n resizeApply();\n });\n}\n\nresizeApply();\n\n\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Paddle Ball<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2243","page","type-page","status-publish","hentry"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/pages\/2243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tippang.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2243"}],"version-history":[{"count":8,"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/pages\/2243\/revisions"}],"predecessor-version":[{"id":2255,"href":"https:\/\/tippang.com\/index.php?rest_route=\/wp\/v2\/pages\/2243\/revisions\/2255"}],"wp:attachment":[{"href":"https:\/\/tippang.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}