-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8ae959c
commit a3fcf3a
Showing
1 changed file
with
280 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,280 @@ | ||
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); |