[go: up one dir, main page]

0% found this document useful (0 votes)
16 views4 pages

Red Circle With Perfect Collision

Uploaded by

Ruhma Sumbal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views4 pages

Red Circle With Perfect Collision

Uploaded by

Ruhma Sumbal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

var myGamePiece;

var myObstacles=[];

var moveIt = canvas.getContext("2d"); //returns a drawing context on the canvas

var deltaX = 300;


var deltaY = 100;

//addEventListener() works by adding a function or an object that implements


EventListener to the list of event listeners for the specified event type on the
EventTarget on which it's called
window.addEventListener("keydown", keysPressed, false);
window.addEventListener("keyup", keysReleased, false);

//Store the Key events in Array


var keys = [];

//On Key Down


function keysPressed(e) {
// store an entry for every key pressed
keys[e.keyCode] = true;

// left
if (keys[37]) {
deltaX -= 5;
}

// right
if (keys[39]) {
deltaX += 5;
}

// down
if (keys[38]) {
deltaY -= 5;
}

// up
if (keys[40]) {
deltaY += 5;
}

//e.preventDefault();
}

//On Key Up
function keysReleased(e) {
// mark keys that were released
keys[e.keyCode] = false;
}

//Now Let the Magic begins...


function drawCircle(x, y) {
//starts a new path by emptying the list of sub-paths. Call this method when
you want to create a new path.
moveIt.beginPath();
//adds an arc to the path which is centered at (x, y) position with radius r
starting at startAngle and ending at endAngle going in the given direction by
anticlockwise (defaulting to clockwise)
moveIt.arc(x, y, 15, 0, 2 * Math.PI, true);
//causes the point of the pen to move back to the start of the current sub-
path. It tries to add a straight line (but does not actually draw it) from the
current point to the start. If the shape has already been closed or has only one
point, this function does nothing
moveIt.closePath();
//specifies the color or style to use inside shapes
moveIt.fillStyle = "rgb(255, 0, 0)";
moveIt.stroke();
//fills the current or given path with the current fill style using the non-zero
or even-odd winding rule

moveIt.fill();
}

//Request Animation Frame


function animate() {
//sets all pixels in the rectangle defined by starting point (x, y) and size
(width, height) to transparent black, erasing any previously drawn content
//moveIt.clearRect(0, 0, canvas.width, canvas.height);
//if(deltaX<canvas.width && deltaY<canvas.height){
drawCircle(deltaX, deltaY);

return requestAnimationFrame(animate);

function startGame() {
//myObstacle = new component(10, 200, "green", 300, 120);
myGameArea.start();
myGamePiece=animate();
myGamePiece=drawCircle(300, 100);
}

var myGameArea = {
canvas : document.getElementById("canvas"),
start : function() {
this.canvas.width = 900;
this.canvas.height = 300;
this.context = this.canvas.getContext("2d");
//document.body.insertBefore(this.canvas, document.body.childNodes[0]);
document.getElementById("canvas").appendChild(document.body.childNodes[2]);
this.frameNo=0;
this.interval = setInterval(updateGameArea, 20);

},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}

function component(width, height, color, x, y) {


this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}

}
function updateGameArea() {

myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
y=myGameArea.canvas.height;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
//var testX, testY,distanceX,distanceY,dist;
//for (i = 0; i < myObstacles.length; i += 1) {

// }
/*for (i = 0; i < myObstacles.length; i += 1) {
var distX = Math.abs(deltaX - myObstacles[i].x);
var distY = Math.abs(deltaY - myObstacles[i].y);

if (distX > (myObstacles[i].width/2 + 15))


{ distX=myObstacles[i].width/2 + 15;console.log("false"); }
if (distY > (myObstacles[i].height/2 + 15))
{ distY=myObstacles[i].height/2 + 15;console.log("false"); }

if (distX < (myObstacles[i].width/2)) { distX =


(myObstacles[i].width/2);//console.log("true");
}

if (distY < (myObstacles[i].height/2)) { distY =


(myObstacles[i].height/2);//console.log("true");
}

// also test for corner collisions


var dx=distX-myObstacles[i].width/2;
var dy=distY-myObstacles[i].height/2;
if(dx*dx+dy*dy<=(20*20))
console.log("true");
}*/
myObstacles.push(new component(30, height, "green", x, 0));
myObstacles.push(new component(30, x - height - gap, "green", x, height
+ gap));

}
for (i = 0; i < myObstacles.length; i += 1) {

myObstacles[i].x += -1;
myObstacles[i].update();
testX=deltaX;
testY=deltaY;

if (deltaX<myObstacles[i].x)
testX=myObstacles[i].x;

if(deltaX>myObstacles[i].x+myObstacles[i].width)
testX=myObstacles[i].x+myObstacles[i].width;

if (deltaY<myObstacles[i].y)
testY=myObstacles[i].y;

if(deltaY>myObstacles[i].y+myObstacles[i].height)
testY=myObstacles[i].y+myObstacles[i].height;

distanceX=deltaX-testX;
distanceY=deltaY-testY;
console.log("X"+distanceX);
console.log("Y"+distanceY)
dist=Math.sqrt(distanceX*distanceX+distanceY*distanceY);
console.log("d"+dist);
if(dist<15)
myGameArea.stop();
else{
//console.log("false");
}

You might also like