// ==UserScript==
// @name Random Bouncing Ball
// @namespace https://openai.com/
// @version 1.0.0
// @description Creates a ball that bounces randomly between the borders of the screen, and changes direction and speed when clicked by the user
// @author OpenAI
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
// Create the ball element
var ball = document.createElement('div');
ball.style.cssText = 'position: fixed; top: 50%; left: 50%; width: 50px; height: 50px; background-color: #333; border-radius: 25px;';
// Create the left eye element
var eyeLeft = document.createElement('div');
eyeLeft.style.cssText = 'position: absolute; top: 10px; left: 10px; width: 10px; height: 10px; background-color: white; border-radius: 5px; animation: googly-eye 1s infinite;';
// Create the right eye element
var eyeRight = document.createElement('div');
eyeRight.style.cssText = 'position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; background-color: white; border-radius: 5px; animation: googly-eye 1s infinite;';
// Append the eye elements to the ball element
ball.appendChild(eyeLeft);
ball.appendChild(eyeRight);
// Add the ball to the document body
document.body.appendChild(ball);
// Define the googly-eye animation
var style = document.createElement('style');
style.innerHTML = '@keyframes googly-eye { 0% { transform: translate(0, 0); } 50% { transform: translate(-5px, -5px); } 100% { transform: translate(0, 0); } }';
document.body.appendChild(style);
// Add an event listener to the ball that changes its direction and speed when clicked
ball.addEventListener('click', function() {
// Generate a random x and y direction
var x = Math.random() < 0.5 ? -1 : 1;
var y = Math.random() < 0.5 ? -1 : 1;
// Generate a random speed
var speed = Math.random() * 3;
// Set the ball's new direction and speed
ball.direction = {x: x, y: y};
ball.speed = speed;
// Generate a random color
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
ball.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
});
// Set the ball's initial direction and speed
ball.direction = {x: 1, y: 1};
ball.speed = 1.5;
// Add the ball to the document body
document.body.appendChild(ball);
// Create a function that updates the ball's position
function update() {
// Get the ball's current position
var pos = ball.getBoundingClientRect();
// Generate a random number between 0 and 1
var r = Math.random();
// Check if the ball should change direction
if (r < 0.01) {
// Generate a new random x and y direction
ball.direction.x = Math.random();
ball.direction.y = Math.random();
ball.speed = Math.random() * 8;
}
// Calculate the ball's new position
var newTop = pos.top + ball.direction.y * ball.speed;
var newLeft = pos.left + ball.direction.x * ball.speed;
// Check if the ball has reached the edge of the screen
if (newTop < 0 || newTop + pos.height > window.innerHeight) {
// Reverse the ball's y direction
ball.direction.y *= -1;
// Generate a random color for the ball
var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
ball.style.backgroundColor = color;
// Add a random y direction
}
if (newLeft < 0 || newLeft + pos.width > window.innerWidth) {
// Reverse the ball's x direction
ball.direction.x *= -1;
// Generate a random color for the ball
var colortwo = '#' + Math.floor(Math.random() * 16777215).toString(16);
ball.style.backgroundColor = colortwo;
// Add a random x direction
}
// Set the ball's new position
ball.style.top = newTop + 'px';
ball.style.left = newLeft + 'px';
// Schedule the next update
requestAnimationFrame(update);
}
// Start the update loop
requestAnimationFrame(update);
})();
