0

I am having a trouble to understand this tutorial. https://www.youtube.com/watch?v=F2Dc-JlwgN4 .

<canvas id="ctx" width="500" height="500" style="border:1px solid #000000"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var height = 500;
var width = 500;
var message = "bouncing";
var player = {
    x:50,
    speedX:30,
    y: 40,
    speedY: 5,
    name: "P",
};
function getDistanceBetweenEntity(entity1, entity2){
    var vx = entity1.x - entity2.x;
    var vy = entity1.y - entity2.y;
    return Math.sqrt (vx*vx+vy*vy);
}

function testCollisionEntity(entity1, entity2){
    var distance = getDistanceBetweenEntity(entity1, entity2);
    return distance < 30;
}

var enemyList = {};
enemey("E1", 150, 350, 10, 15, "E1");
enemey("E2", 250, 350, 10, -15, "E2");

function enemey(id,x,y,speedX,speedY, name) {
var enemy2 = {
    x: x,
    speedX:speedX,
    y: y,
    speedY: speedY,
    name: name,
    id:id,
};
    enemyList[id] = enemy2;
}
setInterval(update,40);
function updateEntity(something){
    something.x += something.speedX;
    something.y += something.speedY;
    ctx.fillText(something.name, something.x, something.y);

    if (something.x < 0 || something.x > width) {
        console.log(message);
        something.speedX =- something.speedX;
    }
    if (something.y < 0 || something.y > height) {
        console.log(message);
        something.speedY =- something.speedY;
    }

};
function update () {
ctx.clearRect(0,0,height,width);
for (var i in enemyList) {
    updateEntity(enemyList[i]);
    var isColliding = testCollisionEntity(player, enemyList[i]);
    if (isColliding){
        console.log('colliding!')
    }
}
    updateEntity(player);
}
</script>

Here is the jsfiddle link http://jsfiddle.net/sinner019/0k9cnLce/

I do not understand how to this tow parameter entity1 and entity2 works. Would you please help me to understand.

3
  • This is simply Pythagoras, get the variation of distance between 2 points for x and y, and return the hypotenuse , what exactly do you not understand?
    – juvian
    Apr 20, 2015 at 17:40
  • It is calculating the length of a hypotenuse of a right triangle which is equivalent to calculating the distance between two points on a 2d cartesian coordinate system.
    – Shashank
    Apr 20, 2015 at 17:40
  • I cant understand which value passed into entity1 and entity2. Please take a look on full code jsfiddle.net/sinner019/0k9cnLce
    – Shuvo
    Apr 21, 2015 at 8:11

1 Answer 1

1

This is the Pythagorean Theorem: http://en.wikipedia.org/wiki/Pythagorean_theorem

It's used to get the distance based on the difference in X and Y values.

vx is the difference in the x value (or the X distance travelled)

vy is the difference in the y value

so it returns the Square Root of vx squared + vy squared thus solving the function:

distance^2 = x^2 + y^2

2
  • 1
    I need to understand how to entity1 and entity2 parameter works. Would you please explain it to me.
    – Shuvo
    Apr 20, 2015 at 22:01
  • 1
    @Shuvo entity1 and entity2 are probably badly named variables - they look like they are objects referencing the position of those entities but they might as well be the whole entities themselves - somewhere in the code you call this function and pass those 2 entities and the function returns to you the distance of the hypotenuse based on those 2 entities position - you could do a console.log and find out yourself by inspecting them - other than that we can't help and shouldn't help you any further than that - you should read up on basics of Javascript first before attempting to build a game Apr 20, 2015 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.