rifler/index.html

## index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="index.js"></script>
    <style type="text/css">
        #canvas
        {
            border: 1px solid black;
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <canvas id="canvas">
        Этот браузер не поддерживает элемент canvas
    </canvas>

    <input type="button" id="start" value="Старт" />
    <input type="button" id="pause" value="Пауза" />
    <input type="button" id="stop" value="Стоп" />
</body>
</html>

## index.js
// Возвращает объект мячика с заданными опциями
// Метод nextStep прибавляет к текущей позиции мячика его смещение
// Метод update позволяет обновить настройки мячика
function Ball(options) {
    options = options || {};
    this.update = function (options) {
        this.radius = options.radius || this.radius || 10; // радиус
        this.x = options.x || this.x || this.radius; // позиция по x
        this.y = options.y || this.y || -this.radius; // позиция по y
        this.dx = options.dx || 0; // смещение по x
        this.dy = options.dy || 5; // смещение по y
        this.strokeColor = options.strokeColor || "black"; // цвет границы
        this.fillColor = options.fillColor || "red"; // цвет заполнения
    }

    this.nextStep = function () {
        this.x += this.dx;
        this.y += this.dy;
    }

    this.update(options);
}

// Поддерживается ли canvas в этом браузере?
function isCanvasSupported() {
    var canvas = document.createElement('canvas');

    return !!(canvas.getContext && canvas.getContext('2d'));
}

window.onload = function () {
    // Поддерживается ли canvas?
    if (!isCanvasSupported()) {
        // если нет, то ничего не делаем
        return false;
    }

    // Глобальные переменные
    canvas = document.getElementById('canvas'); // html-элемент canvas, где будем рисовать
    canvas.width = canvas.clientWidth; // Устанавливаем ширину канваса
    canvas.height = canvas.clientHeight; // Высоту
    context = canvas.getContext('2d'); // его контекст
    balls = []; // Массив с кругами

    init();
}

function init() {
    var COUNT_BALLS = 25; // количество мячиков

    generateBalls(COUNT_BALLS); // генерируем мячики

    // Начинаем рисовать
    // Функция drawFrame будет вызываться раз в 40 миллисекунд
    // Про setInterval почитать тут - http://javascript.ru/setInterval
    interval = setInterval(drawFrame, 40);

    // Клик по кнопке старт
    document.getElementById('start').onclick = function () {
        if (!interval) {
            interval = setInterval(drawFrame, 40);
        }
    }

    // Клик по кнопке пауза
    document.getElementById('pause').onclick = function () {
        // Останавливаем таймер
        clearInterval(interval);
        interval = null;
    }

    // Клик по кнопке стоп
    document.getElementById('stop').onclick = function () {
        var i;

        // Останавливаем таймер
        clearInterval(interval);
        interval = null;

        // Очищаем канвас
        context.clearRect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);

        // Все мячики уносим вверх, за границу канваса
        // и генерируем им новые настройки (радиус, положение, ускорение), чтобы казалось, что это новые мячики
        for (i = 0; i < balls.length; i++) {
            balls[i].update(generateRandomOptions());
        }
    }
}

// Генерирует рандомные настройки для одного мячика
// радиус, позиции по х и у, ускорение, цвет и тд
function generateRandomOptions () {
    var radius = Math.floor(Math.random() * (30 - 11)) + 10, // радиус, случайное целое число от 10 до 30
        x = Math.floor(Math.random() * (canvas.clientWidth - radius - radius + 1)) + radius; // Случайное число от radius до canvas.width - radius, чобы мячик не залезал за границы канвы

    return {
        radius: radius,
        x: x,
        y: -100, // сначала мяч находится за верхней границей канвы и его не видно, потом он начинает падать
        dy: Math.floor(Math.random() * (10 - 4)) + 3, // ускорение по y - от 3 до 10
        strokeColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6), // случайный цвет границы мячика
        fillColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6) // случайный цвет заполнения мячика
    };
}

// Генерирует countBalls мячиков
// Заносит их в массив balls
function generateBalls (countBalls) {
    var i;

    for (i = 0; i < countBalls; i++) {
        balls.push(new Ball(generateRandomOptions()));
    }
}

