MaxSWR/Boomshine.html

## Boomshine.html
<!DOCTYPE html>
<html>
<head>
    <title>Boomshine</title>
    <style type="text/css">
        #canvas {
            border: 1px solid black;
            position: absolute;
        }
    </style>
</head>
<body>
    <canvas id="canvas" onclick="canvasClick(arguments[0])">canvas</canvas>
</body>
    <script type="text/javascript">
        var H = W = 500;
        var STATE = {DIE: -1, USUAL: 1, GREW: 2, STOP: 3, SM: 4};
        var TIME_AFTER_STOP = 5;
        var TIME_FOR_GREW = 5;
        var PREV_TIME_FRAME, DELTA; // ms
        var FPS = 25;
        var CIRCLES_COUNT = 20;

        var canvas, ctx, circles = [];
        canvasInit();
        ctx = canvas.getContext("2d");

        for (var i = 0; i < CIRCLES_COUNT; i++) {
            circles[i] = new Circle();
        }

        PREV_TIME_FRAME = performance.now();

        setInterval(GAME_LOOP, 1/FPS);

        function GAME_LOOP() {
            //////////////////////////
            DELTA = performance.now() - PREV_TIME_FRAME;
            //////////////////////////

            clear("#003333");

            for (var i = 0; i < CIRCLES_COUNT; i++) {
                circles[i].draw();

                if (circles[i].getState() == STATE.DIE) {
                    circles.splice(i, 1);
                    CIRCLES_COUNT--;
                } else if (circles[i].getState() != STATE.DIE && circles[i].getState() != STATE.USUAL) {
                    for (var j = 0; j < CIRCLES_COUNT; j++) {
                        if (i != j && circles[j].getState() == STATE.USUAL) {
                            if (testCollision(i, j))
                                circles[j].setState(STATE.GREW);
                        }
                    }
                }
            }

            /////////////////////////
            PREV_TIME_FRAME = performance.now();
            ////////////////////////
        }

        function testCollision(i, j) {
            var R1 = circles[i].getR();
            var R2 = circles[j].getR();
            var pos1 = circles[i].getPos();
            var pos2 = circles[j].getPos();

            if (Math.sqrt((pos1.x - pos2.x)*(pos1.x - pos2.x) + (pos1.y - pos2.y)*(pos1.y - pos2.y)) < R1 + R2)
                return true;

            return false;
        }

        /**
        * Circle class with constructor
        **/
        function Circle(x = -1, y = -1) {
            var getRandomColor = function() {
                var letters = '0123456789ABCDEF';
                var color = '#';

                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }

                return color;
            }

            var getSpeedRandom = function() {
                var x = 0.1 + (parseInt(Math.random() * 10))/100;

                if (Math.random() > 0.5)
                    x = -x;

                return x;
            }

            var _R = 8;
            var _MAX_R = 50;
            var timer = 0;
            var _pos, _color, _speed, _main, _state;

            if (x == -1 && y == -1){
                _pos= {x: parseInt(_R + Math.random() * (W - _R)), y: parseInt(_R + Math.random() * (H - _R))};
                _color = getRandomColor();
                _speed = {x: getSpeedRandom(), y: getSpeedRandom()};
                _state = STATE.USUAL;
                _main = false;
            } else {
                _pos= {x: x, y: y};
                _color = "#7f9898";
                _speed = {x: 0, y: 0};
                _state = STATE.GREW;
                _main = true;
            }

            this.draw = function() {
                switch (_state) {
                    case STATE.USUAL:
                        this.move();
                        break;

                    case STATE.GREW:
                        _R += 0.3;

                        if (_R > _MAX_R) {
                            _R = _MAX_R;
                            _state++;
                        }

                        break;

                    case STATE.STOP:
                        timer += DELTA;

                        if (timer > 2000) { // > 3s
                            _state++;
                        }
                        break;

                    case STATE.SM:
                        _R -= 0.6;

                        if (_R < 0) {
                            _state = STATE.DIE;
                        }

                        break;
                }

                if (_state != -1) {
                    if (!_main && _state != STATE.USUAL)
                        ctx.globalAlpha = 0.2;

                    ctx.fillStyle = _color;
                    ctx.beginPath();
                    ctx.arc(_pos.x, _pos.y, _R, 0, 2*Math.PI);
                    ctx.fill();
                    ctx.globalAlpha = 1;
                }
            }

            this.move = function() {
                _pos.x += _speed.x;
                _pos.y += _speed.y;

                if (_pos.x + _R > W || _pos.x - _R < 0)
                    _speed.x = -_speed.x;

                if (_pos.y + _R > H || _pos.y - _R < 0)
                    _speed.y = -_speed.y;
            }

            this.getState = function() {
                return _state;
            }

            this.getR = function() {
                return _R;
            }

            this.getPos = function() {
                return _pos;
            }

            this.setState = function(S) {
                _state = S;
            }
        }

        function clear(color = "white") {
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, W, H);
        }

        function canvasInit() {
            canvas = document.getElementById("canvas");
            canvas.width = W;
            canvas.height = H;
            var w = document.body.clientWidth;
            canvas.style.left = parseInt(w/2 - W/2) + "px";
        }

        function canvasClick(e) {
            var x = (e.pageX - canvas.offsetLeft)| 0;
            var y = (e.pageY - canvas.offsetTop) | 0;
            var tmp = [];

            for (var i = 0; i < CIRCLES_COUNT; i++) {
                tmp[i + 1] = circles[i];
            }

            tmp[0] = new Circle(x, y);
            circles = tmp;
            CIRCLES_COUNT++;
        }
    </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Boomshine</title>
	<style type="text/css">
	#canvas {
	border: 1px solid black;
	position: absolute;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas" onclick="canvasClick(arguments[0])">canvas</canvas>
	</body>
	<script type="text/javascript">
	var H = W = 500;
	var STATE = {DIE: -1, USUAL: 1, GREW: 2, STOP: 3, SM: 4};
	var TIME_AFTER_STOP = 5;
	var TIME_FOR_GREW = 5;
	var PREV_TIME_FRAME, DELTA; // ms
	var FPS = 25;
	var CIRCLES_COUNT = 20;

	var canvas, ctx, circles = [];
	canvasInit();
	ctx = canvas.getContext("2d");

	for (var i = 0; i < CIRCLES_COUNT; i++) {
	circles[i] = new Circle();
	}

	PREV_TIME_FRAME = performance.now();

	setInterval(GAME_LOOP, 1/FPS);

	function GAME_LOOP() {
	//////////////////////////
	DELTA = performance.now() - PREV_TIME_FRAME;
	//////////////////////////

	clear("#003333");

	for (var i = 0; i < CIRCLES_COUNT; i++) {
	circles[i].draw();

	if (circles[i].getState() == STATE.DIE) {
	circles.splice(i, 1);
	CIRCLES_COUNT--;
	} else if (circles[i].getState() != STATE.DIE && circles[i].getState() != STATE.USUAL) {
	for (var j = 0; j < CIRCLES_COUNT; j++) {
	if (i != j && circles[j].getState() == STATE.USUAL) {
	if (testCollision(i, j))
	circles[j].setState(STATE.GREW);
	}
	}
	}
	}

	/////////////////////////
	PREV_TIME_FRAME = performance.now();
	////////////////////////
	}

	function testCollision(i, j) {
	var R1 = circles[i].getR();
	var R2 = circles[j].getR();
	var pos1 = circles[i].getPos();
	var pos2 = circles[j].getPos();

	if (Math.sqrt((pos1.x - pos2.x)(pos1.x - pos2.x) + (pos1.y - pos2.y)(pos1.y - pos2.y)) < R1 + R2)
	return true;

	return false;
	}

	/**
	* Circle class with constructor
	**/
	function Circle(x = -1, y = -1) {
	var getRandomColor = function() {
	var letters = '0123456789ABCDEF';
	var color = '#';

	for (var i = 0; i < 6; i++) {
	color += letters[Math.floor(Math.random() * 16)];
	}

	return color;
	}

	var getSpeedRandom = function() {
	var x = 0.1 + (parseInt(Math.random() * 10))/100;

	if (Math.random() > 0.5)
	x = -x;

	return x;
	}

	var _R = 8;
	var _MAX_R = 50;
	var timer = 0;
	var _pos, _color, _speed, _main, _state;

	if (x == -1 && y == -1){
	_pos= {x: parseInt(_R + Math.random() * (W - _R)), y: parseInt(_R + Math.random() * (H - _R))};
	_color = getRandomColor();
	_speed = {x: getSpeedRandom(), y: getSpeedRandom()};
	_state = STATE.USUAL;
	_main = false;
	} else {
	_pos= {x: x, y: y};
	_color = "#7f9898";
	_speed = {x: 0, y: 0};
	_state = STATE.GREW;
	_main = true;
	}

	this.draw = function() {
	switch (_state) {
	case STATE.USUAL:
	this.move();
	break;

	case STATE.GREW:
	_R += 0.3;

	if (_R > _MAX_R) {
	_R = _MAX_R;
	_state++;
	}

	break;

	case STATE.STOP:
	timer += DELTA;

	if (timer > 2000) { // > 3s
	_state++;
	}
	break;

	case STATE.SM:
	_R -= 0.6;

	if (_R < 0) {
	_state = STATE.DIE;
	}

	break;
	}

	if (_state != -1) {
	if (!_main && _state != STATE.USUAL)
	ctx.globalAlpha = 0.2;

	ctx.fillStyle = _color;
	ctx.beginPath();
	ctx.arc(_pos.x, _pos.y, _R, 0, 2*Math.PI);
	ctx.fill();
	ctx.globalAlpha = 1;
	}
	}

	this.move = function() {
	_pos.x += _speed.x;
	_pos.y += _speed.y;

	if (_pos.x + _R > W \|\| _pos.x - _R < 0)
	_speed.x = -_speed.x;

	if (_pos.y + _R > H \|\| _pos.y - _R < 0)
	_speed.y = -_speed.y;
	}

	this.getState = function() {
	return _state;
	}

	this.getR = function() {
	return _R;
	}

	this.getPos = function() {
	return _pos;
	}

	this.setState = function(S) {
	_state = S;
	}
	}

	function clear(color = "white") {
	ctx.fillStyle = color;
	ctx.fillRect(0, 0, W, H);
	}

	function canvasInit() {
	canvas = document.getElementById("canvas");
	canvas.width = W;
	canvas.height = H;
	var w = document.body.clientWidth;
	canvas.style.left = parseInt(w/2 - W/2) + "px";
	}

	function canvasClick(e) {
	var x = (e.pageX - canvas.offsetLeft)\| 0;
	var y = (e.pageY - canvas.offsetTop) \| 0;
	var tmp = [];

	for (var i = 0; i < CIRCLES_COUNT; i++) {
	tmp[i + 1] = circles[i];
	}

	tmp[0] = new Circle(x, y);
	circles = tmp;
	CIRCLES_COUNT++;
	}
	</script>
	</html>