shallaa/bounce.html

## bounce.html
<!DOCTYPE html>
<html lang="ko">
<title>Bounce</title>
<meta name="keywords" content="bs5" />
<meta name="description" content="bs5 Test suite" />
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,target-densitydpi=medium-dpi" />
<link rel="shortcut icon" href="http://blog.bsidesoft.com/favicon.ico" type="image/x-icon">
</head>
<body>
    <a href="https://github.com/projectBS/bsJS">
    <img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
<div id="stage"></div>
<!-- https://github.com/projectBS/bsJS -->
<script src="../bs/bs5.js"></script>
<script>
bs(function(){
bs.css("body").$("background", "#000", "overflow", "hidden", "margin", 0, "padding", 0);
bs.ANI.fps( bs.dom('<div></div>' ).$( 'id', 'fps', 'position','absolute', 'font-size', 11, 'color', '#fff', '<', 'body', 'this' )[0] );
var game = {
    balls:[],
    w:0, h:0,
    started:false,
    numBalls:(bs.DETECT.device == "mobile") ? 5 : (bs.DETECT.device == "tablet") ? 15 : 20,
    init:function(w, h) {
        this.w = w;
        this.h = h;

        if ( this.started == false) {
            this.started = true;

            var i, r, x, y, vx, vy;

            for (i = 0; i < this.numBalls; i++) {
                r = bs.$ex(20, "~", 40);
                x = bs.$ex(r, "~", w - r * 2);
                y = bs.$ex(r, "~", h - r * 2);
                vx = bs.$ex(-5, "~", 5);
                vy = bs.$ex(-5, "~", 5);

                bs.dom("<div></div>").$(
                    "id", "ball" + i,
                    "position", "absolute",
                    "background", (i == 0) ? "#FF0000" : "#FFF",
                    "width", r * 2, "height", r * 2,
                    "border-radius", r,
                    "left", x,
                    "top", y,
                    "margin-left", -r,
                    "margin-top", -r,
                    "<", "#stage"
                );

                this.balls[i] = {
                    r:r,
                    m:r,
                    x:x,
                    y:y,
                    vx:vx,
                    vy:vy
                };
            }

            bs.ANI.ani(this);
        }
    },
    rotate:function(x, y, s, c, r) {
        if (r) {
            return {
                x:x * c + y * s,
                y:y * c - x * s
            };
        }
        else {
            return {
                x:x * c - y * s,
                y:y * c + x * s
            };
        }
    },
    ANI:function() {
        var i, j, b0, b1, dx, dy, a, s, c, p0, p1, v0, v1, vxt,
            va, ol, pf0, pf1, vf0, vf1;

        for (i = 0; i < this.numBalls; i++) {
            b0 = this.balls[i];
            b0.x = b0.x + b0.vx;
            b0.y = b0.y + b0.vy;

            bs.dom("#ball" + i).$("left", b0.x, "top", b0.y);

            if (b0.x + b0.r > this.w) {
                b0.x = this.w - b0.r;
                b0.vx = b0.vx * -1;
            }
            else if (b0.x - b0.r < 0) {
                b0.x = b0.r;
                b0.vx = b0.vx * -1;
            }

            if (b0.y + b0.r > this.h) {
                b0.y = this.h - b0.r;
                b0.vy = b0.vy * -1;
            }
            else if (b0.y - b0.r < 0) {
                b0.y = b0.r;
                b0.vy = b0.vy * -1;
            }

            for (j = i + 1; j < this.numBalls; j++) {
                b1 = this.balls[j];
                dx = b1.x - b0.x;
                dy = b1.y - b0.y;

                if (Math.sqrt(dx * dx + dy * dy) < b0.r + b1.r) {
                    a = Math.atan2(dy, dx);
                    s = Math.sin(a);
                    c = Math.cos(a);
                    p0 = {x:0, y:0};
                    p1 = this.rotate(dx, dy, s, c, true);
                    v0 = this.rotate(b0.vx, b0.vy, s, c, true);
                    v1 = this.rotate(b1.vx, b1.vy, s, c, true);
                    vxt = v0.x - v1.x;

                    v0.x = ((b0.m - b1.m) * v0.x + 2 * b1.m * v1.x) / (b0.m + b1.m);
                    v1.x = vxt + v0.x;

                    av = Math.abs(v0.x) + Math.abs(v1.x);
                    ol = (b0.r + b1.r) - Math.abs(p0.x - p1.x);

                    p0.x = p0.x + v0.x / av * ol;
                    p1.x = p1.x + v1.x / av * ol;

                    pf0 = this.rotate(p0.x, p0.y, s, c, false);
                    pf1 = this.rotate(p1.x, p1.y, s, c, false);

                    b1.x = b0.x + pf1.x;
                    b1.y = b0.y + pf1.y;
                    b0.x = b0.x + pf0.x;
                    b0.y = b0.y + pf0.y;

                    vf0 = this.rotate(v0.x, v0.y, s, c, false);
                    vf1 = this.rotate(v1.x, v1.y, s, c, false);

                    b0.vx = vf0.x;
                    b0.vy = vf0.y;
                    b1.vx = vf1.x;
                    b1.vy = vf1.y;
                }
            }
        }
    }
};
bs.WIN.sizer(function(w, h) {
    game.init(w, h);
});
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ko">
	<title>Bounce</title>
	<meta name="keywords" content="bs5" />
	<meta name="description" content="bs5 Test suite" />
	<meta charset="utf-8"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,target-densitydpi=medium-dpi" />
	<link rel="shortcut icon" href="http://blog.bsidesoft.com/favicon.ico" type="image/x-icon">
	</head>
	<body>
	<a href="https://github.com/projectBS/bsJS">
	<img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
	</a>
	<div id="stage"></div>
	<!-- https://github.com/projectBS/bsJS -->
	<script src="../bs/bs5.js"></script>
	<script>
	bs(function(){
	bs.css("body").$("background", "#000", "overflow", "hidden", "margin", 0, "padding", 0);
	bs.ANI.fps( bs.dom('<div></div>' ).$( 'id', 'fps', 'position','absolute', 'font-size', 11, 'color', '#fff', '<', 'body', 'this' )[0] );
	var game = {
	balls:[],
	w:0, h:0,
	started:false,
	numBalls:(bs.DETECT.device == "mobile") ? 5 : (bs.DETECT.device == "tablet") ? 15 : 20,
	init:function(w, h) {
	this.w = w;
	this.h = h;

	if ( this.started == false) {
	this.started = true;

	var i, r, x, y, vx, vy;

	for (i = 0; i < this.numBalls; i++) {
	r = bs.$ex(20, "~", 40);
	x = bs.$ex(r, "~", w - r * 2);
	y = bs.$ex(r, "~", h - r * 2);
	vx = bs.$ex(-5, "~", 5);
	vy = bs.$ex(-5, "~", 5);

	bs.dom("<div></div>").$(
	"id", "ball" + i,
	"position", "absolute",
	"background", (i == 0) ? "#FF0000" : "#FFF",
	"width", r * 2, "height", r * 2,
	"border-radius", r,
	"left", x,
	"top", y,
	"margin-left", -r,
	"margin-top", -r,
	"<", "#stage"
	);

	this.balls[i] = {
	r:r,
	m:r,
	x:x,
	y:y,
	vx:vx,
	vy:vy
	};
	}

	bs.ANI.ani(this);
	}
	},
	rotate:function(x, y, s, c, r) {
	if (r) {
	return {
	x:x * c + y * s,
	y:y * c - x * s
	};
	}
	else {
	return {
	x:x * c - y * s,
	y:y * c + x * s
	};
	}
	},
	ANI:function() {
	var i, j, b0, b1, dx, dy, a, s, c, p0, p1, v0, v1, vxt,
	va, ol, pf0, pf1, vf0, vf1;

	for (i = 0; i < this.numBalls; i++) {
	b0 = this.balls[i];
	b0.x = b0.x + b0.vx;
	b0.y = b0.y + b0.vy;

	bs.dom("#ball" + i).$("left", b0.x, "top", b0.y);

	if (b0.x + b0.r > this.w) {
	b0.x = this.w - b0.r;
	b0.vx = b0.vx * -1;
	}
	else if (b0.x - b0.r < 0) {
	b0.x = b0.r;
	b0.vx = b0.vx * -1;
	}

	if (b0.y + b0.r > this.h) {
	b0.y = this.h - b0.r;
	b0.vy = b0.vy * -1;
	}
	else if (b0.y - b0.r < 0) {
	b0.y = b0.r;
	b0.vy = b0.vy * -1;
	}

	for (j = i + 1; j < this.numBalls; j++) {
	b1 = this.balls[j];
	dx = b1.x - b0.x;
	dy = b1.y - b0.y;

	if (Math.sqrt(dx * dx + dy * dy) < b0.r + b1.r) {
	a = Math.atan2(dy, dx);
	s = Math.sin(a);
	c = Math.cos(a);
	p0 = {x:0, y:0};
	p1 = this.rotate(dx, dy, s, c, true);
	v0 = this.rotate(b0.vx, b0.vy, s, c, true);
	v1 = this.rotate(b1.vx, b1.vy, s, c, true);
	vxt = v0.x - v1.x;

	v0.x = ((b0.m - b1.m) * v0.x + 2 * b1.m * v1.x) / (b0.m + b1.m);
	v1.x = vxt + v0.x;

	av = Math.abs(v0.x) + Math.abs(v1.x);
	ol = (b0.r + b1.r) - Math.abs(p0.x - p1.x);

	p0.x = p0.x + v0.x / av * ol;
	p1.x = p1.x + v1.x / av * ol;

	pf0 = this.rotate(p0.x, p0.y, s, c, false);
	pf1 = this.rotate(p1.x, p1.y, s, c, false);

	b1.x = b0.x + pf1.x;
	b1.y = b0.y + pf1.y;
	b0.x = b0.x + pf0.x;
	b0.y = b0.y + pf0.y;

	vf0 = this.rotate(v0.x, v0.y, s, c, false);
	vf1 = this.rotate(v1.x, v1.y, s, c, false);

	b0.vx = vf0.x;
	b0.vy = vf0.y;
	b1.vx = vf1.x;
	b1.vy = vf1.y;
	}
	}
	}
	}
	};
	bs.WIN.sizer(function(w, h) {
	game.init(w, h);
	});
	});
	</script>
	</body>
	</html>