// Функция рисует мячики
// Очищает канву и рисует мячики в новых положениях
// При многократном вызове создается впечатление анимации
function drawFrame () {
    var i;

    // Очищаем канву
    //context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
    context.clearRect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);

    // Бежим по массиву с мячиками
    for (i = 0; i < balls.length; i++) {
        // nextStep прибавляет к x-позиции мячика его смещение (dx)
        // Поэтому кажется, что мяч движется
        balls[i].nextStep();

        // Рисуем мячик
        // Почитать - http://www.w3schools.com/tags/canvas_arc.asp
        context.beginPath();
        context.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI*2);
        context.lineWidth = 1;
        context.fillStyle = balls[i].fillColor;
        context.fill();
        context.stroke();

        // Если мяч улетел за нижнюю границу, то обновляем его настройки, чтобы казалось, что это новый мячик
        // При обновлении настроек он переносится вверх (за верхнюю границу канвы) и начинает опять падать
        if (balls[i].y - balls[i].radius > canvas.clientHeight) {
            balls[i].update(generateRandomOptions());
        }
    }
}

	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="index.js"></script>
	<style type="text/css">
	#canvas
	{
	border: 1px solid black;
	width: 100%;
	height: 400px;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas">
	Этот браузер не поддерживает элемент canvas
	</canvas>

	<input type="button" id="start" value="Старт" />
	<input type="button" id="pause" value="Пауза" />
	<input type="button" id="stop" value="Стоп" />
	</body>
	</html>
	// Возвращает объект мячика с заданными опциями
	// Метод nextStep прибавляет к текущей позиции мячика его смещение
	// Метод update позволяет обновить настройки мячика
	function Ball(options) {
	options = options \|\| {};
	this.update = function (options) {
	this.radius = options.radius \|\| this.radius \|\| 10; // радиус
	this.x = options.x \|\| this.x \|\| this.radius; // позиция по x
	this.y = options.y \|\| this.y \|\| -this.radius; // позиция по y
	this.dx = options.dx \|\| 0; // смещение по x
	this.dy = options.dy \|\| 5; // смещение по y
	this.strokeColor = options.strokeColor \|\| "black"; // цвет границы
	this.fillColor = options.fillColor \|\| "red"; // цвет заполнения
	}

	this.nextStep = function () {
	this.x += this.dx;
	this.y += this.dy;
	}

	this.update(options);
	}

	// Поддерживается ли canvas в этом браузере?
	function isCanvasSupported() {
	var canvas = document.createElement('canvas');

	return !!(canvas.getContext && canvas.getContext('2d'));
	}

	window.onload = function () {
	// Поддерживается ли canvas?
	if (!isCanvasSupported()) {
	// если нет, то ничего не делаем
	return false;
	}

	// Глобальные переменные
	canvas = document.getElementById('canvas'); // html-элемент canvas, где будем рисовать
	canvas.width = canvas.clientWidth; // Устанавливаем ширину канваса
	canvas.height = canvas.clientHeight; // Высоту
	context = canvas.getContext('2d'); // его контекст
	balls = []; // Массив с кругами

	init();
	}

	function init() {
	var COUNT_BALLS = 25; // количество мячиков

	generateBalls(COUNT_BALLS); // генерируем мячики

	// Начинаем рисовать
	// Функция drawFrame будет вызываться раз в 40 миллисекунд
	// Про setInterval почитать тут - http://javascript.ru/setInterval
	interval = setInterval(drawFrame, 40);

	// Клик по кнопке старт
	document.getElementById('start').onclick = function () {
	if (!interval) {
	interval = setInterval(drawFrame, 40);
	}
	}

	// Клик по кнопке пауза
	document.getElementById('pause').onclick = function () {
	// Останавливаем таймер
	clearInterval(interval);
	interval = null;
	}

	// Клик по кнопке стоп
	document.getElementById('stop').onclick = function () {
	var i;

	// Останавливаем таймер
	clearInterval(interval);
	interval = null;

	// Очищаем канвас
	context.clearRect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);

	// Все мячики уносим вверх, за границу канваса
	// и генерируем им новые настройки (радиус, положение, ускорение), чтобы казалось, что это новые мячики
	for (i = 0; i < balls.length; i++) {
	balls[i].update(generateRandomOptions());
	}
	}
	}

	// Генерирует рандомные настройки для одного мячика
	// радиус, позиции по х и у, ускорение, цвет и тд
	function generateRandomOptions () {
	var radius = Math.floor(Math.random() * (30 - 11)) + 10, // радиус, случайное целое число от 10 до 30
	x = Math.floor(Math.random() * (canvas.clientWidth - radius - radius + 1)) + radius; // Случайное число от radius до canvas.width - radius, чобы мячик не залезал за границы канвы

	return {
	radius: radius,
	x: x,
	y: -100, // сначала мяч находится за верхней границей канвы и его не видно, потом он начинает падать
	dy: Math.floor(Math.random() * (10 - 4)) + 3, // ускорение по y - от 3 до 10
	strokeColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6), // случайный цвет границы мячика
	fillColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6) // случайный цвет заполнения мячика
	};
	}

	// Генерирует countBalls мячиков
	// Заносит их в массив balls
	function generateBalls (countBalls) {
	var i;

	for (i = 0; i < countBalls; i++) {
	balls.push(new Ball(generateRandomOptions()));
	}
	}

	// Функция рисует мячики
	// Очищает канву и рисует мячики в новых положениях
	// При многократном вызове создается впечатление анимации
	function drawFrame () {
	var i;

	// Очищаем канву
	//context.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
	context.clearRect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);

	// Бежим по массиву с мячиками
	for (i = 0; i < balls.length; i++) {
	// nextStep прибавляет к x-позиции мячика его смещение (dx)
	// Поэтому кажется, что мяч движется
	balls[i].nextStep();

	// Рисуем мячик
	// Почитать - http://www.w3schools.com/tags/canvas_arc.asp
	context.beginPath();
	context.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI*2);
	context.lineWidth = 1;
	context.fillStyle = balls[i].fillColor;
	context.fill();
	context.stroke();

	// Если мяч улетел за нижнюю границу, то обновляем его настройки, чтобы казалось, что это новый мячик
	// При обновлении настроек он переносится вверх (за верхнюю границу канвы) и начинает опять падать
	if (balls[i].y - balls[i].radius > canvas.clientHeight) {
	balls[i].update(generateRandomOptions());
	}
	}
	}