Stuck at Goomba's speed and cancelling animation at game over

by Piyush Kaushik   Last Updated May 16, 2019 04:13 AM

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);


Related Questions


Updated August 20, 2018 14:13 PM

Updated January 12, 2019 07:13 AM

Updated March 08, 2018 00:13 AM

Updated March 27, 2015 15:33 PM

Updated December 24, 2016 07:36 AM