Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@NigelKibodeaux
NigelKibodeaux committed Feb 24, 2013
1 parent a3fcf3a commit 5492369
Showing 1 changed file with 1 addition and 284 deletions.
285 changes: 1 addition & 284 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,290 +29,7 @@
}
</style>

<script type="text/javascript">
//<![CDATA[

function startStop(){
if(on) {
clearInterval(runLoop);
} else {
runLoop = setInterval(draw, 0);
lastTime = new Date().getTime();
}

on = !on;
}

function canvasClick(e) {
powerArray.push(new Explosion(mouseX, mouseY));
}

function mouseMove(e) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}

function Explosion(initX, initY) {
this.startTime = new Date().getTime();
this.timeLimit = 500;
this.x = initX;
this.y = initY;
var dX = x - mouseX;
var dY = y - mouseY;
var distance = Math.sqrt(dX*dX + dY*dY);

// modify ball movement
Vy = Vy + (powerFactor/distance) * (dY/distance);
Vx = Vx + (powerFactor/distance) * (dX/distance);

// draw
this.draw = function() {
ctx.save();
var radius = 1.2 * (newTime-this.startTime);
var opacity = 1 - ( .75 * Math.atan(.01*radius) );

ctx.beginPath();
ctx.arc(this.x, this.y, radius, 0, Math.PI * 2, true);
ctx.fillStyle = 'rgba(255,0,0,'+opacity+')';
ctx.strokeStyle = 'rgba(0,0,0,'+opacity/2+')';
ctx.lineWidth = 5;
//ctx.stroke();
ctx.fill();
ctx.restore();
}
}

function StickyPatch(initX, initY) {
this.startTime = new Date().getTime();
this.timeLimit = 1000;
this.x = initX;
this.y = initY;
this.initialAx = Ax;
this.initialAy = Ay;
this.radius = 50
this.power = .8;

// draw
this.draw = function() {

// modify ball movement
var dX = x - this.x;
var dY = y - this.y;
var distance = Math.sqrt(dX*dX + dY*dY);
if (distance < this.radius) {
Vy = Vy * this.power;
Vx = Vx * this.power;
}

var opacity = .6 - (newTime - this.startTime)/this.timeLimit * .5;

ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.fillStyle = 'rgba(0,100,0,'+opacity+')';
//ctx.strokeStyle = 'rgba(0,0,0,'+this.opacity/2+')';
ctx.lineWidth = 5;
//ctx.stroke();
ctx.fill();
ctx.restore();
}
}

function Magnet(initX, initY) {
this.startTime = new Date().getTime();
this.timeLimit = 300;
this.x = initX;
this.y = initY;
var dX = x - mouseX;
var dY = y - mouseY;
var distance = Math.sqrt(dX*dX + dY*dY);

// modify ball movement
Vy = Vy - (powerFactor/distance) * (dY/distance);
Vx = Vx - (powerFactor/distance) * (dX/distance);

// draw
this.draw = function() {
var radius = 1.2 * (this.startTime + this.timeLimit - newTime);
var opacity = 1 - ( .75 * Math.atan(.01*radius) );

if(radius > 0) {
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, radius, 0, Math.PI * 2, true);
ctx.fillStyle = 'rgba(0,0,255,'+opacity+')';
ctx.strokeStyle = 'rgba(0,0,0,'+opacity/2+')';
ctx.lineWidth = 5;
//ctx.stroke();
ctx.fill();
ctx.restore();
}
}
}

function SlowMagnet(initX, initY) {
this.startTime = new Date().getTime();
this.timeLimit = 1500;
this.power = powerFactor * .0005;
this.x = initX;
this.y = initY;
this.initialAx = Ax;
this.initialAy = Ay;

// draw
this.draw = function() {
//var radius = .4 * (this.startTime + this.timeLimit - newTime);
//var opacity = 1 - ( .75 * Math.atan(.01*radius) );
var radius = 5;
var opacity = .7;

if(newTime - this.startTime < this.timeLimit - 10) {
// modify ball movement
var dX = x - mouseX;
var dY = y - mouseY;
var distance = Math.sqrt(dX*dX + dY*dY);

Ay = Ay - (this.power/distance) * (dY/distance);
Ax = Ax - (this.power/distance) * (dX/distance);

ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, radius, 0, Math.PI * 2, true);
ctx.fillStyle = 'rgba(0,0,0,'+opacity+')';
ctx.strokeStyle = 'rgba(0,0,0,'+opacity/2+')';
ctx.lineWidth = 5;
//ctx.stroke();
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = 'rgba(0,0,0,1)';
ctx.shadowBlur = 100;
ctx.fill();
ctx.restore();
} else {
Ax = this.initialAx;
Ay = this.initialAy;
}
}
}

