Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.12.2015, 16:22
Интересующийся
Отправить личное сообщение для scorpion95 Посмотреть профиль Найти все сообщения от scorpion95
 
Регистрация: 01.08.2015
Сообщений: 24

Канвас, пересечение двух квадратов
window.onload = init;

var canvas;
var ctx;
var canvas_objects = [];

function init(){
	canvas = $("#canvas");
	canvas.attr("width", $(".game_stage").width());
	canvas.attr("height", $(".game_stage").height());
	
	ctx = canvas.get(0).getContext("2d");
	
	canvas.bind("click", click_canvas);
	
	block1 = new Rectangle(1, 700, 300, "green", click_block1);
	block2 = new Rectangle(2, 50, 250, "yellow", click_block2);
}

function click_canvas(event){
	for (var i = 0; i < canvas_objects.length; i++){
		if (check_in(canvas_objects[i]) == true){
			 if (canvas_objects[i].click_function) canvas_objects[i].click_function();
		}
	}
}

function check_in(element){
	switch (element.type) {
		case "rectangle":
			if (((event.pageX - canvas.offset().left) > element.x && (event.pageX - canvas.offset().left) < (element.x + element.width)) && ((event.pageY - canvas.offset().top) > element.y && (event.pageY - canvas.offset().top) < (element.y + element.height))){
				return true;
			}
			else
				return false;
		break
		
		case "circle":
			if ((Math.sqrt(Math.pow(element.x - (event.pageX - canvas.offset().left), 2) + Math.pow(element.y - (event.pageY - canvas.offset().top), 2))) <= element.radius){
				return true;
			}
			else
				return false;
		break
	}
}

function click_block1(){
	this.move("left");
}

function click_block2(){
	this.move("right");
}

function check_intersection_objects(object1){
	for (var i = 0; i < canvas_objects.length; i++){
			if (canvas_objects[i].id != object1.id) 
				if ( (object1.x - 1 >= canvas_objects[i].x && object1.x - 1 <= canvas_objects[i].x + canvas_objects[i].width && object1.y - 1 >= canvas_objects[i].y && object1.y - 1 <= canvas_objects[i].y + canvas_objects[i].height) || (object1.x + object1.width + 1 >= canvas_objects[i].x && object1.x + object1.width + 1 <= canvas_objects[i].x + canvas_objects[i].width && object1.y + object1.height + 1 >= canvas_objects[i].y && object1.y + object1.height + 1 <= canvas_objects[i].y + canvas_objects[i].height) || (object1.x + object1.width + 1 >= canvas_objects[i].x && object1.x + object1.width + 1 <= canvas_objects[i].x + canvas_objects[i].width && object1.y - 1 >= canvas_objects[i].y && object1.y - 1 <= canvas_objects[i].y + canvas_objects[i].height) || (object1.x + 1 >= canvas_objects[i].x && object1.x + 1 <= canvas_objects[i].x + canvas_objects[i].width && object1.y + object1.height - 1 >= canvas_objects[i].y && object1.y + object1.height - 1 <= canvas_objects[i].y + canvas_objects[i].height) )
					return true;
				else
					return false;
	}
	
}

function check_intersection_border(object1){
	if ( object1.x - 1 <= 0 || object1.x + 1 >= canvas.attr("width") || object1.y - 1 <= 0 || object1.y - 1 >= canvas.attr("height") || object1.x + object1.width + 1 <= 0 || object1.x + object1.width + 1 >= canvas.attr("width") || object1.y + object1.height - 1 <= 0 || object1.y + object1.height - 1 >= canvas.attr("height") ) 
		return true;
	else
		return false;
}

