1

Hola buenas soy nuevo en esto y estoy liadocon las colisiones, en Mario.prototype.checkCollition ya tengo que me recoloque al personaje mario a la izquiera del obstaculo pero no va que si choco por el otro lado se mantenga a la derecha, no se si debe ser en 3 ifs, tambien quiero que mario pueda posarse sobre un obstaculo, alguna ayuda porfavor?

//CONSTRUCTOR MARIO
function Mario(ctx){
    this.ctx = ctx;
    
    this.img = new Image();
    this.img.src = 'img/mario.jpg';
    
    this.h = this.ctx.canvas.height / 10;
    this.w = this.h / 1.5;
    this.x = this.w * 3;
    this.y0 = 0.95 * this.ctx.canvas.height - this.h;
    this.y = this.y0;
    
    this.vx = 0;
    this.vy = 0;
    this.g = 0.3;
    
    this.img.frameIndex = 0;
    this.img.frames = 7;
    this.img.animateEvery = 3;
    this.drawCount = 0;
}

//LINE OF Y0
Mario.prototype.y0Line = function(){    
    this.ctx.beginPath();
    this.ctx.moveTo(0, this.y0);
    this.ctx.lineTo(this.y0, this.y0);
    this.ctx.stroke();
};
Mario.prototype.y0Line2 = function(){
    this.ctx.beginPath();
    this.ctx.moveTo(0, this.y);
    this.ctx.lineTo(this.y, this.y);
    this.ctx.stroke();
};


//DRAWING MARIO
Mario.prototype.draw = function(){
    this.ctx.drawImage(
        this.img,
        (this.img.width / this.img.frames) * this.img.frameIndex,
        0,
        this.img.width / this.img.frames,
        this.img.height,
        this.x,
        this.y,
        this.w,
        this.h
    );  
    this.animate();
};


//ANIMATING MARIO
Mario.prototype.animate = function(){
    if (this.isJumping()) return;
    
    this.drawCount++;
    
    if (this.drawCount === this.img.animateEvery) {
        this.img.frameIndex++;
        this.drawCount = 0;        
        
        if (this.img.frameIndex === this.img.frames) {
            this.img.frameIndex = 0;
        }
    }    
};



Mario.prototype.move = function(){
    this.x += this.vx;
    this.y += this.vy;  
    
    if (this.x <= 0) this.x = 0;
    if (this.x + this.w > this.ctx.canvas.width) this.x = this.ctx.canvas.width - this.w;
    
    if (this.isJumping()) {        
        this.vy += this.g;  
        
    } else{
        this.y = this.y0;
        this.vy = 0;
    }
};  


Mario.prototype.checkCollition = function(arrayObs){         
    
    arrayObs.forEach(function(o){
      
        if (this.x + this.w >= o.x &&
            this.y + this.h >= o.y &&
            this.x <= o.x + o.w) {
            
            this.x = o.x - this.w;
        }
    }.bind(this));
    
};



//KEY CODES
Mario.prototype.TOP = 38;
Mario.prototype.LONGJUMP = 65;
Mario.prototype.DOWN = 40;
Mario.prototype.LEFT = 37;
Mario.prototype.RIGHT = 39;

Mario.prototype.onKeyDown = function(evt){
    switch (evt.keyCode) {
        case this.LEFT: this.vx = -10; break;
        case this.RIGHT: this.vx =10; break;
        case this.TOP: 
        case this.LONGJUMP: this.jump(evt.keyCode);break;
        case this.DOWN: this.vy += 10; break;
    }
};

Mario.prototype.onKeyUp = function(evt){    
    switch (evt.keyCode) {
        case this.LEFT: 
        case this.RIGHT: 
        this.vx = 0; break;
    }
};

//ACTIONS
Mario.prototype.jump = function(code){
    if (this.isJumping()) return;
    if (code === 65) this.vy -= 11;
    if (code === 38) this.vy -= 8;
};

//CHECK IF ITS JUMPING
Mario.prototype.isJumping = function(){        
    if (this.y < this.y0) {             
        return true; 
    }  
};

4
  • ¿Has pensado en usar la sintaxis de ES6? Creo que te dejaría el código mas limpio el 30 may. 2018 a las 13:15
  • estoy en una academia y nos obligan a usar es5 mas tarde usaremos es6, nose como hacer esta colision sabes? el 30 may. 2018 a las 13:15
  • Por aclarar: ¿x e y son las coordenadas de la esquina superior izquierda de cada cuerpo? asumo que w es la anchura y h la altura el 30 may. 2018 a las 13:19
  • eso es pablo, si hago un if con las 3 condiciones me posiciona el mario a la derecha del obstaculo si choca pero por el otro lado no me deja a mario a ese otro lado y tambien quiero que se pueda posar sobre el obstaculo el 30 may. 2018 a las 13:20

1 respuesta 1

0

Tienes la solución a la colisión por la izquierda, pero necesitas realizarla para los otros 3 lados: derecha, arriba y abajo (Mario tiene que poder golpear las cajas para obtener monedas, ¿no?).

Te propongo una alternativa: detecta la colisión en general, sin comprobar si es por la izquierda o por la derecha - lo sabes por el vector velocidad (vx, vy)- y, si la hay, no lo muevas:

Mario.prototype.checkCollisionBefore = function(arrayObs){         

    return arrayObs.some(function(rect){

      return (this.x + this.vx < rect.x + rect2.width &&
         x + this.vx + this.width > rect2.x &&
         y + this.vy < rect2.y + rect2.height &&
         this.height + y + this.vy > rect2.y) 
    }.bind(this));

};

Esta función está basada en este ejemplo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.