Как узнать когда увеличить или уменьшить координаты объекта при столкновениис другим?

Question

[historydev]

Здесь я попытался реализовать это, но одна сторона барахлит и объект целенаправленно, не контролируемо движется сквозь другой.
Должно работать так:
Если объект столкнулся сверху - отнимаем Y, если снизу - прибавляем Y.
Аналогично с X.
Спасибо заранее.

if(blob.pos.x+blob.r/2+10 > block[i].pos.x && blob.pos.x < block[i].pos.x+blockbg.width+blob.r-10 && blob.pos.y > block[i].pos.y-blob.r+10 && blob.pos.y < block[i].pos.y+blockbg.height+blob.r-10) {
        mouseX = blob.pos.x;
        mouseY = blob.pos.y;
    }

Comments

[0ffff0]

А почему сталкивается блоб, а менять позицию надо мыши?
Как это должно выглядеть?

[historydev]

0ffff0, я пробовал менять позицию игрока,оно вечно в одну сторону было,а здесь оно просто отворачивает игрока(Он за мышью следует)

[0ffff0]

Могу только скинуть для примера ссылку где подобное реализовано.
Вот. Мяч натыкается на стену и отскакивает.

[historydev]

0ffff0, это не то,у меня такой скрипт под границы мира, если я пишу его под блок,игрок стоит на месте т.к. условие соблюдено X/Y больше и меньше одновременно.

[0ffff0]

HistoryART, набор бессвзностей, не знаю что ответить даже

[historydev]

0ffff0, я нашёл способ остановить его,но если пишу else { .. speed = 5; }
Оно работает всегда

if(blob.pos.x+blob.r/2+25 > block[i].pos.x && blob.pos.x < block[i].pos.x+blockbg.width+blob.r && blob.pos.y > block[i].pos.y-blob.r && blob.pos.y < block[i].pos.y+blockbg.height+blob.r) {
				speed = 0;
			}

[Александр Алексеев]

testCollision:function(rectangle) {
    if (this.top > rectangle.bottom || this.right < rectangle.left || this.bottom < rectangle.top || this.left > rectangle.right) {
      return false;
    }

    return true;
  }

[0ffff0]

Александр Алексеев, не пишите else когда в условии есть ||, а пишите несколько if

if(a>b||c>d){
speed = 0
}
if(a<b||c<d){
speed = 5;
}

[Александр Алексеев]

0ffff0, если целевой объект "твердый" и от него надо отскакивать то может быть
если он "приз" который надо съесть? если он еще что то? для каждого свою серию if писать?
может лучше когда есть коллизия проверять цель и уже вызывать нужные обработчики?

[0ffff0]

Не в этом дело, ну как объяснить?
Абстрагируйся, представь что ты тупой компилятор и не понимаешь, чего от тебя хотел этот программист, пройдись по условию, где есть оператор "или" и скомпилируйся (по игрушечному)

if(a>b||c>d){
сделать что-то одно
}else
{
сделать что-то другое

Из двух выражений стоящих в условии интерпретатор джаваскрипт выберет первое и если оно не выполняется, то пойдет по ветке else остальные он даже читать не будет
}

[Александр Алексеев]

0ffff0, именно! поэтому когда на сцене овердохрена объектов, не надо обрабатывать все "или" со всеми объектами
достаточно одного да - коллизии нет

[historydev]

Александр Алексеев, какое условие прописать, чтобы при остановке во время столкновения, он мог отлипнуть от объекта?

[historydev]

Александр Алексеев, тобиш продолжал движение не заходя за границы

[Александр Алексеев]

нужно ввести игроку еще 2 переменные oldX и oldY
и в функции отрисовки игрока или всей сцены вначале менять их на координаты игрока, а потом увеличивать координаты игрока (или уменьшать)
получим текущие координаты и координаты на предыдущем кадре
так можно легко узнать направление полета по x и у
например if (x - oldX < 0) - игрок летит влево и отскочить должен в обратную сторону

[historydev]

Александр Алексеев, я попытался сделать так, не работает, я не понял про oldX/Y, можно пример с объяснением?

if(blob.pos.x+blob.r/2+25 >= block[i].pos.x && blob.pos.x <= block[i].pos.x+blockbg.width+blob.r && blob.pos.y >= block[i].pos.y-blob.r && blob.pos.y <= block[i].pos.y+blockbg.height+blob.r) {
				if(blob.pos.x+blob.r/2+25 >= block[i].pos.x) {
					blob.pos.x = blob.pos.x-blob.r;
				}
				if(blob.pos.x <= block[i].pos.x+blockbg.width+blob.r) {
					blob.pos.x = blob.pos.x+blob.r;
				}
				if(blob.pos.y >= block[i].pos.y-blob.r) {
					blob.pos.y = blob.pos.y-blob.r;
				}
				if(blob.pos.y <= block[i].pos.y+blockbg.height+blob.r) {
					blob.pos.y = blob.pos.y+blob.r;
				}
			}

[Александр Алексеев]

в es5 только

