HTML5 Game - Select circle with mouse

Description

Select circle with mouse
Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Interactive Circles</title>

<style>
body {/*from  ww  w  .  j a  va  2 s.  c om*/
  font-family: Verdana;
  font-size: small;
}
canvas {
  cursor: pointer;
  border: 1px solid black;
}

</style>
  <script>
// This function stores the details for a single circle.
function Circle(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;
  this.isSelected = false;
}

// This array hold all the circles on the canvas.
let circles = [];

let canvas;
let context;

window.onload = function() {
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");

  canvas.onmousedown = canvasClick;
};

function addRandomCircle() {
  // Give the circle a random size and position.
  let radius = randomFromTo(10, 60);
  let x = randomFromTo(0, canvas.width);
  let y = randomFromTo(0, canvas.height);

  // Give the circle a random color.
  let colors = ["green", "blue", "red", "yellow", "magenta", "orange", "brown", "purple", "pink"];
  let color = colors[randomFromTo(0, 8)];

  // Create the new circle.
  let circle = new Circle(x, y, radius, color);

  // Store it in the array.
  circles.push(circle);

  // Redraw the canvas.
  drawCircles();
}

function clearCanvas() {
  // Remove all the circles.
  circles = [];

  // Update the display.
  drawCircles();
}


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

  // Go through all the circles.
  for(let i=0; i<circles.length; i++) {
    let circle = circles[i];

    // Draw the circle.
    context.globalAlpha = 0.85;
    context.beginPath();
    context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
    context.fillStyle = circle.color;
    context.strokeStyle = "black";

    if (circle.isSelected) {
      context.lineWidth = 5;
    }
    else {
      context.lineWidth = 1;
    }
    context.fill();
    context.stroke(); 
  }
}

let previousSelectedCircle;

function canvasClick(e) {
  // Get the canvas click coordinates.
  let clickX = e.pageX - canvas.offsetLeft;
  let clickY = e.pageY - canvas.offsetTop;

  // Look for the clicked circle.
  for(let i=circles.length-1; i>=0; i--) {
    let circle = circles[i];

    let distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2))
    if (distanceFromCenter <= circle.radius) {
      if (previousSelectedCircle != null) previousSelectedCircle.isSelected = false;
      previousSelectedCircle = circle;

      circle.isSelected = true;

      drawCircles();
      return;
    }
  }
}

function randomFromTo(from, to) {
  return Math.floor(Math.random() * (to - from + 1) + from);
}
    
    </script
</head>  

<body>

  <canvas id="canvas" width="400" height="300">
  </canvas>

  <div>
    <button onclick="addRandomCircle()">Add Circle</button>
    <button onclick="clearCanvas()">Clear Canvas</button>
  </div>
 

</body>
</html>
HTML5 Game - Select circle with mouse

Description

Demo

Related Topic
