Canvas задача 2


2
Как мога да оправя топчето да не изглежда като няколко едно в друго?
http://jsfiddle.net/Mr6QG/9/



Отговори



2

Здравей,

за целта най-лесно е да добавиш 2 променливи (вместо update = 5):

- updateX = 5;
- updateY = -5;
 

Съответно ще имаш:

x += updateX;
y += updateY;
 
В условните конструкции, просто променяш update със съответния му:
 
    if (x+r >= 530) {
        update = -5; // тук трябва да стане updateX = -5;
    }
 

Краен резултат: http://jsfiddle.net/Mr6QG/11/

Препоръчително е стойностите като 530, 220, да ги изваждаш в някакви променливи със смислени имена, тъй като е трудно човек да се ориентира какво означавам и от къде идвам. :)

Поздрави!


от martin.nikolov (4535 точки)


0
Да изпреварих те и се сетих.Мерси!

от TodorDimitrov (757 точки)


4
Здравей, колега, това че топчето ти се показва два пъти е заради този ctx.stroke(), който правиш в следната функция:
function moveBall() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.strokeRect(180, 180, 350, 250);
ctx.stroke(); 
    drowBall(x, y, r, from, to, clock);
 
След като затриеш то отново строуква натрупания до момента path, след последното  beginPath(); А метода сstrokeRect() си строуква сам,  няма нужда да му казваш изрично после stroke(), така че това ти е излишно. На другото колегата Мартин ти е отговорил Успех.



0
Благодаря не бях се сетил!

от TodorDimitrov (757 точки)


2

Добре аз за да де отварям нова тема - искам да попитам - някой може ли да ми каже защо топчето ми излиза извън canvas-a когато прави проверка дали съм достигнал горната или лявата част на canvas-a ?

http://jsfiddle.net/nzhul/yD2VR/

Пробвах да направя проверката да не е 

if (x + r <= 0) {
                xShift+=2;
            }
 
А да бъде примерно
if (x + r <= 30) {
                xShift+=2;
            }

И резултата е че топчето започва да се движи по-бързо и пак си излиза извън canvas-a


от nzhul (3415 точки)


0
if (x + r >= w) { xShift=-2; } if (x <= r) { xShift=2; } if (y +r > h) { yShift=-2; } if (y <= r) { yShift=2; }

от TeodorTunev (3061 точки)

0
Не += или -= , а само равно защото иначе ще забързва много

от TeodorTunev (3061 точки)



3
Едно решение и аз да добавя. Мисля, че се получи доста плавно движение.
http://jsfiddle.net/stoianpp/v78x2/1/

от stoianpp (415 точки)


2

На мен това много ми приличаше на Пинг-понг и реших просто да пробвам да направя един. Ето тук може да се разгледа - ПингПонг

Сигурно има разни бъгове, а и може да се добави функционалност за нова игра и разни такива, но за сега толкова. ; )


от lostm1nd (846 точки)


0
Това е моето решение, мисля че се получи доста добре, даже бях толкова доволен от себе си, че го гледах 5 минути и му се кефех :D
http://jsbin.com/qiyoyawe/1/edit

от half.human (242 точки)


0
Здравейте!
Ето го и моето решение: http://jsfiddle.net/LERRY/wNRV5/
Можете ли да ми кажете защо забива така? При постоянен refresh се вижда, че топчето се движи, но определено не го прави така, както трябва.
Благодаря предварително!

от LERRY (582 точки)


0
Получава се stack overflow, защото в requestAnimationFrame подаваш извикваща се функция. Махни скобите след animationFrame и ще стане.

от stinger907 (307 точки)

0
Благодаря! Така се получи. :)

от LERRY (582 точки)