​

// Generate a random color

function getRandomColor() {

  var letters = '0123456789ABCDEF';

  var color = '#';

  for (var i = 0; i < 6; i++) {

    color += letters[Math.floor(Math.random() * 16)];

  }

  return color;

}

​

// Set the background color of the page with a transition effect

function setRandomColor() {

  var newColor = getRandomColor();

  document.body.style.transition = "background 0.5s ease";

  document.body.style.background = newColor;

}

​

// Set the initial background color

document.body.style.background = getRandomColor();

​

// Create a button and add it to the page

var button = document.createElement("button");

button.innerHTML = "Change Color";

document.body.appendChild(button);

​

// Add a hover effect to the button

button.style.transition = "transform 0.5s ease";

button.addEventListener("mouseover", function() {

  button.style.transform = "scale(1.2)";

});

button.addEventListener("mouseout", function() {

  button.style.transform = "scale(1)";

});

​

// Add a click event listener to the button

button.addEventListener("click", setRandomColor);

​

// Create a canvas element and add it to the page

var canvas = document.createElement("canvas");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

document.body.appendChild(canvas);

​

// Get the 2D context of the canvas

var ctx = canvas.getContext("2d");

​

// Set the initial position and speed of the particle

var posX = 50;

var posY = 50;

var velX = 10;

var velY = 10;

​

// Function to update the position of the particle

function updateParticle() {

  // Check if the particle has reached the edge of the canvas

  if (posX + velX > canvas.width || posX + velX < 0) {

    velX = -velX;

  }

  if (posY + velY > canvas.height || posY + velY < 0) {

    velY = -velY;

  }

​

  // Update the position of the particle

  posX += velX;

  posY += velY;

}

​

// Function to draw the particle on the canvas

function drawParticle() {

  // Clear the canvas

  ctx.clearRect(0, 0, canvas.width, canvas.height);

​

  // Set the fill color of the particle

  ctx.fillStyle = getRandomColor();

​

  // Draw the particle

  ctx.beginPath();

  ctx.arc(posX, posY, 20, 0, 2 * Math.PI);

  ctx.fill();

}

​

// Set an interval to update and draw the particle

setInterval(function() {

  updateParticle();

  drawParticle();

}, 30);

​