0
\$\begingroup\$

I'll try to be as precise as possible.

First Issue: If you look in the code, I have a drawObjects function which calls collisionDetection function.

Inside collisionDetection if player(mario) touches the object(Goomba) then game should be over and animation should stop.

However, even on cancelling the animation frame, the animation won't stop somehow.

Second Issue: I want to speed up Objects(Goomba) but if I try to reduce their x position by more than two (i.e. objects[i].x -= 3 for example), the object(goomba) doesn't show at all except for the first one.

So, in this issue what I seek is, is there another better way to speed up goombas?

Code :

var startTime  = 0;
var rAF;

var cnv = document.getElementById("canvas");
var ctx = cnv.getContext("2d");

var cWidth = cnv.width = window.innerWidth-10;
var cHeight = cnv.height = window.innerHeight-20;

var bgImg = new Image();
var playerImg = new Image();
var goombaImg = new Image();

bgImg.src = "images/mariobg.png";
playerImg.src = "images/mario.png";
goombaImg.src = "images/goomba.png";

var game = {
   state : true,
   score : 0
}

var player = {
    x : 15,
    y : cHeight-110,
    w : 75,
    h : 75,
    canJump : true,
    xVelocity : 0,
    yVelocity : 0
}

var objects = [];
objects[0]={
    x : cWidth-110,
    y : cHeight-90,
    w : 50,
    h : 50,
}

var controller = {
    moveLeft : false,
    moveUp : false,
    moveRight : false,
    keyListener : function(event){
        var keyState = (event.type == 'keydown') ? true : false ;

        switch (event.keyCode) {
        case 37:
            controller.moveLeft = keyState;
            break;
        case 38:
            controller.moveUp = keyState;
            break;
        case 39:
            controller.moveRight = keyState;
            break;
        }
    }
}

document.addEventListener('keydown', controller.keyListener);
document.addEventListener('keyup', controller.keyListener);

function draw(timestamp){
    //console.log(performance.now);
    ctx.drawImage(bgImg, 0, 0 , cWidth, cHeight);
    drawPlayer();
    drawObjects();
    drawScore();
    drawDevInfo();
    rAF = requestAnimationFrame(draw);
}

function drawPlayer(){
    if(controller.moveLeft){
        player.xVelocity -= 0.5;
    }

    if(controller.moveRight){
        player.xVelocity += 0.5;
    }

    if(controller.moveUp && player.canJump == true){
        player.yVelocity -= 25;
        player.canJump = false;
    }

    player.x += player.xVelocity;
    player.y += player.yVelocity;
    player.xVelocity *= 0.95;
    player.yVelocity *= 0.95;
    player.yVelocity += 1.3;

    if(player.y > cHeight-110){
        player.y = cHeight-110;
        player.yVelocity = 0; 
        player.canJump = true;
    }

    if(player.x > cWidth || player.x < 0){
        player.x = 0; 
    }

    ctx.drawImage(playerImg, player.x, player.y, player.w, player.h);
}

function drawObjects(){

    for (let i = 0; i < objects.length; i++) {
        ctx.drawImage(goombaImg, objects[i].x, objects[i].y, objects[i].w, objects[i].h);
        objects[i].x-=1;
        //var now = Date.now;

        //timeElapsed = now - startTime;
        //console.log(timeElapsed);

        if(objects[i].x == cWidth/2){
            objects.push({
                x : cWidth-110,
                y : cHeight-90,
                w : 50,
                h : 50 
            });
        }

        collisionDetection(i);        
    }
}

function collisionDetection(i){
    if (player.x+player.w > objects[i].x && player.x < objects[i].x+objects[i].w && (player.y+player.h > objects[i].y)) {
        ctx.font = "25px Verdana";
        ctx.fillText("GAME OVER",cWidth/2, cHeight/2 ); 
        drawScore();
       drawDevInfo();
       cancelAnimationFrame(rAF);
    }
    else {
        game.score = game.score + 1;
    }
}

function drawScore(){
    ctx.font = "15px Verdana";
    ctx.fillText("Score : "+ game.score, 15, 20);
    ctx.fillStyle="white";
}

function drawDevInfo(){
    ctx.font = "15px Verdana";
    ctx.fillText("@KaushikCodeArts - 2019 ", cWidth/2-15, 20 );
    ctx.fillStyle="white";
}

//draw();
rAF = requestAnimationFrame(draw);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.