function switch_direction(direction){
	var top_bias;
	var right_bias;
	
	switch (direction){
		case "top":
			top_bias = -1; right_bias = 0;
			break;
		case "bottom":
			top_bias = 1; right_bias = 0;
			break;
		case "right":
			top_bias = 0; right_bias = 1;
			break;
		case "left":
			top_bias = 0; right_bias = -1;
			break;
		case "top-right":
			top_bias = -1; right_bias = 1;
			break;
		case "top-left":
			top_bias = -1; right_bias = -1;
			break;
		case "bottom-right":
			top_bias = 1; right_bias = 1;
			break;
		case "bottom-left":
			top_bias = 1; right_bias = -1;
			break;
	}
	
	return { top: top_bias, right: right_bias };
}


var Rectangle = function(id, x, y, color, click_function){
	this.id = id;
	this.x = x;
	this.y = y;
	this.color = color;
	this.width = 100;
	this.height = 100;
	this.type = "rectangle";
	this.click_function = click_function;
	
	ctx.fillStyle = color;
	ctx.fillRect(this.x, this.y, this.width, this.height);
	
	canvas_objects.push(this);
}

Rectangle.prototype.move = function(direction){
	var x = this.x;
	var y = this.y;
	var width = this.width;
	var height = this.height;
	var color = this.color;
	var object = this;
	var top_bias;
	var right_bias;
	
	direction = switch_direction(direction);
	
	if (check_intersection_objects(object) == false && check_intersection_border(object) == false)
		mooving = setInterval(function(){
			if (check_intersection_objects(object) == true || check_intersection_border(object) == true){
				console.log(object);
				clearInterval(mooving);
			}
			
			ctx.clearRect(x, y , width, height);

			x = x + 1 * direction.right;
			y = y + 1 * direction.top;
			
			object.x = x;
			object.y = y;
			
			ctx.fillStyle = color;
			ctx.fillRect(x, y, width, height);	
			
			for (var i = 0; i < canvas_objects.length; i++){
				if (canvas_objects[i].id == object.id)
					canvas_objects[i] = object;
			}
		}, 50);
}



var Circle = function(x, y, color, radius, click_function){
	this.x = x;
	this.y = y;
	this.radius = radius;

	this.type = "circle";
	this.click_function = click_function;
	
	ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'red';
    ctx.stroke();
	
	canvas_objects.push(this);
}


В общем, что делает этот код: создаю два квадрата с заданными параметрами (координаты, цвет, айди, функция при клике). Когда нажимаешь на один из квадратов - он начинает двигаться. Когда он соприкасается с другим квадратом - движение прерывается.

Но когда два квадрата одновременно двигаются, то останавливается лишь тот квадрат, по которому я щелкнул вторым, а первый продолжает движение.

if (check_intersection_objects(object) == false && check_intersection_border(object) == false)
		mooving = setInterval(function(){
			if (check_intersection_objects(object) == true || check_intersection_border(object) == true){
				console.log(object);
				clearInterval(mooving);
			}
			
			ctx.clearRect(x, y , width, height);

			x = x + 1 * direction.right;
			y = y + 1 * direction.top;
			
			object.x = x;
			object.y = y;
			
			ctx.fillStyle = color;
			ctx.fillRect(x, y, width, height);	
			
			for (var i = 0; i < canvas_objects.length; i++){
				if (canvas_objects[i].id == object.id)
					canvas_objects[i] = object;
			}
		}, 50);

Поставил тут console.log(object), чтоб отследить, видит ли код пересечение для первого объекта - видит, мать его, но не срабатывает почему-то clearInterval(mooving);

Подскажите, в чем беда? Уже третий день голову ломаю.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
SDoc и документация на двух языках (Рус, Англ). Как реализовать? FINoM Оффтопик 7 30.09.2014 17:18
Пересечение и разность двух массивов harold Общие вопросы Javascript 9 18.12.2013 21:41
как сделдать меню из двух калонок как в bestchange.ru Андрей Лебедев Элементы интерфейса 2 21.01.2013 10:32
Как найти точки соприкосновения двух объектов в RaphaelJS Fatalityap Библиотеки/Тулкиты/Фреймворки 3 03.08.2012 16:33
MySQl дата между двух дат mycoding Серверные языки и технологии 8 14.02.2011 15:23