Question

我很难理解本教程。 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>

这是jsfiddle链接 http://jsfiddle.net/sinner019/0k9cnLce/

我不明白这个牵引参数entity1和entity2是如何工作的。你能帮我理解吗。

Answer 1

这是毕达哥拉斯定理：http://en.wikipedia.org/wiki/Pythagorean_theorem

它用于根据X和Y值的差异获得距离。

vx是x值（或X行进距离）的差异

vy是y值的差异

因此它返回平方根vx平方+ vy平方因此解决函数：

距离^ 2 = x ^ 2 + y ^ 2

请帮我理解一下html5游戏的代码

1 个答案: