Pong
Instructions
Player vs AI: Use Arrow Keys to control right paddle
Multiplayer: Player 1 uses W/S keys, Player 2 uses Arrow Keys
Local Multiplayer: Connect a gamepad to control paddles
Power-ups: Hit the colored circles for special effects!
- Speed (Gold): Increases ball speed
- Shrink Paddle (Red): Makes paddles smaller
- Reverse Controls (Purple): Reverses player controls
- Invisible Ball (Cyan): Makes ball invisible
- Multiball (Green): Adds extra balls
- Extra Life (Goldenrod): Increases player score
- First Win
- High Score
- Multiball Madness
Code Evolution History
Update at 2025-08-29 13:32:43
The improved Pong game code introduces several new features and enhancements, including power-up stacking, replay functionality, local multiplayer with gamepad support, customizable paddle colors, and custom game modes. Additionally, it adds online multiplayer via WebRTC, dynamic weather effects, power-up cooldowns, game recording, leaderboard sorting, a game timer, tutorial mode, voice announcements, achievements, and player statistics. The UI has been updated with new buttons and controls to support these features, and the CSS provides styling for new elements
Update at 2025-08-28 13:29:03
The improved Pong game code introduces several new features, including dynamic weather effects, background animations, and a power-up history display. Additionally, it enhances gameplay with power-up stacking, replay functionality, local multiplayer with gamepad support, customizable paddle colors, and online multiplayer via WebRTC. The UI now includes controls for game recording, leaderboard sorting, and tutorial mode, alongside new buttons for managing these features.
Update at 2025-08-27 13:28:23
The improved code for the Pong game introduces several new features and enhancements, including power-up history display, power-up stacking, replay functionality, local multiplayer with gamepad support, customizable paddle colors, custom game modes, online multiplayer with WebRTC, dynamic weather effects, power-up cooldown, game recording, leaderboard persistence and sorting, game timer, tutorial mode, voice announcements, achievements, and player statistics. Additionally, it adds the ability to save and load game states, ensuring a more interactive and versatile gaming experience
Update at 2025-08-26 13:30:15
The improved code for the Pong game introduces several new features and enhancements, including power-up history display, power-up stacking, replay functionality, local multiplayer with gamepad support, customizable paddle colors, custom game modes, online multiplayer with WebRTC, dynamic weather effects, power-up cooldowns, game recording, leaderboard persistence and sorting, a game timer, tutorial mode, voice announcements, achievements, and player statistics tracking. These additions significantly enhance the gameplay experience by providing more customization, interaction, and feedback options for
Update at 2025-08-25 13:29:04
The improved code introduces a new feature for tracking and displaying player statistics, including hits and misses for each player. Additionally, the HTML and CSS have been updated to include a new section for displaying these player statistics, enhancing the game's feedback and analytics capabilities.
Update at 2025-08-24 13:25:08
The improved code introduces several new features to the Pong game, including achievements tracking, a display for achievements, and an updated check for achievements within the game logic. The JavaScript code now includes an `achievements` object to track progress, and the HTML and CSS have been updated to display achievements. Additionally, the game logic has been enhanced to unlock achievements based on specific conditions, such as winning a game, achieving a high score, or activating multiball mode.
Update at 2025-08-23 13:24:39
The improved code introduces a new feature for voice announcements, which provides audio feedback for game events such as starting, pausing, resuming, winning, and activating power-ups. Additionally, a toggle button for these voice announcements is added to the HTML interface.
Update at 2025-08-22 13:28:12
The improved code introduces a new "Tutorial Mode" feature that guides players through the game with step-by-step instructions, enhancing the user experience for beginners. Additionally, a new button for starting the tutorial is added to the HTML interface, and corresponding CSS styles for the tutorial display are included.
Update at 2025-08-21 13:29:30
The improved code for the Pong game introduces several new features and enhancements, including power-up history display, power-up stacking, replay functionality, local multiplayer with gamepad support, customizable paddle colors, custom game modes, online multiplayer using WebRTC, dynamic weather effects, power-up cooldowns, game recording capabilities, and leaderboard persistence with sorting. Additionally, the HTML and CSS have been updated to support these features, with new buttons and UI elements for controlling game modes, weather effects, and recording options.
Update at 2025-08-20 13:24:33
The improved code introduces a game timer feature that tracks and displays the elapsed time during gameplay. Additionally, the code ensures that the game timer starts when the game begins and stops when the game is paused or ends. The HTML and CSS were updated to include a new `#gameTimer` element to display the timer on the game interface.
Update at 2025-08-19 13:33:18
The improved code for the Pong game introduces several new features, including a leaderboard sorting functionality, enhanced leaderboard persistence, and a new button in the HTML to sort the leaderboard. Additionally, the JavaScript code has been optimized to handle leaderboard sorting and storage more efficiently, while the CSS remains largely unchanged.
Update at 2025-08-18 13:30:23
The improved code for the Pong game introduces several new features and enhancements, including power-up stacking, replay functionality, local multiplayer with gamepad support, customizable paddle colors, and dynamic weather effects. It also adds online multiplayer capabilities using WebRTC, a power-up history display, and game recording features, while maintaining the existing structure and style of the original code.
Update at 2025-08-17 13:25:06
The improved Pong game code introduces several new features: a game recording functionality with buttons for starting and playing recordings, and the addition of recording logic to save game states at 60 FPS. The CSS and HTML have been updated to accommodate these new recording controls, ensuring a seamless integration with the existing UI.
Update at 2025-08-16 13:24:59
The improved code introduces a new feature to manage power-up cooldowns, preventing continuous activation by implementing a cooldown period of 5 seconds after a power-up is used. Additionally, the JavaScript, CSS, and HTML structures remain largely unchanged, maintaining the existing functionality and layout.
Update at 2025-08-15 13:26:25
The improved code introduces a new feature: dynamic weather effects, including options for rain and snow, which can be toggled via new buttons in the HTML interface. The JavaScript code includes a function to draw these weather effects on the game canvas, enhancing the visual experience.
Update at 2025-08-14 13:28:56
The improved Pong game code introduces several new features, including online multiplayer support using WebRTC, allowing players to connect and play against each other over the internet. Additionally, the code enhances the game's interactivity by adding a power-up history display, customizable paddle colors, and new custom game modes. These changes improve the game's functionality and user experience by offering more gameplay options and connectivity features.
Update at 2025-08-13 13:27:21
The improved Pong game code introduces custom game modes, including "Fast Ball," "Tiny Paddles," and "Giant Ball," which adjust game settings such as ball speed, paddle height, and ball size. Additionally, new HTML elements and event handlers have been added to support these custom modes, allowing players to select and start games with different configurations.
Update at 2025-08-12 13:26:32
The improved code introduces a new feature allowing players to customize their paddle colors via color input elements in the HTML. This feature is supported by additional JavaScript code that updates paddle colors based on user selection.
Update at 2025-08-03 13:32:41
The improved code adds local multiplayer support with gamepad input, allowing players to control paddles using connected game controllers. Additionally, the instructions section has been updated to include guidance for local multiplayer with gamepads.
Update at 2025-08-02 13:24:59
The improved code introduces a replay functionality that allows users to replay past game states, capturing player positions, ball states, and scores. Additionally, a new "Replay" button was added to the HTML interface to activate this feature.
Update at 2025-08-01 13:28:11
The improved code introduces a new feature that allows power-ups to stack, enabling multiple power-ups to be active simultaneously with individual timers. Additionally, the CSS and HTML have been maintained with no significant changes, focusing on ensuring the new functionality is incorporated smoothly into the existing game structure.
Update at 2025-07-31 13:28:25
The improved code introduces a new feature that displays a history of recent power-ups collected during the game, allowing players to see which power-ups have been activated recently. Additionally, the code has been refactored for better organization and readability, but the core functionality and structure remain largely unchanged.
Update at 2025-07-30 13:29:22
The improved code adds several new features to the Pong game, including a power-up history display, a night mode that dims the screen for an immersive experience, and a pause countdown feature. Additionally, the code has been refactored for better organization, with constants and helper functions clearly defined, and some redundant or repetitive code has been streamlined.
Update at 2025-07-29 13:29:05
The improved Pong game code introduces a new feature to pause the game with a countdown timer, allowing players to resume play after a specified duration. Additionally, a "Pause Countdown" button has been added to the HTML for this new functionality. The JavaScript code now includes logic for handling the pause countdown, while the CSS remains unchanged.
Update at 2025-07-28 13:28:33
The improved Pong game code introduces a new "Night Mode" feature that dims the screen for a more immersive experience, alongside the existing dark mode. This feature is accompanied by a new button in the HTML for toggling night mode, and the CSS includes a transition effect for the canvas background color to enhance the visual experience when switching modes.
Update at 2025-07-27 13:23:46
The improved code introduces a new feature that displays a history of recent power-ups used during the game. This feature is implemented by maintaining a `powerUpHistory` array, which stores the last five power-ups, and updating the display with their types and colors. Additionally, the HTML and CSS have been updated to include a dedicated section for showing the power-up history.
Update at 2025-07-26 13:23:08
The improved code introduces a new CSS rule to ensure the chat container fills available space, enhancing the layout's responsiveness. Additionally, the JavaScript code has been refactored for better readability and maintainability, although no new features or significant functionality changes were introduced.
Update at 2025-07-25 13:28:37
The improved code for the Pong game primarily enhances the structure and readability without altering functionality. The changes include organizing functions and variables more clearly, optimizing event listeners, and refining the power-up management logic. Additionally, the CSS and HTML remain unchanged, focusing on maintaining the existing styling and layout.
Update at 2025-07-24 13:28:09
The improved code for the Pong game introduces a feature that highlights recent chat messages, enhances the user experience by adding a dark mode toggle, and optimizes the power-up system with clear visual cues and timers. Additionally, the code now includes functions for adjusting AI difficulty and game speed, improving customizability for players.
Update at 2025-07-23 13:28:09
The improved code for the Pong game primarily involves cleaning up unnecessary console logs and comments, resulting in a more streamlined and readable JavaScript file. The CSS and HTML remain unchanged, indicating that the focus was on optimizing the JavaScript code without altering the visual or structural aspects of the game.
Update at 2025-07-22 13:28:23
The improved code for the Pong game introduced a "Dark Mode" toggle feature, allowing users to switch between light and dark themes. Additionally, the JavaScript code was refactored for better organization, such as moving the dark mode toggle function into the `bindUI` function, and ensuring consistent styling and functionality across the UI elements.
Update at 2025-07-21 13:29:45
The improved code for the Pong game includes a new feature for toggling dark mode, allowing users to switch between light and dark themes. Additionally, the code now highlights recent chat messages to improve visibility and user engagement.
Update at 2025-07-20 13:24:30
The improved code for the Pong game introduces a dark mode toggle feature, allowing users to switch between light and dark themes dynamically. Additionally, the code has been refactored for better organization and readability, including consistent use of functions and event listeners, as well as a more structured handling of game states and UI updates.
Update at 2025-07-19 13:23:23
The improved code introduces a dark mode toggle feature that allows users to switch between light and dark themes for the game's appearance. Additionally, the JavaScript code has been refactored for better organization, and redundant or unnecessary parts have been removed, while the HTML and CSS remain largely unchanged except for the added dark mode functionality.
Update at 2025-07-18 13:27:31
The improved code introduces a new power-up type called "extraLife," which increases the player's score when activated. Additionally, the HTML instructions section is updated to include this new power-up, and the code for handling power-ups is adjusted to incorporate the "extraLife" effect.
Update at 2025-07-17 13:27:56
The improved code introduces a new feature that highlights recent chat messages by adding an animation to messages sent within the last 30 seconds. Additionally, a `chatTimestamps` object is used to store timestamps for chat messages, enabling this highlighting functionality. The CSS has been updated to include a new `recent-message` class with an animation keyframe named `highlight` to achieve the visual effect.
Update at 2025-07-16 13:30:28
The improved code introduces a dark mode toggle feature, allowing users to switch between light and dark themes for the game interface. Additionally, the code optimizes the handling of power-ups by ensuring they are only active when enabled and removes unnecessary comments and console logs for a cleaner codebase.
Update at 2025-07-15 13:29:34
The improved Pong game code introduces a background music feature with a toggle button to play or pause the music. This enhancement is reflected in the JavaScript by adding a background music audio element and a function to handle the toggle, as well as updating the HTML to include a new "Music: Off" button. No CSS changes were made.
Update at 2025-07-14 13:29:16
The improved code introduces a "Dark Mode" toggle feature, allowing users to switch between light and dark themes, which is implemented with a new button and corresponding CSS styles. This enhancement improves user experience by providing a customizable interface option.
Update at 2025-07-13 13:24:25
The improved code for the Pong game primarily focuses on refining the existing functionality without adding new features. The JavaScript code has been streamlined to improve readability and maintainability, with consistent formatting and removal of redundant comments. The CSS and HTML remain mostly unchanged, maintaining the same structure and styling. Overall, the improvements enhance code clarity and organization, making it easier to understand and maintain.
Update at 2025-07-13 03:25:39
The improved code for the Pong game primarily enhances the visual feedback of power-ups by adding a pulsing animation effect, defined in the CSS, which uses a new `--pulse-color` variable for the glow effect. Additionally, the JavaScript and HTML remain largely unchanged, focusing on maintaining existing functionality with minor code cleanups.
Update at 2025-07-12 13:23:47
The improved code introduces an animation effect for power-ups using a "pulse" animation, enhancing the visual feedback when power-ups appear. Additionally, the code refactors and organizes functions for better readability and maintainability, without altering the core functionality or layout of the Pong game.
Update at 2025-07-12 10:20:22
The improved code introduces a new function, `resetPaddlePosition`, to centralize the paddle position reset logic, which improves code maintainability and readability. Additionally, a new CSS animation class, `.pulse`, is added to create a visual effect for power-ups, enhancing the user experience with dynamic visual feedback.
Update at 2025-07-12 07:40:22
The improved code primarily focuses on enhancing the user interface and gameplay experience of the Pong game. It introduces a new animation effect for power-ups using a "pulse" animation, ensuring they are more visually engaging. Additionally, the code refines the chat message styling, differentiating between the user's messages and others', and improves the chat history loading process for better user interaction in the multiplayer mode.
Update at 2025-07-12 01:56:01
The improved code introduces a chat feature for online multiplayer mode using WebSockets, allowing players to send and receive messages during gameplay. This includes new UI elements for the chat input and display, as well as additional JavaScript functions to handle sending and receiving chat messages.
Update at 2025-07-12 01:24:31
The improved code adds an online multiplayer feature using WebSockets, allowing players to join and play games over the internet. This enhancement includes a new button in the HTML for starting online multiplayer games, and the JavaScript code is updated to handle WebSocket connections and messages for synchronizing game state between players.
Update at 2025-07-12 01:19:00
The improved code introduces a power-up animation using CSS keyframes, enhancing the visual feedback for power-ups. Additionally, the JavaScript logic for handling power-ups and ball behavior has been refined, including power-up effects like speed increase, paddle shrinking, and multiball, providing a more dynamic and engaging gameplay experience.
Update at 2025-07-12 11:09:13
After resizing the canvas, keyboard input handlers are reset to avoid lost input events. This ensures that all keys remain responsive after a resize event.
Update at 2025-07-12 11:08:25
The win screen now centers all text based on actual width measurements using canvas measureText. This ensures messages are aligned correctly regardless of canvas size or text length.
Update at 2025-07-12 11:07:41
Paddle positions are now clamped after each update to ensure they remain within the vertical bounds of the canvas, preventing out-of-bounds movement in edge cases.
Update at 2025-07-12 11:07:02
A visual enhancement was added to power-up effects by applying a glowing shadow based on the power-up’s color. This makes active power-ups more noticeable during gameplay.
Update at 2025-07-12 11:06:19
The game no longer spawns new balls after a player has already won. This prevents wasted cycles and visual confusion on the win screen.
Update at 2025-07-12 11:05:44
Power-up collision detection now uses circular hitboxes instead of square overlap logic. This ensures better accuracy when detecting ball contact with the power-up.
Update at 2025-07-12 11:04:27
Fullscreen functionality has been enhanced for compatibility across all browsers and platforms, including iOS Safari and older browsers, by using prefixed fullscreen APIs as fallbacks.
Update at 2025-07-12 11:03:12
The AI paddle no longer attempts to track balls that have left the vertical bounds of the canvas. This avoids unnatural behavior during multiball or invisible ball scenarios.
Update at 2025-07-12 11:02:00
The canvas is now dynamically resized to 90% of the window width and 60% height, ensuring proper display on smaller or mobile screens. An event listener triggers resizing on window changes.
Update at 2025-07-12 00:56:12
The improved code for the Pong game introduces a "pulse" animation for power-ups, enhancing the visual feedback when power-ups are present. Additionally, the code includes better organization and removal of redundant or unused elements, though the core functionality and game logic remain largely unchanged.
Update at 2025-07-12 00:51:29
The improved code introduces a new "pulse" animation for power-ups in the CSS to enhance visual feedback. Additionally, the JavaScript code has been optimized for readability and maintainability, with no significant changes to functionality.
Update at 2025-07-12 00:36:55
The improved code introduces a new feature that allows players to toggle power-ups on and off during the game. It adds a button in the HTML to control this feature and updates the JavaScript to handle the enabling or disabling of power-ups accordingly.
Update at 2025-07-11 13:21:49
The improved code introduces a new fullscreen toggle feature, allowing players to switch between fullscreen and windowed modes by adding a "Toggle Fullscreen" button and implementing the toggleFullscreen function. Additionally, the code now includes an event listener for the fullscreen toggle button, enhancing user experience by offering more control over the game display.
Update at 2025-07-11 13:04:13
The improved code introduces a new feature that allows players to adjust the AI difficulty level through a dropdown menu with options for "easy," "medium," and "hard." This addition is reflected in the HTML with a new select element and in the JavaScript with a new event listener that modifies the AI's speed based on the selected difficulty. The CSS has been updated to style the new dropdown menu consistently with the existing buttons.
Update at 2025-07-11 12:54:41
The improved Pong game code adds a new "Show/Hide Instructions" button that toggles the visibility of game instructions, which are now displayed on the screen. Additionally, a countdown sound effect is introduced to enhance the game experience during countdowns, and the instructions detail the gameplay features such as power-ups and winning conditions.
Update at 2025-07-11 12:34:41
The improved code for the Pong game maintains the same functionality as the original but improves code organization and readability. There are no significant changes in features or functionality across the JavaScript, CSS, or HTML files. The improved code appears to be a direct copy of the original, suggesting that the focus was on maintaining clarity and structure without introducing new features or altering existing functionality.
Update at 2025-07-11 12:31:26
The improved code introduces a background music feature by adding an
Update at 2025-07-11 12:17:46
The improved code introduces a power-up timer display that shows the remaining duration of active power-ups, and enhances the AI difficulty by increasing the AI paddle's responsiveness. Additionally, the CSS and HTML have been updated to include styling and placement for the new power-up timer display.
Update at 2025-07-11 12:14:28
The improved code introduces a new "Multiball" power-up feature, allowing multiple balls to be in play simultaneously. Additionally, the code has been refactored to manage multiple balls effectively, and the CSS has been updated to include a new color for this power-up.
Update at 2025-07-11 12:07:28
The improved code introduces a new "Invisible Ball" power-up that temporarily makes the ball invisible, enhancing gameplay variety. Additionally, the code has been refactored for better organization, and the CSS now includes a color for the new power-up, while the HTML remains largely unchanged, reflecting the new features.
Update at 2025-07-11 12:02:49
The improved Pong game code introduces a new power-up that temporarily reverses player controls, enhancing gameplay complexity. Additionally, the code has been refactored for better readability, and CSS hover effects have been improved to enhance the user interface.
Update at 2025-07-11 11:56:50
The improved code introduces new features such as the ability to adjust game speed with "Increase Speed" and "Decrease Speed" buttons, which dynamically alter the ball and paddle speeds. Additionally, the game now supports saving and displaying high scores using local storage, and includes a feature to display the game's frames per second (FPS) on the canvas.
Update at 2025-07-11 11:53:17
The improved code introduces a new feature that tracks and displays high scores using local storage, allowing the game to save and retrieve the highest scores for both players across sessions. Additionally, the HTML and CSS were updated to include a new section for displaying these high scores.
Update at 2025-07-11 11:22:22
The improvements to the Pong game include the addition of sound effects for hits and wins, a feature to change the game's color theme, and power-up types that can speed up the ball or shrink the paddle. Additionally, a new multiplayer mode has been introduced, and a feature to display the game's FPS (frames per second) on the screen has been added.
Update at 2025-07-11 08:07:16
The improved code introduces a new feature to display the frames per second (FPS) on the screen, enhancing the game's performance monitoring. Additionally, the CSS now includes a new style for the FPS display, positioning it at the top-left corner of the canvas.
Update at 2025-07-11 07:03:29
The improved code introduces a new multiplayer mode allowing two players to control paddles using W/S keys for the left paddle and Up/Down arrows for the right paddle. Additionally, the HTML instructions have been updated to reflect these new controls, while the CSS remains unchanged.
Update at 2025-07-11 06:30:43
The improved JavaScript code introduces a new variable powerUpVisible to manage the visibility of power-ups separately from their activity, ensuring power-ups disappear visually before being deactivated. Additionally, the spawnPowerUp function is updated to reflect this change, enhancing the game's visual feedback when power-ups are collected. The CSS and HTML remain unchanged.
Update at 2025-07-11 06:18:53
The improved code introduces a new power-up type, "shrinkPaddle," which temporarily reduces the paddle height when collected, in addition to the existing speed power-up. It also includes a visual indicator for different power-up types by changing the power-up's color based on its effect, enhancing gameplay dynamics.
Update at 2025-07-11 06:15:00
Implemented a ballSpeedMultiplier to prevent cumulative speed increases. The multiplier is applied to ball speed calculations and reset to 1 at the start of each game, ensuring consistent speed across restarts regardless of power-up activations.
Update at 2025-07-11 06:12:04
The improved code introduces a new feature allowing players to toggle sound effects on and off, with a button labeled "Sound: On/Off" added to the HTML controls. Additionally, the JavaScript logic now checks if sound is enabled before playing any audio effects.
Update at 2025-07-11 06:00:00
Further refined the ball speed reset logic by ensuring ballSpeedY is also reset to INITIAL_BALL_SPEED in resetBall() and startGame() to prevent cumulative speed increases from power-ups across game restarts.
Update at 2025-07-11 05:55:49
The improved code introduces new sound effects for hits and wins, adds a feature to change the game theme with a button, and updates the CSS to use a CSS variable for the theme color. This enhances user experience by providing auditory feedback and visual customization options.
Update at 2025-07-11 05:55:00
Corrected the game speed issue by explicitly resetting ballSpeedX and ballSpeedY to their initial values within the startGame function, ensuring consistent game speed across restarts.
Update at 2025-07-11 05:50:00
Fixed an issue where the game would speed up after each restart by ensuring the ball's speed is reset to its initial value in the resetBall() function.
Update at 2025-07-11 05:45:00
The game now displays a countdown from 5 to 1 on the win screen before restarting in AI vs AI mode.
Update at 2025-07-11 05:40:00
The bounce.mp3 file was moved to assets/audio/ and its path updated in pong.js. The game now starts automatically in AI vs AI mode on page load, and after a win, a 5-second countdown is displayed before the game restarts in AI vs AI mode.
Update at 2025-07-11 05:33:22
The improved code introduces a power-up feature that increases the ball's speed upon collision, and includes a victory screen that displays when a player reaches the winning score. Additionally, the game now has a pause feature that prevents pausing after a game ends, and the code has been refactored for better readability and maintainability.
Update at 2025-07-11 05:29:12
The improved code introduces a new feature that sets a winning score of 5, displays a victory message when a player reaches this score, and prevents the game from being paused after it ends. Additionally, the game now shows a win screen with the winner's name and an invitation to restart the game. No changes were made to the CSS or HTML.
Update at 2025-07-11 05:25:24
The improved Pong game code introduces a new feature. A power-up that appears randomly on the canvas, which, when hit by the ball, increases the ball's speed by 1.5 times. Additionally, the CSS was updated to use specific color codes for button backgrounds instead of CSS variables, ensuring consistent button styling across different themes.
Update at 2025-07-11 05:22:08
The improved code introduces a dynamic update to the game mode display in the HTML by setting the inner text of the gameModeDisplay element to reflect the current game mode when the game starts. No changes were made to the CSS or HTML structure itself.