Канвас, пересечение двух квадратов
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); Подскажите, в чем беда? Уже третий день голову ломаю. |
Часовой пояс GMT +3, время: 23:25. |