Дзен-трансгуманист, спасибо, буду разбираться
|
вот пока то что у меня есть http://learn.javascript.ru/play/8nu3s
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<canvas width="500" height="500"></canvas>
<script>
var canva = document.body.children[0];
var ctx = canva.getContext("2d");
var ball = {
// x:20,
// y:280,
x:50,
y:40,
R:20,
Draw: function (x, y) {
ctx.clearRect(this.x - this.R, this.y - this.R, this.R *2,this.R *2);
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(x,y, this.R,0, (Math.PI / 180)* 360, false);
ctx.fill();
this.y = y;
this.x = x;
}
};
var block = {
width:150,
height:30,
Draw: function (x, y) {
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(x,y,this.width, this.height);
this.y = y;
this.x = x;
}
};
block.Draw(150,100);
var valX = -10 , valY = -10;
var Bl_bottom = block.y + block.height + ball.R ;
var Bl_right = block.x + block.width + ball.R ;
var stop = false;
!function action(){
if(ball.x < 0 + ball.R || ball.x > canva.width - ball.R){
valX = -valX;
};
if(ball.y < 0 + ball.R || ball.y > canva.height - ball.R){
valY = -valY;
}
var x = ball.x + valX;
var y = ball.y + valY;
if((y <= Bl_bottom && y >= block.y - ball.R) && (x >= block.x - ball.R && x <= Bl_right)){
var pos = getPosit();
if(pos == "angle") {
// проверка на столкновение с одним из 4х углов
if(distance(x,y,block.x, block.y + block.height) <= ball.R ||
distance(x,y,block.x, block.y ) <= ball.R
|| distance(x,y,block.x + block.width, block.y + block.height) <= ball.R||
distance(x,y,block.x+ block.width, block.y) <= ball.R){
valY = - valY;
valX = - valX;
return;
}
}
if(pos == "x") {
valX = - valX;
}
if(pos == "y") {
valY = - valY;
}
// return;
};
ball.Draw(x,y);
setTimeout(action,1000/60);
}();
function getPosit() {
var x,y;
if(ball.x <= block.x){
x = "left";
}
else if(ball.x >= block.x + block.width){
x = "right";
}
else x = "on";
if(ball.y >= block.y + block.height){
y = "bottom";
}
else if(ball.y <= block.y){
y = "top";
}
else y = "on";
if((x == "right" || x == "left") && (y == "on")) {
return "x";
}
else if((y == "bottom" || y == "top") && x == "on"){
return "y";
}
else return "angle";
}
function distance(x1,y1,x2,y2){
return Math.sqrt(Math.pow(x2-x1,2) + Math.pow(y2-y1,2));
};
</script>
</body>
</html>
сделал остановку когда новые координаты шарика будут равны углу или внутри угла. |
Дзен-трансгуманист, я понимаю что это уже наглость, но не могу разобраться в твоем коде, какой метод отвечает за рисование шариков которые рисуются на векторе?
|
cyber,
drawPath в области видимости TracerView, строчки 489-500 (потом рисуются линии). Это типа как приватная функция, только вместо контекста this я передаю экземпляр класса явно в аргументе object. |
Я сейчас понял, что трейсер возвращает только путь в виде набора точек, но не возвращает новый вектор движения после всех столкновений. Без этого, конечно, шарик самостоятельно никуда не полетит.
И наверное я неправильно поступил, что мастер-объектом движения сделал вектор [x,y]. Так теряется некоторая точность преобразований, причем, чем больше столкновений за один ход - тем больше потери точности. Надо было хранить и обрабатывать его как [длина,азимут]. Не знаю, дойдут ли у меня руки править это, но, честно говоря, не очень-то хочется, поскольку не люблю поддерживать код, написанный второпях буквально за один день. Такие вещи надо продумывать и делать основательно, а не на коленке. ;) |
Дзен-трансгуманист,хм, не совсем понял как ты расчитываешь расстояние от угла до центра шарика?
|
Дзен-трансгуманист,да вообщем я понимаю как все работает, но у меня проблемы с реализацией из за пробелов в школьной геометрии
Допустим по формуле Math.sqrt(Math.pow(x2-x1,2) + Math.pow(y2-y1,2)); я определил что на шаге n+1 шарик будет внутри блока, то нужно установить такие координаты при которых шарик не пересечет угол. Вроде просто, а не фига не получается . |
Цитата:
|
Цитата:
|
Цитата:
Значить не я один вместо повторение учу что то новое из школьной программы))) П.с я тоже троечником был) |
| Часовой пояс GMT +3, время: 04:47. |