Created
January 14, 2015 16:10
-
-
Save angus-c/fff135b90ae79f8edadf to your computer and use it in GitHub Desktop.
bouncer // source http://jsbin.com/vodep
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="http://code.jquery.com/jquery-git2.js"></script> | |
| <title>bouncer</title> | |
| </head> | |
| <body> | |
| <svg id="box" class="space" style="border: 1px solid; width: 400px; height: 400px" height="100%"></svg> | |
| <script id="jsbin-javascript"> | |
| var svgNS = "http://www.w3.org/2000/svg"; | |
| var size = parseInt(document.getElementById('box').style.width); | |
| var ballCount = 10; | |
| var ballSize = 10; | |
| var probeOffsets = { | |
| primary: ballSize + 3, | |
| secondary: Math.pow((ballSize*ballSize/2), 0.5) + 2 | |
| } | |
| console.log('probeOffsets.short' + probeOffsets.short); | |
| console.log('probeOffsets.long' + probeOffsets.long); | |
| var Ball = function (xSpeed, ySpeed, magic, id) { | |
| this.x = size*Math.random(); | |
| this.y = size*Math.random(); | |
| this.xSpeed = xSpeed; | |
| this.ySpeed = ySpeed; | |
| this.magic = magic; | |
| this.id = id; | |
| }; | |
| function circle(id, x, y, radius, color) { | |
| var c = document.createElementNS(svgNS, "circle"); | |
| c.setAttribute('id', id); | |
| c.setAttribute("class", 'ball'); | |
| c.setAttributeNS(null, "cx", x); | |
| c.setAttributeNS(null, "cy", y); | |
| c.setAttributeNS(null, "r", radius); | |
| c.setAttributeNS(null, "fill", color || "blue"); | |
| document.getElementById("box").appendChild(c); | |
| } | |
| Ball.prototype.draw = function () { | |
| circle(this.id, this.x, this.y, ballSize, this.color); | |
| }; | |
| var balls = []; | |
| for (var i = 1; i <= ballCount; i++) { | |
| balls[i] = new Ball( | |
| 1 - 2 * Math.random(), | |
| 1 - 2 * Math.random(), | |
| i == 1, | |
| i, | |
| 'blue' | |
| ); | |
| balls[i].draw(); | |
| } | |
| //interval = setInterval(moveAll, delay); | |
| Ball.prototype.move = function () { | |
| this.x += this.xSpeed; | |
| this.y += this.ySpeed; | |
| $('#' + this.id)[0].setAttributeNS(null, "cx", this.x); | |
| $('#' + this.id)[0].setAttributeNS(null, "cy", this.y); | |
| }; | |
| Ball.prototype.checkCollision = function () { | |
| if (!isAt(this.x + probeOffsets.primary, this.y, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| } else if (!isAt(this.x - probeOffsets.primary, this.y, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| } else if (!isAt(this.x, this.y - probeOffsets.primary, 'box')) { | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x, this.y + probeOffsets.primary, 'box')) { | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x + probeOffsets.secondary, this.y - probeOffsets.secondary, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x + probeOffsets.secondary, this.y + probeOffsets.secondary, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x - probeOffsets.secondary, this.y - probeOffsets.secondary, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x - probeOffsets.secondary, this.y + probeOffsets.secondary, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } | |
| function isAt(x, y, id, check) { | |
| var elem = document.elementFromPoint(x+8, y+8); | |
| //console.log(x, y, elem, elem && elem.id) | |
| return elem && elem.id && (elem.id == id); | |
| } | |
| if (this.magic) { | |
| //console.log(Object.keys(probe).filter(function(k) { | |
| // return !isAt(probe[k].x, probe[k].y, 'box'); | |
| //})); | |
| //console.log('sX', this.xSpeed, 'sY', this.ySpeed); | |
| } | |
| }; | |
| function moveAll() { | |
| for (var i = 1; i <= ballCount; i++) { | |
| debugger | |
| balls[i].checkCollision(); | |
| balls[i].move(); | |
| } | |
| requestAnimationFrame(moveAll); | |
| } | |
| moveAll(); | |
| /* | |
| function point(id, x, y, color) { | |
| var c = document.createElementNS(svgNS, "circle"); | |
| c.setAttribute('id', id); | |
| c.setAttribute("class", 'probe'); | |
| c.setAttributeNS(null, "cx", x); | |
| c.setAttributeNS(null, "cy", y); | |
| c.setAttributeNS(null, "r", 1); | |
| c.setAttributeNS(null, "fill", color || "red"); | |
| document.getElementById("box").appendChild(c); | |
| } | |
| */ | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script> | |
| <script src="//code.jquery.com/jquery-git2.js"><\/script> | |
| <title>bouncer</title> | |
| </head> | |
| <body> | |
| <svg id="box" class="space" style="border: 1px solid; width: 400px; height: 400px" height="100%"></svg> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var svgNS = "http://www.w3.org/2000/svg"; | |
| var size = parseInt(document.getElementById('box').style.width); | |
| var ballCount = 10; | |
| var ballSize = 10; | |
| var probeOffsets = { | |
| primary: ballSize + 3, | |
| secondary: Math.pow((ballSize*ballSize/2), 0.5) + 2 | |
| } | |
| console.log('probeOffsets.short' + probeOffsets.short); | |
| console.log('probeOffsets.long' + probeOffsets.long); | |
| var Ball = function (xSpeed, ySpeed, magic, id) { | |
| this.x = size*Math.random(); | |
| this.y = size*Math.random(); | |
| this.xSpeed = xSpeed; | |
| this.ySpeed = ySpeed; | |
| this.magic = magic; | |
| this.id = id; | |
| }; | |
| function circle(id, x, y, radius, color) { | |
| var c = document.createElementNS(svgNS, "circle"); | |
| c.setAttribute('id', id); | |
| c.setAttribute("class", 'ball'); | |
| c.setAttributeNS(null, "cx", x); | |
| c.setAttributeNS(null, "cy", y); | |
| c.setAttributeNS(null, "r", radius); | |
| c.setAttributeNS(null, "fill", color || "blue"); | |
| document.getElementById("box").appendChild(c); | |
| } | |
| Ball.prototype.draw = function () { | |
| circle(this.id, this.x, this.y, ballSize, this.color); | |
| }; | |
| var balls = []; | |
| for (var i = 1; i <= ballCount; i++) { | |
| balls[i] = new Ball( | |
| 1 - 2 * Math.random(), | |
| 1 - 2 * Math.random(), | |
| i == 1, | |
| i, | |
| 'blue' | |
| ); | |
| balls[i].draw(); | |
| } | |
| //interval = setInterval(moveAll, delay); | |
| Ball.prototype.move = function () { | |
| this.x += this.xSpeed; | |
| this.y += this.ySpeed; | |
| $('#' + this.id)[0].setAttributeNS(null, "cx", this.x); | |
| $('#' + this.id)[0].setAttributeNS(null, "cy", this.y); | |
| }; | |
| Ball.prototype.checkCollision = function () { | |
| if (!isAt(this.x + probeOffsets.primary, this.y, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| } else if (!isAt(this.x - probeOffsets.primary, this.y, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| } else if (!isAt(this.x, this.y - probeOffsets.primary, 'box')) { | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x, this.y + probeOffsets.primary, 'box')) { | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x + probeOffsets.secondary, this.y - probeOffsets.secondary, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x + probeOffsets.secondary, this.y + probeOffsets.secondary, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x - probeOffsets.secondary, this.y - probeOffsets.secondary, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x - probeOffsets.secondary, this.y + probeOffsets.secondary, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } | |
| function isAt(x, y, id, check) { | |
| var elem = document.elementFromPoint(x+8, y+8); | |
| //console.log(x, y, elem, elem && elem.id) | |
| return elem && elem.id && (elem.id == id); | |
| } | |
| if (this.magic) { | |
| //console.log(Object.keys(probe).filter(function(k) { | |
| // return !isAt(probe[k].x, probe[k].y, 'box'); | |
| //})); | |
| //console.log('sX', this.xSpeed, 'sY', this.ySpeed); | |
| } | |
| }; | |
| function moveAll() { | |
| for (var i = 1; i <= ballCount; i++) { | |
| debugger | |
| balls[i].checkCollision(); | |
| balls[i].move(); | |
| } | |
| requestAnimationFrame(moveAll); | |
| } | |
| moveAll(); | |
| /* | |
| function point(id, x, y, color) { | |
| var c = document.createElementNS(svgNS, "circle"); | |
| c.setAttribute('id', id); | |
| c.setAttribute("class", 'probe'); | |
| c.setAttributeNS(null, "cx", x); | |
| c.setAttributeNS(null, "cy", y); | |
| c.setAttributeNS(null, "r", 1); | |
| c.setAttributeNS(null, "fill", color || "red"); | |
| document.getElementById("box").appendChild(c); | |
| } | |
| */ | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var svgNS = "http://www.w3.org/2000/svg"; | |
| var size = parseInt(document.getElementById('box').style.width); | |
| var ballCount = 10; | |
| var ballSize = 10; | |
| var probeOffsets = { | |
| primary: ballSize + 3, | |
| secondary: Math.pow((ballSize*ballSize/2), 0.5) + 2 | |
| } | |
| console.log('probeOffsets.short' + probeOffsets.short); | |
| console.log('probeOffsets.long' + probeOffsets.long); | |
| var Ball = function (xSpeed, ySpeed, magic, id) { | |
| this.x = size*Math.random(); | |
| this.y = size*Math.random(); | |
| this.xSpeed = xSpeed; | |
| this.ySpeed = ySpeed; | |
| this.magic = magic; | |
| this.id = id; | |
| }; | |
| function circle(id, x, y, radius, color) { | |
| var c = document.createElementNS(svgNS, "circle"); | |
| c.setAttribute('id', id); | |
| c.setAttribute("class", 'ball'); | |
| c.setAttributeNS(null, "cx", x); | |
| c.setAttributeNS(null, "cy", y); | |
| c.setAttributeNS(null, "r", radius); | |
| c.setAttributeNS(null, "fill", color || "blue"); | |
| document.getElementById("box").appendChild(c); | |
| } | |
| Ball.prototype.draw = function () { | |
| circle(this.id, this.x, this.y, ballSize, this.color); | |
| }; | |
| var balls = []; | |
| for (var i = 1; i <= ballCount; i++) { | |
| balls[i] = new Ball( | |
| 1 - 2 * Math.random(), | |
| 1 - 2 * Math.random(), | |
| i == 1, | |
| i, | |
| 'blue' | |
| ); | |
| balls[i].draw(); | |
| } | |
| //interval = setInterval(moveAll, delay); | |
| Ball.prototype.move = function () { | |
| this.x += this.xSpeed; | |
| this.y += this.ySpeed; | |
| $('#' + this.id)[0].setAttributeNS(null, "cx", this.x); | |
| $('#' + this.id)[0].setAttributeNS(null, "cy", this.y); | |
| }; | |
| Ball.prototype.checkCollision = function () { | |
| if (!isAt(this.x + probeOffsets.primary, this.y, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| } else if (!isAt(this.x - probeOffsets.primary, this.y, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| } else if (!isAt(this.x, this.y - probeOffsets.primary, 'box')) { | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x, this.y + probeOffsets.primary, 'box')) { | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x + probeOffsets.secondary, this.y - probeOffsets.secondary, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x + probeOffsets.secondary, this.y + probeOffsets.secondary, 'box')) { | |
| this.xSpeed = -Math.abs(this.xSpeed); | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x - probeOffsets.secondary, this.y - probeOffsets.secondary, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| this.ySpeed = Math.abs(this.ySpeed); | |
| } else if (!isAt(this.x - probeOffsets.secondary, this.y + probeOffsets.secondary, 'box')) { | |
| this.xSpeed = Math.abs(this.xSpeed); | |
| this.ySpeed = -Math.abs(this.ySpeed); | |
| } | |
| function isAt(x, y, id, check) { | |
| var elem = document.elementFromPoint(x+8, y+8); | |
| //console.log(x, y, elem, elem && elem.id) | |
| return elem && elem.id && (elem.id == id); | |
| } | |
| if (this.magic) { | |
| //console.log(Object.keys(probe).filter(function(k) { | |
| // return !isAt(probe[k].x, probe[k].y, 'box'); | |
| //})); | |
| //console.log('sX', this.xSpeed, 'sY', this.ySpeed); | |
| } | |
| }; | |
| function moveAll() { | |
| for (var i = 1; i <= ballCount; i++) { | |
| debugger | |
| balls[i].checkCollision(); | |
| balls[i].move(); | |
| } | |
| requestAnimationFrame(moveAll); | |
| } | |
| moveAll(); | |
| /* | |
| function point(id, x, y, color) { | |
| var c = document.createElementNS(svgNS, "circle"); | |
| c.setAttribute('id', id); | |
| c.setAttribute("class", 'probe'); | |
| c.setAttributeNS(null, "cx", x); | |
| c.setAttributeNS(null, "cy", y); | |
| c.setAttributeNS(null, "r", 1); | |
| c.setAttributeNS(null, "fill", color || "red"); | |
| document.getElementById("box").appendChild(c); | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment