Jump to content

Canvas game collision help


No-name
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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 by hansgerber7
add important side note
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...