我如何獲得兩個畫布動畫碰撞？

Question

即時通訊設法做一個simpel比賽，我可以在其他巴爾斯球投籃，然後他們消失。我已經設法使動畫工作，我可以拍攝球，但我不知道如何使他們碰撞。

我試圖在72-74行做一些事情，但我得到錯誤「無法讀取屬性'未定義的」。

看到試玩遊戲點擊鏈接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

UPDATE：CODE sample as I promised

對不起，我不得不重寫了很多你的代碼，使事情對我來說更乾淨。我試圖保留你的原名。

線72-74不大的地方，在那裏你可以計算出碰撞;）

我會盡量給你一些提示。

刪除這部分，你不需要它。

console.log("hit space") 
if(fiender[i].y >= skudder[1].y){ 
    alert(); 
}; 

每次你拍，你，這已經是你的函數newskudd()做「kulers的陣列」添加新的子彈。

我想你不想在空間被擊中時殺死你的敵人，但是當一個球遇到另一個球時。

所以在spill()去thrue所有「子彈」，並試圖找出，如果任何敵人被擊中。 ==>每重繪你的程序將測試，如果有什麼被擊中

JS我作出更新：

// constants 

var TILELDIG = Math.floor((Math.random() * 300) + 1); 
var NEW_ENEMY_INTERVAL = 1000; 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 


// basic graphic constructs (prototypes) 

var EntityBall = function (position, color, delta, speed, size) { 
    this.size = size || 10; 
    this.position = position || [0, 0]; 
    this.delta = delta || [0, 0]; 
    this.speed = speed || [0, 0]; 
    this.color = color || "black"; 
}; 


var Kuler = function (position) { 
    EntityBall.call(this, position, "black", [0, -10], [0, 0], 5); 
}; 


var Fiender = function (position) { 
    EntityBall.call(this, position, "blue", [0, 1]); 
}; 


var Skudder = function (position) { 
    EntityBall.call(this, position, "red", [0, 0], [5, 5]); 
} 


// Program constructor 

var Program = function (ctx, canvas) { 
    this.ctx = ctx; 
    this.canvas = canvas; 
    this.init(); 
}; 

// Program inicialization 
Program.prototype.init = function() { 
    // these arrays store living things 
    this.kulers = []; 
    this.fienders = []; 
    this.skudders = []; 
    this.hordeUpdate = null; 

    var player1 = new Skudder([canvas.width*0.5, canvas.height*0.75 ]); 
    this.skudders.push(player1); 
    // here you bind keys for moving main ball (player1) 
    document.addEventListener("keydown", this.player1Actions.bind(this, player1)); 
}; 

// handle player moves 
Program.prototype.player1Actions = function (player1, e) { 
    switch (e.keyCode) { 
     case 37: 
      player1.position[0] -= player1.speed[0]; 
      break; 
     case 39: 
      player1.position[0] += player1.speed[0]; 
      break; 
     case 38: 
      player1.position[1] -= player1.speed[1]; 
      break; 
     case 40: 
      player1.position[1] += player1.speed[1]; 
      break; 
     case 32: 
      this.attack(player1); 
      console.log("hit space"); 
      break; 
    } 
    if(player1.position[0] < 0) { 
     player1.position[0] = 0; 
    } 
    if(player1.position[0] > canvas.width) { 
     player1.position[0] = canvas.width; 
    } 
    if(player1.position[1] < 0) { 
     player1.position[1] = 0; 
    } 
    if(player1.position[1] > canvas.height) { 
     player1.position[1] = canvas.height; 
    } 
}; 

// only spawns bullet, but doesnt calculate collision 
Program.prototype.attack = function (player) { 
    var kulerPosition = [player.position[0], player.position[1]]; 
    var kuler = new Kuler(kulerPosition); 
    this.kulers.push(kuler); 
}; 

// main Program thread (refreshed 60 times per second) 
Program.prototype.refresh = function() { 
    var canvas = this.canvas; 
    this.ctx.clearRect(0, 0, canvas.width, canvas.height); 

    // update all positions (delta move of each entity) 
    var list = [this.kulers, this.fienders, this.skudders]; 
    for (var i = 0; i < list.length; i++) { 
     for (var j = 0; j < list[i].length; j++) { 
      // find new position 
      list[i][j].position[0] += list[i][j].delta[0]; 
      list[i][j].position[1] += list[i][j].delta[1]; 

      // delete entity if it is out of canvas (else all browser memory will be eaten by blue balls) 
      if (list[i][j].position[1] > canvas.height || list[i][j].position[1] < 0 || list[i][j].position[0] > canvas.width || list[i][j].position[0] < 0) { 
       list[i].splice(j, 1); // this delete it 
      }; 
     } 
    } 

    // calculate bullets collision 
    for (var i = 0; i < this.kulers.length; i++) { // go thrue all bullets 
     for (var j = 0; j < this.fienders.length; j++) { // for each bullet go thrue all enemies 
      // find if this enemy is being hit 
      // (5 + 2.5), 5 is r of blue ball, 2.5 is r of black ball, you dont want to find perfect hit, scratches counts too 
      if ((this.kulers[i].position[0] >= this.fienders[j].position[0] - (5 + 2.5) && this.kulers[i].position[0] <= this.fienders[j].position[0] + (5 + 2.5)) && this.kulers[i].position[1] <= this.fienders[j].position[1]) { 
       this.kulers.splice(i, 1); // delete bullet that hits 
       this.fienders.splice(j, 1); // delete dead enemy 
       break; 
      } 
     } 
    } 

    // after all removes, draw all living entities 
    for (var i = 0; i < list.length; i++) { 
     for (var j = 0; j < list[i].length; j++) { 
      this.ctx.fillStyle = list[i][j].color; 
      ctx.beginPath(); 
      ctx.arc(list[i][j].position[0], list[i][j].position[1], list[i][j].size, 2 * Math.PI, 0); 
      ctx.closePath(); 
      ctx.fill(); 
     } 
    } 

    // repeat 
    requestAnimationFrame(this.refresh.bind(this)); 
}; 

// this will start blue enemies coming 
Program.prototype.hordeComing = function() { 
    this.hordeUpdate = setInterval(this.addEnemy.bind(this), NEW_ENEMY_INTERVAL); 
}; 

// this spawn enemy 
Program.prototype.addEnemy = function() { 
    var position = [Math.floor(Math.random() * canvas.width/2) * 2, 0]; 
    var fiender = new Fiender(position); 
    this.fienders.push(fiender); 
}; 


// run program with params 

var program1 = new Program(ctx, canvas); 
program1.refresh(); 
program1.hordeComing(); 

Answer 2

這就是問題之行：

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]。

您需要提供更多信息才能獲得更準確的答案。