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