Collision detection, maar niet lekker.
In mouseMove() roep ik de code aan voor het tekenen van de vormen: drawShapes().
Zoals de code nu is werkt het goed maar al die if statements zitten me niet lekker en de vraag is kan dat anders; beter natuurlijk.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// this will remove all drawings from entire canvas
ctx.clearRect(3, 3, cvsWidth, cvsHeight);
for(let shape of shapes) {
ctx.fillStyle = shape.color;
// if (!edgeCollision(shape, cvs)) {
// ctx.clearRect(3, 3, cvsWidth, cvsHeight);
// ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
// }
if (shape.x < 15) { shape.x = 15; }
if ((shape.x + shape.width) > (cvs.width - 15)) {
shape.x = cvs.width - shape.width - 15;
}
if (shape.y < 15) { shape.y = 15; }
if ((shape.y + shape.height) > (cvs.height - 15)) {
shape.y = cvs.height - shape.height - 15;
}
ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
}
}
drawShapes();
Gebruik ik een functie om de rand te detecteren:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
edgeCollision = (shape, cvs) => {
let lefCol = (shape.x < 15);
let rigCol = ((shape.x + shape.width) > (cvs.width - 15));
let topCol = (shape.y < 15);
let botCol = ((shape.y + shape.height) > (cvs.height - 15));
return (lefCol || rigCol || topCol || botCol);
}
let lefCol = (shape.x < 15);
let rigCol = ((shape.x + shape.width) > (cvs.width - 15));
let topCol = (shape.y < 15);
let botCol = ((shape.y + shape.height) > (cvs.height - 15));
return (lefCol || rigCol || topCol || botCol);
}
en zet ik die op de plaats die nu is uitgecommentarieerd ( en haal de if'jes en de fillRect() weg )
dan werkt het maar heel krom: een van vormen verdwijnt en ik heb geen idee hoe dat kan komen.
Zet ik de regel met:
Code (php)
1
2
2
ctx.clearRect(3, 3, cvsWidth, cvsHeight);
helemaal aan het begin, zoals in deze code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
drawShapes = () => {
// this will remove all drawings from entire canvas
ctx.clearRect(3, 3, cvsWidth, cvsHeight);
for(let shape of shapes) {
ctx.fillStyle = shape.color;
if (!edgeCollision(shape, cvs)) {
ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
}
}
}
drawShapes();
// this will remove all drawings from entire canvas
ctx.clearRect(3, 3, cvsWidth, cvsHeight);
for(let shape of shapes) {
ctx.fillStyle = shape.color;
if (!edgeCollision(shape, cvs)) {
ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
}
}
}
drawShapes();
Dan werkt het prima totdat ik een rand detecteer; dan verdwijnt de vorm.
Dat is logisch omdat ik vóór het tekenen het canvas leeg maak.
Vandaar dat ik dít probeer:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
drawShapes = () => {
for(let shape of shapes) {
ctx.fillStyle = shape.color;
if (!edgeCollision(shape, cvs)) {
ctx.clearRect(3, 3, cvsWidth, cvsHeight);
ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
}
}
}
drawShapes();
for(let shape of shapes) {
ctx.fillStyle = shape.color;
if (!edgeCollision(shape, cvs)) {
ctx.clearRect(3, 3, cvsWidth, cvsHeight);
ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
}
}
}
drawShapes();
En dan snap ik niet waarom de andere vorm van het canvas verdwijnt.
Nou, moeilijk verhaal; ik vertrouw erop dat iemand begrijpt waar ik het over heb.
Lang verhaal samengevat:
Ik wil van al die if statements af; kan dat anders terwijl het wel goed blijft werken?
- https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
- https://stackoverflow.com/questions/2440377/javascript-collision-detection
Als het goed is hoef je alleen nog een uitwerking te kiezen die voor jou goed werkt.