function() { "use strict" 
  var controller, display, game;

  controller = {
    down:false,
    left:false,
    right:false,
    up:false,

    keyUpDown:function(event) {
      var key_state = (event.type == "keydown")?true:false;
      switch(event.keyCode) {
        case 37: controller.left = key_state; break; 
        case 38: controller.up = key_state; break; 
        case 39: controller.right = key_state; break; 
        case 40: controller.down = key_state; break; 
      }
    }
  };

  
  
  display = {
    buffer:document.createElement("canvas").getContext("2d"), 
    context:document.querySelector("canvas").getContext("2d"), 
    output:document.querySelector("p"), 

    render:function() {
      for (let index = game.world.map.length - 1; index > -1; -- index) {
        this.buffer.fillStyle = (game.world.map[index] == 1)?"#0099ff":"#303840"; 
        this.buffer.fillRect((index % game.world.columns) * game.world.tile_size, Math.floor(index / game.world.columns) * game.world.tile_size, game.world.tile_size, game.world.tile_size);
      }

  
      this.buffer.fillStyle = game.player.color;
      this.buffer.beginPath();
      this.buffer.arc(game.player.x, game.player.y, game.player.radius, 0, Math.PI * 2);
      this.buffer.closePath();
      this.buffer.fill();

      this.context.drawImage(this.buffer.canvas, 0, 0, this.buffer.canvas.width, this.buffer.canvas.height, 0, 0, this.context.canvas.width, this.context.canvas.height);

      this.output.innerHTML = "tile_x: " + game.player.tile_x + "<br>tile_y: " + game.player.tile_y + "<br>map index: " + game.player.tile_y + " * " + game.world.columns + " + " + game.player.tile_x + " = " + String(game.player.tile_y * game.world.columns + game.player.tile_x);
    },

    
    resize:function(event) {
      var client_height = document.documentElement.clientHeight;
      display.context.canvas.width = document.documentElement.clientWidth - 32;
      if (display.context.canvas.width > client_height) {
        display.context.canvas.width = client_height;
      }
      
      display.context.canvas.height = Math.floor(display.context.canvas.width * 0.5625);

      display.render();
    }
  };

  
  game = {
    counter:Math.random() * 100,

    player: {
      color:"#ff9900",
      radius:8,
      tile_x:undefined,
      tile_y:undefined,
      velocity_x:0,
      velocity_y:0,
      x:160,
      y:90
    },

    world: {
      columns:16,
      rows:9,
      tile_size:20,
      map:[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,
           0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
           0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
           0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
           1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
           0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
           1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
    },

    loop:function() {
      if (controller.down) {
        game.player.velocity_y += 0.25;
      }

      if (controller.left) {
        game.player.velocity_x -= 0.25;
      }

      if (controller.right) {
        game.player.velocity_x += 0.25;
      }

      if (controller.up) {
        game.player.velocity_y -= 0.25;
      }

      if (game.player.x - game.player.radius < 0) {
        game.player.velocity_x = 0;
        game.player.x = game.player.radius;
      } else if (game.player.x + game.player.radius > display.buffer.canvas.width) { 
        game.player.velocity_x = 0;
        game.player.x = display.buffer.canvas.width - game.player.radius;
      }

      if (game.player.y - game.player.radius < 0) {
        game.player.velocity_y = 0;
        game.player.y = game.player.radius;
      } else if (game.player.y + game.player.radius > display.buffer.canvas.height) {
        game.player.velocity_y = 0;
        game.player.y = display.buffer.canvas.height - game.player.radius;
      }

      game.player.x += game.player.velocity_x;
      game.player.y += game.player.velocity_y;

      game.player.velocity_x *= 0.9;
      game.player.velocity_y *= 0.9;

      game.player.tile_x = Math.floor(game.player.x / game.world.tile_size);
      game.player.tile_y = Math.floor(game.player.y / game.world.tile_size);
      game.world.map[game.player.tile_y * game.world.columns + game.player.tile_x] = 0;


      game.counter --;

      if (game.counter < 0) {
        game.counter = Math.random() * 125;
        game.world.map[Math.floor(Math.random() * game.world.map.length)] = 1;
      }

      display.render();

      window.requestAnimationFrame(game.loop);
    }
  };

  display.buffer.canvas.height = 180;
  display.buffer.canvas.width = 320;

  window.addEventListener("resize", display.resize);
  window.addEventListener("keydown", controller.keyUpDown);
  window.addEventListener("keyup", controller.keyUpDown);

  display.resize();
  game.loop();
})();

[historydev]

Александр Алексеев, я тупой,можно просто кусок кода который решит проблему?Если ещё под мои переменные подточите будет в идеале,но я готов идти на три буквы за такую наглость,извините ^^Я просто js юзал основы в вёрстке и это максимум, вот..

[historydev]

Александр Алексеев, мне под ес не нужно, у меня компилятор под андроид, в нём хромиум веб обрабатывает.

[Александр Алексеев]

HistoryART, посмотрите любой урок по коллизиям для любого языка
на ютубе их валом

[historydev]

Александр Алексеев, я искал,я нашёл только как отследить,а то что мне нужно я не нашёл

[historydev]

Александр Алексеев,

function Blob(x,y,r) {
	this.pos = createVector(x,y);
	this.oldX = this.pos.x;
	this.oldY = this.pos.y;
	this.r = r;
	
	this.update = function(speed) {
		var vel = createVector(mouseX-width/2,mouseY-height/2);
		vel.setMag(speed);
		this.pos.add(vel);
	}
	
	this.show = function() {
		image(player,this.pos.x-this.r,this.pos.y-this.r, this.r*2, this.r*2);
	}
	
	this.hp = function() {
		image(playerhp, this.pos.x-playerhp.width/6, this.pos.y+this.r, playerhp.width/5,playerhp.height/3);
		image(playerhpborder, this.pos.x-playerhp.width/6, this.pos.y+this.r, playerhpborder.width/3,playerhpborder.height/3);
	}
	
}



//Обработчик

if(blob.pos.x - blob.oldX > block[i].pos.x+blockbg.width) { 				
blob.pos.x = block[i].pos.x+blockbg.width+blob.r; 			
}

[0ffff0]

desk