Как мне заставить две холсты-анимации столкнуться?

Question

im пытается сделать игру в стиле simpel, где я могу стрелять мячами в другие бальзы, а затем они исчезают. мне удалось заставить анимацию работать, и я могу снимать мячи, но я не знаю, как заставить их столкнуться.

Я попытался сделать что-то в строке 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

UPDATE:CODE sample as I promised

К сожалению, мне пришлось переписать много кода, чтобы сделать вещи более чистым для меня. Я пытался сохранить ваши имена.

линия 72-74 не место, где вы можете рассчитать коллизию;)

Я попытаюсь дать вам несколько советов.

Удалить эту часть, вам это не нужно.

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

Каждый раз, когда вы снимаете, вы добавляете новую пулю в «Массив kulers», который уже сделано в функции newskudd().

Я думаю, вы не хотите убивать своего врага при ударе пространства, но когда один мяч встречает другого.

Итак, в spill() пройдите все «пули» и попытайтесь выяснить, попадает ли кто-либо из врагов. ==> каждый перерисовывать ваша программа будет проверять, если что-то удара

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] не имеет никакого смысла. Самое быстрое исправление будет состоять в том, чтобы перебирать все детали fiender здесь, используя цикл for, точно так же, как вы делаете 5-6 строк. Как это:

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

Кроме того, skudder[1], кажется, не существует, может быть, это должно быть skudder[0].

Чтобы получить более точные ответы, вам необходимо предоставить дополнительную информацию.