Canvas game collision help

No-name · February 3, 2019

I need help with my collisions. Sometimes it works perfect but other times it will count as a point even when you dont hit the coin. Still learning js so forgive my crappy code.

<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
        <div id="headT"></div>
        <canvas id="myCanvas" width="400" height="400"></canvas>
    </head>
    <body onmousedown="player.moveUp()"><div id="btn">
        <button onclick="player.moveUp()">Fly</button>
        
        </div>
    </body>
</html>

// Scoring points needs to be more accurate


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

// Background variables
var bg = new Image();
bg.src="https://i.ibb.co/GMpCpZM/images-400x400.png";

var bgMove = 2;
var bgW = 400;

// Player variables
var pImg = new Image();
pImg.src="https://i.ibb.co/hy5XYjf/1548822657544-50x50.png";
var pX = 0;
var pY = canvas.width / 2;

// Coins
var cImg = new Image();
cImg.src="https://i.ibb.co/SXYfSW9/1548824681028-25x25.png";
var cx,cy,cspeed;
var coins = [];
var score = 0;

//text
document.getElementById("headT").innerText = "★Bird Fly★"

var spawnCoins = function(){
    coins.push(new coin);
}


function coin(){
    this.cx = 400;
    this.cy = Math.floor(Math.random() * 300);
    this.w = 25;
    this.h = 25;
    this.cspeed = 2;
    this.createCoin = function(){
    
        ctx.drawImage(cImg,this.cx,this.cy,this.w,this.h);
    }
}
var player = {
    
    x : pX,
    y : pY,
    w : 50,
    h : 50,
    

    createPlayer : function(){
        ctx.drawImage(pImg,player.x,player.y,player.w,player.h)
    },   
    moveUp : function(){
        player.y -= 30;
    }
}

var coinsUpdates = function(){
    

    for(var i = 0; i < coins.length; i++){
        
        coins[i].createCoin()
        coins[i].cx -= coins[i].cspeed;
        
        if (player.x < coins[i].cx + coins[i].w && player.x + player.y > coins[i].cx && player.y < coins[i].cy + coins[i].h && player.y + player.h > coins[i].cy) { 
        coins.splice(i,1);
        score = score + 1;
        }
        
        

        }
        
    
        
}
function draw(){
    
    //background scroll
    ctx.drawImage(bg,bgW,0);
    ctx.drawImage(bg,bgW - canvas.width,0);
    bgW -= bgMove;  
    
    if(bgW == 0){
        bgW = 400;
    }
    
    //Create Player
    player.createPlayer()
    player.y += 1;
    
    // Game text
    ctx.font = "15px Oswald";
    ctx.fillStyle = "black";
    ctx.fillText("SCORE: "+ score,canvas.width / 2 - 25,30);
}


function update(){
    
    draw();
    coinsUpdates ()
    window.requestAnimationFrame(update);
    
}

update();
setInterval(spawnCoins, 5000);

hansgerber7 · February 5, 2019

There is a mistake in your collision check. At one point you check for

player.x + player.y > coins[i].cx

This should be

player.x + player.w > coins[i].cx

Side note:

please move the following code from your head into your body tag :

<div id="headT"></div>
<canvas id="myCanvas" width="400" height="400"></canvas>

Edited February 5, 2019 by hansgerber7
add important side note

No-name · February 6, 2019

Thank you! Works perfectly now

Sign In

Canvas game collision help

Recommended Posts

No-name

Link to comment

Share on other sites

hansgerber7

Link to comment

Share on other sites

No-name

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity