Full version: jsB@nk » Image » Free bouncing ball
URL: https://www.javascriptbank.com/free-bouncing-ball.html
This JavaScript creates a ball which can rebounce to everywhere in the web page.
Full version: jsB@nk » Image » Free bouncing ball
URL: https://www.javascriptbank.com/free-bouncing-ball.html
<SCRIPT>function getScale(c, height) { var t = Math.sqrt(2 * height / c.gravity); var scale = 4 * height / sqr(t); return scale;}function sqr(x) { return x * x;}function updateBounce(c) { var bottom = getViewYOffset() + getViewHeight() - c.imageHeight; for (var i = 0; i < c.imageCount; i++) { var name = c.prefix + i; var scale = c.pScale[name]; var x = getLayerX(name) + c.xSpeed[name]; var y = -scale * sqr(c.pIndex[name]) + c.pHeight[name]; if (y > 0) y = bottom - y; else y = bottom; var bounds = outOfBounds(c, x, y, c.imageWidth, c.imageHeight); if (bounds & 1) { // left x = 2 * getViewXOffset() - x; c.xSpeed[name] = -c.xSpeed[name] * c.elasticity; } if (bounds & 2) { // right x = 2 * (getViewXOffset() + getViewWidth() - c.imageWidth) - x; c.xSpeed[name] = -c.xSpeed[name] * c.elasticity; } moveLayer(name, x, y); if ((c.pIndex[name] += 0.5) > c.pLimit[name]) { c.xSpeed[name] *= 1 - c.friction; c.pIndex[name] -= Math.sqrt(c.pHeight[name] / scale); c.pHeight[name] = Math.max(0.25, c.pHeight[name] * c.elasticity); c.pIndex[name] = -(c.pLimit[name] = Math.sqrt(c.pHeight[name] / scale)); if (c.pHeight[name] < c.kickThreshold) { if (c.kickOpt == 1) { // kick c.pHeight[name] = 100 + random(getViewHeight()); c.xSpeed[name] = random(41) - 20; scale = (c.pScale[name] = getScale(c, c.pHeight[name])); c.pIndex[name] = -(c.pLimit[name] = Math.sqrt(c.pHeight[name] / scale)); } else if (c.kickOpt == 2) { // drop c.pHeight[name] = getViewHeight() + c.imageHeight + 100 + random(500); c.pScale[name] = getScale(c, c.pHeight[name]); c.xSpeed[name] = random(41) - 20; c.pIndex[name] = 0; c.pLimit[name] = Math.sqrt(c.pHeight[name] / scale); } } } } setTimeout('updateBounce(c' + c.uid + ')', c.updateInterval);}</SCRIPT><SCRIPT>msie = navigator.appVersion.indexOf("MSIE") != -1;function layerSupport() { return (document.all || document.layers);}layers = new Array();layerX = new Array();layerY = new Array();cursorX = 0;cursorY = 0;function getViewWidth() { if (msie) return document.body.clientWidth; else return window.innerWidth;}function getViewHeight() { if (msie) return document.body.clientHeight; else return window.innerHeight;}function getViewXOffset() { if (msie) return document.body.scrollLeft; else return window.pageXOffset;}function getViewYOffset() { if (msie) return document.body.scrollTop; else return window.pageYOffset;}function getLayerX(i) { return layerX[i];}function getLayerY(i) { return layerY[i];}function moveLayer(i, x, y) { layerX[i] = x; layerY[i] = y; if (msie) { layers[i].style.pixelLeft = x; layers[i].style.pixelTop = y; } else { layers[i].left = x; layers[i].top = y; }}function setVisible(i, show) { if (msie) layers[i].style.visible = show ? "show" : "hidden"; else layers[i].visibility = show;}function outOfBounds(config, x, y, w, h) { var result = 0; // note that fudge factor isn't used for bottom if (x < getViewXOffset() - config.xFudge) result |= 1; // Left else if (x + w >= getViewXOffset() + getViewWidth() + config.xFudge) result |= 2; // Right if (y + h >= getViewYOffset() + getViewHeight()) result |= 4; // Bottom else if (y < getViewYOffset() - config.yFudge) result |= 8; // Top return result;}function random(bound) { return Math.floor(Math.random() * bound);}function randomX(config) { return getViewXOffset() + random(getViewWidth() - config.imageWidth);}function randomY(config) { return getViewYOffset() - config.yFudge + random(getViewHeight() + config.yFudge - config.imageHeight);}function setVisible(i, show) { if (msie) layers[i].style.visibility = show ? "" : "hidden"; else layers[i].visibility = show ? "show" : "hide";}function writeImage(image, name, x, y) { layerX[name] = x; layerY[name] = y; if (msie) { document.writeln('<div id="' + name + '" style="position:absolute;left:' + x + ';top:' + y + ';"><img src="' + image + '"></div>'); layers[name] = document.all[name]; } else { document.writeln('<layer id="' + name + '" left=' + x + ' top=' + y + '><img src="' + image + '"></layer>'); layers[name] = document.layers[name]; }}function writeImages(config) { for (var i = 0; i < config.imageCount; i++) { var startX = randomX(config); var startY = config.startOnScreen ? randomY(config) : -config.imageHeight; var name = config.prefix + i; writeImage(config.image, name, startX, startY); }}function cursorXY(e) { cursorX = msie ? (getViewXOffset() + event.clientX) : e.pageX; cursorY = msie ? (getViewYOffset() + event.clientY) : e.pageY;}function captureXY() { if (!msie) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = cursorXY;}function config() { this.xFudge = 0; this.yFudge = 0; this.updateInterval = 50; this.startOnScreen = true; this.imageCount = 1;}</SCRIPT><SCRIPT>if (layerSupport()) {c205 = new config();c205.uid = 205;c205.prefix = "y_bounce205";c205.image = "bong.gif";c205.imageWidth = 130;c205.imageHeight = 138;c205.imageCount = 1;c205.gravity = 4;c205.friction = 0.1;c205.elasticity = 0.50;c205.topWall = 0;c205.xSpeed = new Array();c205.pHeight = new Array();c205.pIndex = new Array();c205.pScale = new Array();c205.pLimit = new Array();c205.kickThreshold = 5;c205.kickOpt = 1;for (var i = 0; i < c205.imageCount; i++) { var name = c205.prefix + i; c205.xSpeed[name] = random(41) - 20; c205.pHeight[name] = -1 == -1 ? randomY(c205) : -1 + random(50); c205.pScale[name] = getScale(c205, c205.pHeight[name]); c205.pLimit[name] = Math.sqrt(c205.pHeight[name] / c205.pScale[name]); c205.pIndex[name] = 0; writeImage(c205.image, name, randomX(c205), c205.pHeight[name]);} setTimeout('updateBounce(c205)', c205.updateInterval); }</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->