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);
Подскажите, в чем беда? Уже третий день голову ломаю.
