Witam.
Postanowiłem napisać w canvas'ie grę 2D typu top-down (widzimy akcję od góry).
Kolizje z obramowaniem canvasa mam ogarniętą, teraz przyszła pora na kolizje se ścianami wewnątrz.
Mapa jest zdefiniowana w tablicy:
var mapTiles = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
];
Rysowanie mapki:
for(x=0; x<15; x++){
for(y=0; y<12; y++){
if(mapTiles[y][x]==0){
ctx.drawImage(wallImg, x*60, y*60);
}
else if(mapTiles[y][x]==1){
ctx.drawImage(grassImg, x*60, y*60);
}
}
}
I teraz w klasie Player przyszła pora na kolizje.
for(x=0; y<15; x++){
for(y=0; x<12; y++){
if(mapTiles[x][y]==0){
//sprawdzamy kolizje
}
}
}
Dodam jeszcze konstruktor klasy player:
constructor(x, y) {
this.x = x;
this.y = y;
this.speed = 1;
this.xVel = 0;
this.yVel = 0;
this.rotate = 0;
this.radius = 20;
this.img = document.getElementById("player");
}
I wybaczcie to "this.rotate", wiem, że powinno być "angle" ale robiłem to dosyć późno i już nie chce mi się w całym kodzie tego zamieniać.