Skip to content

Instantly share code, notes, and snippets.

@angus-c

angus-c/index.html

Created January 14, 2015 06:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save angus-c/1bd023e95632e39f2452 to your computer and use it in GitHub Desktop.
Save angus-c/1bd023e95632e39f2452 to your computer and use it in GitHub Desktop.
Download ZIP
bouncer // source http://jsbin.com/vodep
Raw
index.html
<!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 = 4;
var delay = 0;
var interval;
var probeOffsets = {
short: ballSize + 3,
long: 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);
function moveAll() {
for (var i = 1; i <= ballCount; i++) {
balls[i].checkCollision();
balls[i].move();
}
}
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.short, this.y, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
} else if (!isAt(this.x - probeOffsets.short, this.y, 'box')) {
this.xSpeed = Math.abs(this.xSpeed);
} else if (!isAt(this.x, this.y - probeOffsets.short, 'box')) {
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x, this.y + probeOffsets.short, 'box')) {
this.ySpeed = -Math.abs(this.ySpeed);
} else if (!isAt(this.x + probeOffsets.long , this.y - probeOffsets.long, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x + probeOffsets.long , this.y + probeOffsets.long, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
} else if (!isAt(this.x - probeOffsets.long , this.y - probeOffsets.long, 'box')) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x - probeOffsets.long , this.y + probeOffsets.long, '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 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 = 4;
var delay = 0;
var interval;
var probeOffsets = {
short: ballSize + 3,
long: 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);
function moveAll() {
for (var i = 1; i <= ballCount; i++) {
balls[i].checkCollision();
balls[i].move();
}
}
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.short, this.y, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
} else if (!isAt(this.x - probeOffsets.short, this.y, 'box')) {
this.xSpeed = Math.abs(this.xSpeed);
} else if (!isAt(this.x, this.y - probeOffsets.short, 'box')) {
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x, this.y + probeOffsets.short, 'box')) {
this.ySpeed = -Math.abs(this.ySpeed);
} else if (!isAt(this.x + probeOffsets.long , this.y - probeOffsets.long, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x + probeOffsets.long , this.y + probeOffsets.long, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
} else if (!isAt(this.x - probeOffsets.long , this.y - probeOffsets.long, 'box')) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x - probeOffsets.long , this.y + probeOffsets.long, '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 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>
Raw
jsbin.vodep.js
var svgNS = "http://www.w3.org/2000/svg";
var size = parseInt(document.getElementById('box').style.width);
var ballCount = 10;
var ballSize = 4;
var delay = 0;
var interval;
var probeOffsets = {
short: ballSize + 3,
long: 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);
function moveAll() {
for (var i = 1; i <= ballCount; i++) {
balls[i].checkCollision();
balls[i].move();
}
}
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.short, this.y, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
} else if (!isAt(this.x - probeOffsets.short, this.y, 'box')) {
this.xSpeed = Math.abs(this.xSpeed);
} else if (!isAt(this.x, this.y - probeOffsets.short, 'box')) {
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x, this.y + probeOffsets.short, 'box')) {
this.ySpeed = -Math.abs(this.ySpeed);
} else if (!isAt(this.x + probeOffsets.long , this.y - probeOffsets.long, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x + probeOffsets.long , this.y + probeOffsets.long, 'box')) {
this.xSpeed = -Math.abs(this.xSpeed);
this.ySpeed = -Math.abs(this.ySpeed);
} else if (!isAt(this.x - probeOffsets.long , this.y - probeOffsets.long, 'box')) {
this.xSpeed = Math.abs(this.xSpeed);
this.ySpeed = Math.abs(this.ySpeed);
} else if (!isAt(this.x - probeOffsets.long , this.y + probeOffsets.long, '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 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