Задать вопрос
@Afafks123132132165
javascript

Почему столкновение работает неправильно?

Делаю свою библиотеку для того что бы быстрее делать игры.Написал вот тот код в библиотеке он не работает как надо действие происходит вне зависимости выполнения условия как это исправить?
function collision(x,y,x1,y1,w,h,w1,h1,events,events1) {
  if(x + w >= x1 && x <= x1+w1){
    if(y + h >= y1 && y <= y1+h1){ 
    	events;
    	events1;
    }
  }
}

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
</head>
<body>
<style type="text/css">
	#canvas{
		border:1px solid black;
	}
</style>
<canvas id = "canvas" width = "320" height = "240"></canvas>
<script type="text/javascript" src="engine.js"></script>
<script type="text/javascript">
  document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  enemy = [];
  player = [];
   
  player.push({x:0,y:0});
  enemy.push({x:144,y:104});

  document.addEventListener("mousemove",function(e){
  	for(i in player){
  	  player[i].x = e.pageX;
  	  player[i].y = e.pageY;
    }
  });

  function game(){
  	ctx.clearRect(0,0,320,240);
  	for(i in player){
      ctx.fillRect(player[i].x,player[i].y,32,32);
  	}

  	for(i in enemy){
      ctx.fillRect(enemy[i].x,enemy[i].y,32,32);
      for(j in player){
      	collision(enemy[i].x,enemy[i].y,player[j].x,player[j].y,32,32,32,32,player.splice(j,1),enemy.splice(i,1));
      }
  	}
  }

  setInterval(game,20);
</script>
</body>
</html>
  • Вопрос задан
  • 263 просмотра
3 комментария
Подписаться 1 Средний 3 комментария
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Проблема в этой строке: 
collision(enemy[i].x,enemy[i].y,player[j].x,player[j].y,32,32,32,32,player.splice(j,1),enemy.splice(i,1));
В функцию передаётся не действие, которое надо выполнить в случае — а его результат. Вот эти
player.splice(j,1)
enemy.splice(i,1)
выполняются сразу, при первом же обращении — и не останется ни игроков ни врагов. Ядерная зима.

Чтобы не выполнять их сразу же, оберните эти действия в функцию и передавайте функцию в collision(), чтобы там её вызвали только после проверки условий.

Ещё можно не передавать сотню параметров, а договориться, что у объектов игроков и врагов всегда будут свойства
x, y, w, h. Так можно передавать сами объекты целиком:
function collision(A, B, onCollision) {
  if (
    A.x + A.w >= B.x 
    && A.x <= B.x + B.w
    && A.y + A.h >= B.y
    && A.y <= B.y + B.h
  ) { 
    onCollision(); // <-- только тут выполнятся действия
  }
}

// ...
player.push({x: 0, y: 0, w: 32, h: 32});
enemy.push({x: 144, y: 104, w: 32, h: 32});
// ...
collision(
  enemy[i],
  player[j],
  function() {
    player.splice(j,1);
    enemy.splice(i,1);
  }
);

Рабочий jsFiddle
Ответ написан
9 комментариев
9 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн главной страницы в figma
23 нояб. 2024, в 22:03
3000 руб./за проект
Сделать дизайн сайта по примеру
23 нояб. 2024, в 21:53
30000 руб./за проект
Создать макет сайта в Figma
23 нояб. 2024, в 21:49
1000 руб./в час
Ещё заказы