Bonjour,

comme je l'ai dit dans les titres, j'ai un système de coordonnées et un script est censé dessiner des objets et leurs hitbox. Seulement, j'ai remarqué que ma fonction CollideItem.draw() ne trace pas exactement au bonnes coordonnées les formes.

Voici mon code:

//CollideItem.draw()
draw(pos = undefined){
        if (pos === undefined) {return this.draw(this.position);}

        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = this.style;
        switch (this.shape) {
            case 'rectangle':
            case 'square': 
//pos[0] est la position en abscisses, et pos[1] en ordonnée
                ctx.fillRect(pos[0], pos[1], this.dimention[0], this.dimention[1]);
                break;
            
            case "triangle":
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.translate(pos[0], pos[1]);   
                ctx.moveTo(this.dimention[0]/2, 0);
                ctx.lineTo(this.dimention[0], this.dimention[1]);
                ctx.lineTo(0, this.dimention[1]);
                ctx.closePath();
                ctx.fill();
                ctx.translate(-pos[0], -pos[1]);
                break;
                

            case 'ellipse':         
            case 'circle':  //I center the circles outside the shape (in the top left of the hitbox)       
                ctx.ellipse(
                                pos[0] + this.dimention[0],
                                pos[1] + this.dimention[1],
                                this.dimention[0],
                                this.dimention[1],
                                this.orientation,
                                0,
                                2*Math.PI
                            );
                ctx.fill();
                break;

            default:
            console.error(`cannot draw the shape: "${this.shape}"`);
                break;
        }
        ctx.restore();
        return undefined;
    }

Hitbox.draw():

draw(attach){  //attach is the object holding the hitbox
        const pos  = [attach.position[0], attach.position[1]];

        ctx.save();
        ctx.fillStyle = (attach.detectCollision())? "rgb(255 0 0 /60%)": this.style;
        ctx.fillRect(pos[0], pos[1], this.dimention[0], this.dimention[1]);
        ctx.restore();
    }

La boucle d'animation

static drawCanvas(){
        Game.drawBack();  //draw a black rectangle for the background
        
            
            Game.toDraw.forEach(obj => { 
                obj.drawMovement();
            });
            Game.toDrawHitbox.forEach(obj => {
                obj.drawHitbox();
                obj.move();
            });
    
        if (stop) {  //if(stop)  draw one frame
            return window.cancelAnimationFrame(animID);
        }
        
    
        animID = window.requestAnimationFrame(Game.drawCanvas);
    }

-
Edité par LeRetardatN 4 février 2024 à 15:07:22

Me voici quelques mois plus tard et ça ressemble à un bug que j'ai réparé ce matin même.

J'ai dû mettre l'élément <canvas> en plein écran en utilisant CSS avec un code du genre:

body{
    margin: 0;
    overflow: hidden;
}

canvas{
    width: 100vw;
    height: 100vh;
}

Seulement si l'on procède ainsi CSS va effectuer une sorte de zoom sur le canevas mais ce zoom ne va pas changer les coordonnées et l'on se retrouve dans une situation similaire à celle de mon message précédent.

Pour mettre le canevas en plein écran, il faudra utiliser ce code Javascript:

ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;

J'espère avoir pu vous aider.