JavaScriptでテキストが浮遊する動き

画面内を浮遊するテキストを作っているのですがブラウザの枠内からはみ出ないようにしたいです。
画面の上と左は大丈夫なのですが下と右がはみ出てしまいます。
ここの部分の修正方法をご教授お願いします。

javascript
1    var movement01 = {x:9, y:2};
2	var movement02 = {x:-2, y:9};
3	var movement03 = {x:9, y:-2};
4	var movement04 = {x:7, y:4};
5
6	$(function redraw(){
7		
8		var winWidth = window.innerWidth;
9		var winHeight = window.innerHeight;
10
11		var posLeft01 = parseFloat($('.maru01').css('left'));
12		var posTop01 = parseFloat($('.maru01').css('top'));
13		var posLeft02 = parseFloat($('.maru02').css('left'));
14		var posTop02 = parseFloat($('.maru02').css('top'));
15		var posLeft03 = parseFloat($('.maru03').css('left'));
16		var posTop03 = parseFloat($('.maru03').css('top'));
17		var posLeft04 = parseFloat($('.maru04').css('left'));
18		var posTop04 = parseFloat($('.maru04').css('top'));
19		
20		posLeft01 += movement01.x;
21		posTop01 += movement01.y;
22		posLeft02 += movement02.x;
23		posTop02 += movement02.y;
24		posLeft03 += movement03.x;
25		posTop03 += movement03.y;
26		posLeft04 += movement04.x;
27		posTop04 += movement04.y;
28
29		if(posLeft01 < 0 || posLeft01 > winWidth){
30			movement01.x *= -1;
31		}
32		if(posTop01 < 0 || posTop01 > winHeight){
33			movement01.y *= -1;
34		}
35		if(posLeft02 < 0 || posLeft02 > winWidth){
36			movement02.x *= -1;
37		}
38		if(posTop02 < 0 || posTop02 > winHeight){
39			movement02.y *= -1;
40		}
41		if(posLeft03 < 0 || posLeft03 > winWidth){
42			movement03.x *= -1;
43		}
44		if(posTop03 < 0 || posTop03 > winHeight){
45			movement03.y *= -1;
46		}
47		if(posLeft04 < 0 || posLeft04 > winWidth){
48			movement04.x *= -1;
49		}
50		if(posTop04 < 0 || posTop04 > winHeight){
51			movement04.y *= -1;
52		}
53
54		$('.maru01').css({left:posLeft01, top:posTop01});
55		$('.maru02').css({left:posLeft02, top:posTop02});
56		$('.maru03').css({left:posLeft03, top:posTop03});
57		$('.maru04').css({left:posLeft04, top:posTop04});
58		
59		setTimeout(redraw, 60);
60	});

行動規範の内容に同意します

回答1件

ベストアンサー

端まで来たかの判定に左上の一点が使われているのが原因です。
$('.maru01').width() とすると .maru01 要素の幅が取れるので、
これを用いて「右端」「下端」判定を行うと改善します。

javascript
1        if(posLeft01 < 0 || posLeft01 + $('.maru01').width() > winWidth){
2            movement01.x *= -1;
3        }
4        if(posTop01 < 0 || posTop01 + $('.maru01').height() > winHeight){
5            movement01.y *= -1;
6        }
7        if(posLeft02 < 0 || posLeft02 + $('.maru02').width() > winWidth){
8            movement02.x *= -1;
9        }
10        if(posTop02 < 0 || posTop02 + $('.maru02').height() > winHeight){
11            movement02.y *= -1;
12        }
13        if(posLeft03 < 0 || posLeft03 + $('.maru03').width() > winWidth){
14            movement03.x *= -1;
15        }
16        if(posTop03 < 0 || posTop03 + $('.maru03').height() > winHeight){
17            movement03.y *= -1;
18        }
19        if(posLeft04 < 0 || posLeft04 + $('.maru04').width() > winWidth){
20            movement04.x *= -1;
21        }
22        if(posTop04 < 0 || posTop04 + $('.maru04').height () > winHeight){
23            movement04.y *= -1;
24        }

■追記: オブジェクト指向を導入した書き方

これ系の「初期値は違うけど同じロジックで動くたくさんのオブジェクト」は、オブジェクト指向を使うとさっぱり書けることが多いです。
これだとliの数が100個とかいっちゃってもそんなにコードを複雑化させずに対応できます。

javascript
1class MovingLi {
2    constructor(selector, movement) {
3        this.element = $(selector);
4        this.movement = movement;
5    }
6    move () {
7        let posLeft = parseFloat(this.element.css('left'));
8        let posTop = parseFloat(this.element.css('top'));
9        posLeft += this.movement.x;
10        posTop += this.movement.y;
11        if(posLeft < 0 || posLeft + this.element.width() > window.innerWidth){
12            this.movement.x *= -1;
13        }
14        if(posTop < 0 || posTop + this.element.height() > window.innerHeight){
15            this.movement.y *= -1;
16        }
17        this.element.css({left:posLeft, top:posTop});
18    }
19}
20
21$(function () {
22    const movingLiArray = [
23        new MovingLi('.maru01', {x:9, y:2}),
24        new MovingLi('.maru02', {x:-2, y:9}),
25        new MovingLi('.maru03', {x:9, y:-2}),
26        new MovingLi('.maru04', {x:7, y:4})
27    ];
28    function redraw () {
29        movingLiArray.forEach(movingLi => movingLi.move());
30    }
31    setInterval(redraw, 60);
32});