Code

// Load previous score from local storage, or initialize to 0 if none exists
var previousScore = localStorage.getItem('dotCount') || 0;
var dotCount = parseInt(previousScore);

//Create canvas
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.id = 'gameCanvas';
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Set up game objects
var player = {
  x: 0,
  y: 0,
  width: 20,
  height: 20,
  speed: 5,
};

var dots = [];

for (var i = 0; i < 20; i++) {
  dots.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    size: 10,
    collected: false,
    color: 'blue', // default color is blue
  });
}

// Add red dots that remove 10 points when player collides with them
for (var i = 0; i < 5; i++) {
  dots.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    size: 10,
    collected: false,
    color: 'red', // color is red
  });
}

// Add green dot that gives 5 points when player collides with it
dots.push({
  x: Math.random() * canvas.width,
  y: Math.random() * canvas.height,
  size: 10,
  collected: false,
  color: 'green', // color is green
});

// Set up keyboard input
var keysDown = {};

addEventListener('keydown', function (event) {
  keysDown[event.keyCode] = true;
});

addEventListener('keyup', function (event) {
  delete keysDown[event.keyCode];
});

// Set up game loop
function update() {
  // Move player
  if (38 in keysDown) {
    // Up arrow
    player.y -= player.speed;
  }
  if (40 in keysDown) {
    // Down arrow
    player.y += player.speed;
  }
  if (37 in keysDown) {
    // Left arrow
    player.x -= player.speed;
  }
  if (39 in keysDown) {
    // Right arrow
    player.x += player.speed;
  }

  // Check if player has gone off the canvas
  if (player.x < 0) {
    player.x = canvas.width; // wrap around to the other side
  } else if (player.x > canvas.width) {
    player.x = 0; // wrap around to the other side
  }
  if (player.y < 0) {
    player.y = canvas.height; // wrap around to the other side
  } else if (player.y > canvas.height) {
    player.y = 0; // wrap around to the other side
  }

  // Check for collision with dots
  for (var i = 0; i < dots.length; i++) {
    var dot = dots[i];
    if (!dot.collected && collides(player, dot)) {
      dot.collected = true;
      if (dot.color === 'red') {
        // if red dot, decrement dot count
        dotCount -= 10;
      } else if (dot.color === 'green') {
        // if green dot, increment dot count by 5
        dotCount += 5;
      } else {
        // otherwise, increment dot count
        dotCount++;
      }

      // Regenerate dot in a new random location
      dot.x = Math.random() * canvas.width;
      dot.y = Math.random() * canvas.height;
      dot.collected = false;
    }
  }
}


// Save score to local storage
localStorage.setItem('dotCount', dotCount);

function render() {
  // Clear canvas
  context.clearRect(0, 0, canvas.width, canvas.height);

  // Draw player
  context.fillStyle = 'red';
  context.fillRect(player.x, player.y, player.width, player.height);

  // Draw dots
  for (var i = 0; i < dots.length; i++) {
    var dot = dots[i];
    if (!dot.collected) {
      context.fillStyle = dot.color;
      context.beginPath();
      context.arc(dot.x, dot.y, dot.size, 0, Math.PI * 2);
      context.fill();
    }
  }

  // Draw dot count
  context.fillStyle = 'black';
  context.font = '16px Arial';
  context.fillText('Dots collected: ' + dotCount, 10, 20);

  // Add red dot
  context.fillStyle = 'red';
  context.beginPath();
  context.arc(canvas.width - 20, 20, 10, 0, 2 * Math.PI);
  context.fill();

  // Add event listener to red dot
  canvas.addEventListener('click', function (event) {
    var dotDistance = Math.sqrt(
      Math.pow(event.clientX - (canvas.width - 20), 2) +
        Math.pow(event.clientY - 20, 2)
    );
    if (dotDistance < 10) {
      dotCount--;
      context.clearRect(0, 0, canvas.width, canvas.height);
      render();
    }
  });
}

function gameLoop() {
  update();
  render();
  requestAnimationFrame(gameLoop);
}

// Helper function for collision detection
function collides(a, b) {
  return (
    a.x < b.x + b.size &&
    a.x + a.width > b.x &&
    a.y < b.y + b.size &&
    a.y + a.height > b.y
  );
}

// Update score in case it was changed in another tab
window.addEventListener('storage', function (event) {
  if (event.key === 'dotCount') {
    dotCount = parseInt(event.newValue);
  }
});

requestAnimationFrame(gameLoop);