UnknownGans/undefined
0
1 2<b:section id='pong-game' showaddelement='no'>3 <b:widget id='PongGame' locked='true' title='Pong Game' type='HTML'>4 <b:includable id='main'>5 <div class='pong-game-container'>6<head>7 <style>8 /* Paste all the CSS styles here */9 body .pong-game-container {10 font-family: 'Press Start 2P', cursive;11 overflow: hidden;12 background-color: #0f172a;13 }14 /* Rest of the original styles... */15 </style>16 <script src='https://cdn.tailwindcss.com'></script>17 <script src='https://unpkg.com/feather-icons'></script>18<style>19 <b:if cond='data:blog.url == data:blog.homepageUrl'>20 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');21 </b:if>22body {23 font-family: 'Press Start 2P', cursive;24 overflow: hidden;25 background-color: #0f172a;26 }27 .game-container {28 position: relative;29 width: 100vw;30 height: 100vh;31 }32 canvas {33 display: block;34 margin: 0 auto;35 background-color: #1e293b;36 border: 4px solid #334155;37 box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);38 }39 .score {40 position: absolute;41 top: 20px;42 width: 100%;43 text-align: center;44 color: white;45 font-size: 24px;46 text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);47 }48 .controls {49 position: absolute;50 bottom: 30px;51 width: 100%;52 text-align: center;53 color: white;54 }55 .btn {56 background-color: #4f46e5;57 color: white;58 border: none;59 padding: 10px 20px;60 margin: 0 10px;61 border-radius: 5px;62 cursor: pointer;63 font-family: 'Press Start 2P', cursive;64 font-size: 12px;65 transition: all 0.3s;66 }67 .btn:hover {68 background-color: #6366f1;69 transform: translateY(-2px);70 }71 .game-over {72 position: absolute;73 top: 50%;74 left: 50%;75 transform: translate(-50%, -50%);76 background-color: rgba(15, 23, 42, 0.9);77 padding: 30px;78 border-radius: 10px;79 text-align: center;80 color: white;81 display: none;82 border: 4px solid #4f46e5;83 }84 .game-over h2 {85 font-size: 24px;86 margin-bottom: 20px;87 }88 </style>89</head>90 <div class="game-container" style="touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">91<div class="game-container" style="touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">92 <div class="score" style="pointer-events: none;">93<span id="player-score">0</span> - <span id="computer-score">0</span>94 <div class="best-score text-sm text-gray-400 mt-2" style="pointer-events: none;">Best: <span id="best-score">0</span></div>95</div>96<canvas id="gameCanvas" width="800" height="500" style="display: block; margin: 0 auto;"></canvas>97<div class="controls" style="pointer-events: auto;">98<button id="startBtn" class="btn">Start Game</button>99 <button id="resetBtn" class="btn">Reset</button>100 <div class="mt-4">101 <div class="text-sm text-gray-400 mb-2">Difficulty:</div>102 <div class="flex justify-center gap-2">103 <button data-speed="5" data-ai="4" class="difficulty-btn btn">Easy</button>104 <button data-speed="7" data-ai="5" class="difficulty-btn btn active">Normal</button>105 <button data-speed="10" data-ai="6" class="difficulty-btn btn">Hard</button>106 </div>107</div>108 <div class="mt-4 text-sm text-gray-400" style="pointer-events: none;">109Touch <span class="text-white" style="pointer-events: none;">top/bottom</span> or use <span class="text-white" style="pointer-events: none;">↑/↓</span> arrows110</div>111 </div>112<div class="game-over" id="gameOver" style="pointer-events: auto;">113<h2>GAME OVER</h2>114 <p id="finalScore" class="mb-6">Final Score: 0 - 0</p>115 <button id="restartBtn" class="btn">Play Again</button>116 </div>117 </div>118 119 <script>120 document.addEventListener('DOMContentLoaded', () => {121 const canvas = document.getElementById('gameCanvas');122 const ctx = canvas.getContext('2d');123 const playerScoreElement = document.getElementById('player-score');124 const computerScoreElement = document.getElementById('computer-score');125 const startBtn = document.getElementById('startBtn');126 const resetBtn = document.getElementById('resetBtn');127 const gameOverElement = document.getElementById('gameOver');128 const finalScoreElement = document.getElementById('finalScore');129 const restartBtn = document.getElementById('restartBtn');130 // Game variables131 let gameRunning = false;132 let animationId;133 let playerScore = 0;134 let computerScore = 0;135 let bestScore = localStorage.getItem('bestScore') || 0;136 let gameSpeed = 7;137 let ballSpeedIncrease = 0.5;138// Paddle properties139 const paddleWidth = 15;140 const paddleHeight = 100;141 const paddleOffset = 20;142 143 // Ball properties144 const ballSize = 15;145 146 // Player paddle147 let playerPaddle = {148 x: paddleOffset,149 y: canvas.height / 2 - paddleHeight / 2,150 width: paddleWidth,151 height: paddleHeight,152 speed: 8,153 dy: 0154 };155 156 // Computer paddle157 let computerPaddle = {158 x: canvas.width - paddleOffset - paddleWidth,159 y: canvas.height / 2 - paddleHeight / 2,160 width: paddleWidth,161 height: paddleHeight,162 speed: 5,163 dy: 0164 };165 166 // Ball167 let ball = {168 x: canvas.width / 2,169 y: canvas.height / 2,170 size: ballSize,171 dx: gameSpeed,172 dy: gameSpeed173 };174 175 // Draw paddles and ball176 function drawPaddle(x, y, width, height, color = '#4f46e5') {177 ctx.fillStyle = color;178 ctx.fillRect(x, y, width, height);179 ctx.shadowBlur = 10;180 ctx.shadowColor = '#a5b4fc';181 }182 183 function drawBall(x, y, size, color = '#ffffff') {184 ctx.fillStyle = color;185 ctx.beginPath();186 ctx.arc(x, y, size, 0, Math.PI * 2);187 ctx.fill();188 ctx.shadowBlur = 15;189 ctx.shadowColor = '#a5b4fc';190 }191 192 // Draw the net193 function drawNet() {194 ctx.strokeStyle = '#334155';195 ctx.lineWidth = 2;196 ctx.setLineDash([5, 15]);197 ctx.beginPath();198 ctx.moveTo(canvas.width / 2, 0);199 ctx.lineTo(canvas.width / 2, canvas.height);200 ctx.stroke();201 ctx.setLineDash([]);202 }203 204 // Update game state205 function update() {206 // Clear canvas207 ctx.clearRect(0, 0, canvas.width, canvas.height);208 209 // Draw net210 drawNet();211 212 // Draw paddles213 drawPaddle(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height);214 drawPaddle(computerPaddle.x, computerPaddle.y, computerPaddle.width, computerPaddle.height, '#10b981');215 216 // Draw ball217 drawBall(ball.x, ball.y, ball.size);218 219 // Move player paddle220 playerPaddle.y += playerPaddle.dy;221 222 // Prevent player paddle from going off screen223 if (playerPaddle.y < 0) {224 playerPaddle.y = 0;225 } else if (playerPaddle.y + playerPaddle.height > canvas.height) {226 playerPaddle.y = canvas.height - playerPaddle.height;227 }228 229 // Simple AI for computer paddle230 const computerPaddleCenter = computerPaddle.y + computerPaddle.height / 2;231 if (computerPaddleCenter < ball.y - 10) {232 computerPaddle.dy = computerPaddle.speed;233 } else if (computerPaddleCenter > ball.y + 10) {234 computerPaddle.dy = -computerPaddle.speed;235 } else {236 computerPaddle.dy = 0;237 }238 239 // Move computer paddle240 computerPaddle.y += computerPaddle.dy;241 242 // Prevent computer paddle from going off screen243 if (computerPaddle.y < 0) {244 computerPaddle.y = 0;245 } else if (computerPaddle.y + computerPaddle.height > canvas.height) {246 computerPaddle.y = canvas.height - computerPaddle.height;247 }248 249 // Move ball250 ball.x += ball.dx;251 ball.y += ball.dy;252 253 // Ball collision with top and bottom walls254 if (ball.y + ball.size > canvas.height || ball.y - ball.size < 0) {255 ball.dy *= -1;256 }257 258 // Ball collision with paddles259 // Player paddle260 if (261 ball.x - ball.size < playerPaddle.x + playerPaddle.width &&262 ball.y > playerPaddle.y &&263 ball.y < playerPaddle.y + playerPaddle.height264 ) {265 ball.dx = Math.abs(ball.dx) + ballSpeedIncrease;266 // Add some angle based on where the ball hits the paddle267 const hitPosition = (ball.y - (playerPaddle.y + playerPaddle.height / 2)) / (playerPaddle.height / 2);268 ball.dy = hitPosition * 5;269 }270 271 // Computer paddle272 if (273 ball.x + ball.size > computerPaddle.x &&274 ball.y > computerPaddle.y &&275 ball.y < computerPaddle.y + computerPaddle.height276 ) {277 ball.dx = -Math.abs(ball.dx) - ballSpeedIncrease;278 // Add some angle based on where the ball hits the paddle279 const hitPosition = (ball.y - (computerPaddle.y + computerPaddle.height / 2)) / (computerPaddle.height / 2);280 ball.dy = hitPosition * 5;281 }282 283 // Reset ball if it goes out of bounds284 // Player scores285 if (ball.x + ball.size > canvas.width) {286 playerScore++;287 playerScoreElement.textContent = playerScore;288 resetBall();289 }290 291 // Computer scores292 if (ball.x - ball.size < 0) {293 computerScore++;294 computerScoreElement.textContent = computerScore;295 resetBall();296 }297 // Check for game over (first to 5 points)298 if (playerScore === 5 || computerScore === 5) {299 if (playerScore > bestScore) {300 bestScore = playerScore;301 localStorage.setItem('bestScore', bestScore);302 document.getElementById('best-score').textContent = bestScore;303 }304 gameOver();305 }306}307 308 // Reset ball position309 function resetBall() {310 ball.x = canvas.width / 2;311 ball.y = canvas.height / 2;312 // Random direction313 ball.dx = (Math.random() > 0.5 ? 1 : -1) * gameSpeed;314 ball.dy = (Math.random() * 2 - 1) * gameSpeed;315 }316 317 // Game loop318 function gameLoop() {319 if (gameRunning) {320 update();321 animationId = requestAnimationFrame(gameLoop);322 }323 }324 325 // Start game326 function startGame() {327 if (!gameRunning) {328 gameRunning = true;329 startBtn.textContent = 'Pause';330 gameLoop();331 } else {332 gameRunning = false;333 startBtn.textContent = 'Resume';334 cancelAnimationFrame(animationId);335 }336 }337 // Reset game338 function resetGame() {339 gameRunning = false;340 cancelAnimationFrame(animationId);341 playerScore = 0;342 computerScore = 0;343 playerScoreElement.textContent = '0';344 computerScoreElement.textContent = '0';345 document.getElementById('best-score').textContent = bestScore;346 startBtn.textContent = 'Start Game';347 resetBall();348 playerPaddle.y = canvas.height / 2 - paddleHeight / 2;349 computerPaddle.y = canvas.height / 2 - paddleHeight / 2;350 gameOverElement.style.display = 'none';351 }352// Game over353 function gameOver() {354 gameRunning = false;355 cancelAnimationFrame(animationId);356 finalScoreElement.textContent = `Final Score: ${playerScore} - ${computerScore}`;357 gameOverElement.style.display = 'block';358 }359 // Event listeners360 startBtn.addEventListener('click', startGame);361 resetBtn.addEventListener('click', resetGame);362 restartBtn.addEventListener('click', resetGame);363 // Difficulty controls364 document.querySelectorAll('.difficulty-btn').forEach(btn => {365 btn.addEventListener('click', () => {366 document.querySelectorAll('.difficulty-btn').forEach(b => b.classList.remove('active'));367 btn.classList.add('active');368 gameSpeed = parseInt(btn.dataset.speed);369 computerPaddle.speed = parseInt(btn.dataset.ai);370 });371 });372// Touch controls for mobile373 let touchY = 0;374 canvas.addEventListener('touchstart', (e) => {375 e.preventDefault();376 touchY = e.touches[0].clientY;377 });378 379 canvas.addEventListener('touchmove', (e) => {380 e.preventDefault();381 const newTouchY = e.touches[0].clientY;382 const touchDiff = newTouchY - touchY;383 384 if (touchDiff < -5) {385 playerPaddle.dy = -playerPaddle.speed;386 } else if (touchDiff > 5) {387 playerPaddle.dy = playerPaddle.speed;388 }389 390 touchY = newTouchY;391 });392 393 canvas.addEventListener('touchend', () => {394 playerPaddle.dy = 0;395 });396 397 // Keyboard controls398 document.addEventListener('keydown', (e) => {399 if (e.key === 'ArrowUp') {400 playerPaddle.dy = -playerPaddle.speed;401 } else if (e.key === 'ArrowDown') {402 playerPaddle.dy = playerPaddle.speed;403 }404 });405 406 document.addEventListener('keyup', (e) => {407 if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {408 playerPaddle.dy = 0;409 }410 });411// Responsive canvas412 function resizeCanvas() {413 const ratio = 800 / 500;414 let width = window.innerWidth * 0.9;415 let height = width / ratio;416 417 if (height > window.innerHeight * 0.8) {418 height = window.innerHeight * 0.8;419 width = height * ratio;420 }421 422 canvas.width = width;423 canvas.height = height;424 425 // Adjust paddle positions426 playerPaddle.x = paddleOffset;427 playerPaddle.y = canvas.height / 2 - paddleHeight / 2;428 429 computerPaddle.x = canvas.width - paddleOffset - paddleWidth;430 computerPaddle.y = canvas.height / 2 - paddleHeight / 2;431 432 if (!gameRunning) {433 ball.x = canvas.width / 2;434 ball.y = canvas.height / 2;435 }436 }437 438 window.addEventListener('resize', resizeCanvas);439 resizeCanvas();440 // Make buttons more touch-friendly on mobile441 if ('ontouchstart' in window) {442 document.querySelectorAll('.btn').forEach(btn => {443 btn.style.padding = '15px 25px';444 btn.style.fontSize = '14px';445 });446 }447 // Set best score on load448 document.getElementById('best-score').textContent = bestScore;449 // Initial draw450 update();451});452 </script>453 </div>454 <script>455 // Paste all the JavaScript code here456 document.addEventListener('DOMContentLoaded', () => {457 // Original game code...458 });459 feather.replace();460 </script>461 </div>462 </b:includable>463 </b:widget>464</b:section>465