javascript - 如何让两个 Canvas 动画发生碰撞？

Question

我正在尝试制作一个简单的游戏，我可以向其他球射击，然后它们就会消失。我已经设法使动画正常工作，并且我可以射击球，但我不知道如何使它们碰撞。

我尝试在第 72-74 行执行某些操作，但收到错误“无法读取未定义的属性 'y'”。

要查看游戏演示，请点击链接DEMO

var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    var tileldig = Math.floor((Math.random() * 300) + 1);

    var kuler = [
        {r: 10, x: canvas.width/2, y: canvas.height-100, f: "red", dy:0},
        //{r: 50, x: tileldig, y: 50, vx:0 , vy: 3, f: "green"},
    ]



    var fiender = [
        {r: 10, x: tileldig, y: 50, vx:0 , vy: 1, },
    ]
    var skudder = [
        {r: 10, x:0+kuler.x, y: 0+kuler.y, f: "black"},
    ]




    function spill() {

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < kuler.length; i++) {
            kuler[i].x += 0;
            kuler[i].y += kuler[i].dy;


            ctx.fillStyle = kuler[i].f;
            ctx.beginPath();
            ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2*Math.PI, 0);
            ctx.closePath();
            ctx.fill();


            if (kuler[0].x >= canvas.width-kuler[0].r) {
                kuler[0].x = canvas.width-kuler[0].r
            };
            if (kuler[0].x <= 0+kuler[0].r) {
                kuler[0].x = 0+kuler[0].r
            };
            if (kuler[0].y >= canvas.height-kuler[0].r) {
                kuler[0].y = canvas.height-kuler[0].r
            };
            if (kuler[0].y <= 0+kuler[0].r) {
                kuler[0].y = 0+kuler[0].r
            };


        };


        document.onkeydown = function tast (e) {            
          switch (e.keyCode) {
            case 37:
              kuler[0].x -= 10;
              break;
            case 39:
              kuler[0].x += 10;
              break;
            case 38:
              kuler[0].y -= 10;
              break;
            case 40:
              kuler[0].y += 10;
              break;
             case 32:
              newskudd()
              console.log("hit space")
              if(fiender[i].y >= skudder[1].y){
                alert();
              };
              break;
          }
        };

        for (var i = 0; i < fiender.length; i++) {
            ctx.fillStyle = "blue";
            ctx.beginPath();
            ctx.arc(fiender[i].x, fiender[i].y, fiender[i].r, 2*Math.PI, 0);
            ctx.closePath();
            ctx.fill();

            fiender[i].y += fiender[i].vy;

            if (fiender[i].y >= canvas.height) {
                fiender.splice(i,1);
                console.log("ute");
            };  
        }



        requestAnimationFrame(spill);
    }

    function newskudd () {
        var nyttskudd = 
        {x:kuler[0].x, y:kuler[0].y, r:5, dy:-5, f:"black"};
        kuler.push(nyttskudd);
    };

    setInterval(function(){
        fiender.push({r: 10, x: Math.floor((Math.random() * 300) + 1), y: 0, vx:0 , vy: 1, f: "green"});
    }, 1000);

    spill();


    /*if (circles.x >= canvas.height- circles.r){
        circles.splice(i,1);
    }*/

Answer 1

这是问题行:

if(fiender[i].y >= skudder[1].y){

您在此处的循环之外，因此 fiender[i] 没有任何意义。最快的解决方法是使用 for 循环遍历此处的所有 fiender 项目，就像您随后执行 5-6 行一样。像这样:

for (var i = 0; i < fiender.length; i++) {
    if(fiender[i].y >= skudder[1].y){
        alert();
    };
}

另外，skudder[1] 似乎不存在，也许应该是 skudder[0]。

您需要提供更多信息才能获得更准确的答案。