function keyDown(e) {
if(mouseX && mouseY) {
if(e.keyCode == 49) {
powerArray.push(new Explosion(mouseX, mouseY));
} else if(e.keyCode == 50) {
powerArray.push(new Magnet(mouseX, mouseY));
} else if(e.keyCode == 51) {
powerArray.push(new SlowMagnet(mouseX, mouseY));
} else if(e.keyCode == 52) {
powerArray.push(new StickyPatch(mouseX, mouseY));
}
}
//e.preventDefault();
}

function draw() {

canvasWidth = canvasElement.width;
canvasHeight = canvasElement.height;

// new time
newTime = new Date().getTime();

// clear canvas
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

// draw powers
var newPowerArray = [];
while(power = powerArray.pop())
{
power.draw();

if(newTime - power.startTime < power.timeLimit)
newPowerArray.push(power);
}
powerArray = newPowerArray;

// draw ball
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

// draw cursor
/*if(typeof mouseX != 'undefined') {
ctx.beginPath();
ctx.arc(mouseX, mouseY, 2, 0, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();
}*/

// increment stuff
elapsed = newTime - lastTime;
Vx = Ax * elapsed + Vx;
x = x + Vx * elapsed;
Vy = Vy + Ay * elapsed;
y = y + Vy * elapsed;

// don't let it get out of bounds
if (y > (canvasHeight - ballRadius)) y = canvasHeight - ballRadius; // bottom
if (y < (0 + ballRadius)) y = ballRadius; // top
if (x < (0 + ballRadius)) x = ballRadius; // left
if (x > (canvasWidth - ballRadius)) x = canvasWidth - ballRadius; // right

// calculate bounces
if ((y == (canvasHeight - ballRadius) && Vy > 0) || (y == ballRadius && Vy < 0)) {
Vy = -(Vy) * COF;
Vx = Vx * rollingCOF;
}
if ((x == ballRadius && Vx < 0) || (x == (canvasWidth - ballRadius) && Vx > 0)) {
Vx = -(Vx) * COF;
Vy = Vy * rollingCOF;
}

// info
//xDisplay.value = Math.floor(x);
//yDisplay.value = Math.floor(y);

lastTime = new Date().getTime();
}

window.addEventListener('load', function() {
on = true;
speedMultiplier = 1;
x = 10;
y = 10;
Vx = .1;
Vy = 0;
Ax = 0;
Ay = .0015 * speedMultiplier;
//Ay = .00005;
COF = .95;
rollingCOF = .98;
powerFactor = 10 * speedMultiplier;
//powerFactor = 10;
ballRadius = 15;
powerArray = [];
level = 1;

clickX = false;
clickY = false;
canvasElement = document.getElementById('canvas');
//canvasElement.onselectstart = function () { return false; }
canvasElement.addEventListener('mousedown', canvasClick, false);
canvasElement.addEventListener('mousemove', mouseMove, false);
//canvasElement.addEventListener('mouseout', function(){if(on)startStop();}, false);
//canvasElement.addEventListener('mouseover', function(){if(!on)startStop();}, false);
document.addEventListener('keydown', keyDown, false);
ctx = canvasElement.getContext("2d");
xDisplay = document.getElementById('x');
yDisplay = document.getElementById('y');
lastTime = new Date().getTime();

runLoop = setInterval(draw, 33);

}, false);
//]]>
</script>
<script type="text/javascript" src="script.js"></script>

</head>
<body>
Expand Down

0 comments on commit 5492369

Please sign in to comment.