Pallini Adriano

by beatricevivaldi

HTML

<canvas id="schermo" width="500" height="400"></canvas>

JavaScript

(function () {
    "use strict";
    var canvas = null;
    var context = null;
    var griglia =[];
    var diametro = 0;
    var raggio = 0;
    var width = 0, height = 0, count = 0;
    var int = null;
    var Cella = function () {
        this.occupata = false;
    };
    var creaGriglia = function () {
        for (var x = 0; x < width; x++) {
            griglia[x] = [];
            for (var y = 0; y < height; y++) {
                griglia[x][y] = new Cella();
            }
        }
    };
    var disegnaCerchio = function () {
        var x, y;
        do {
            x = Math.floor(Math.random() * width);
            y = Math.floor(Math.random() * height);
        } while (griglia[x][y].occupata);
        var temp = griglia[x][y];
        temp.occupata = true;
        context.beginPath();
        context.fillStyle = "rgba(0, 0, 140, .5)";
        context.arc(x * diametro + raggio, y * diametro + raggio, raggio, 0, 2 * Math.PI);
        context.fill();
        count--;
        if (count === 0) {
            clearInterval(int);
        }
    };
    var disegna = function () {
        int = setInterval(disegnaCerchio, 500);
    };
    var main = function () {
        canvas = document.getElementById('schermo');
        context = canvas.getContext('2d');
        diametro = 15;
        raggio = Math.floor(diametro / 2);
        width = Math.floor(canvas.width / diametro);
        height = Math.floor(canvas.height / diametro);
        count = 20;
        creaGriglia();
        disegna();
    };
    main();
}());