Apple Catcher game

Question

So I'm trying to create an apple catcher game... But the code I've gotten so far is really buggy. First of all the point counter don't match the apples caught. Same with the computer points. The apples and the "basket" also glitch into each other, you will see it in the demo. How can I fix this? Any help is appreciated :)

Demo-link #1: https://files.itslearning.com/data/134/17123/k4.html

Let me know if the link doesn't work^^ :)

$(document).ready(function() {

  var spillerPoeng = 0;
  var pcPoeng = 0;


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



  var Kloss = function(xPos, yPos) {
    this.xPos = xPos;
    this.yPos = yPos;
  }

  Kloss.prototype.tegnKloss = function() {

    ctx.fillStyle = "red";
    ctx.fillRect(this.xPos, this.yPos, 100, 50);

  }

  Kloss.prototype.flyttVenstre = function() {
    ctx.fillStyle = "red";

    ctx.clearRect(this.xPos, this.yPos, 150, 80);

    this.xPos = this.xPos - 20;

    ctx.fillRect(this.xPos, this.yPos, 100, 50);
  }

  Kloss.prototype.flyttHoyre = function() {
    ctx.fillStyle = "red";

    ctx.clearRect(this.xPos, this.yPos, 150, 80);

    this.xPos = this.xPos + 20;

    ctx.fillRect(this.xPos, this.yPos, 100, 50);
  }


  var Kule = function(xPos, yPos, radie) {
    this.xPos = xPos;
    this.yPos = yPos;
    this.radie = radie;
    this.farge = getRandomColor();

  }



  Kule.prototype.tegn = function() {


    ctx.beginPath();
    ctx.arc(this.xPos, this.yPos, this.radie, 0, 2 * Math.PI);
    ctx.fillStyle = this.farge;
    ctx.stroke();
    ctx.fill();

  };

  Kule.prototype.fjernKule = function() {

    ctx.clearRect(this.xPos - 11, this.yPos - 11, this.radie * 2 + 4,
      this.radie * 2 + 4);


  }


  $("#venstre").click(function() {

    kloss1.flyttVenstre();
    kloss1.tegnKloss();
  });

  $("#hoyre").click(function() {
    kloss1.flyttHoyre();
    kloss1.tegnKloss();
  });



  function loop(objekt) {

    setTimeout(function() {
      if (objekt.yPos < 480) {

        objekt.fjernKule();

        objekt.yPos = objekt.yPos + 10;

        var sjekk = sjekkTreff(kloss1, objekt);
        if (sjekk == 1) {
          spillerPoeng++;
          document.getElementById("spillerPoeng").innerHTML =
            spillerPoeng;
        } else if (sjekk == 2) {
          pcPoeng++
          document.getElementById("pcPoeng").innerHTML = pcPoeng;
        }

        objekt.tegn();



        loop(objekt);
      }

    }, 300)


  }


  function randX(min, max) {

    return Math.floor(Math.random() * (max - min + 1)) + min;

  }

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    color += "00";
    for (var i = 0; i < 2; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    color += "00";
    return color;
  }





  var kuleListe = [];

  var maxKuler = 0;

  function settKuleListe() {

    setTimeout(function() {


      kuleListe[maxKuler] = new Kule(randX(10, 480), 0, 10);

      loop(kuleListe[maxKuler]);
      maxKuler++

      settKuleListe();

    }, 2000);

  }



  function sjekkTreff(obj1, obj2) {
    if (obj1.xPos < obj2.xPos && obj1.xPos + 300 > obj2.xPos && obj2.yPos > 450) {

      return (1);
    } else if (obj2.yPos > 450) {

      return (2);
    } else {


      return (3);

    }




  }


  var kloss1 = new Kloss(50, 450);
  kloss1.tegnKloss();



  settKuleListe();






});

div {
  border: 1px solid black;
  padding: 20px;
  margin-bottom: 10px;
  margin-left: 80px;
  background-color: lightblue;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div>
  <canvas id="myCanvas" width="400" height="500" style="border:1px solid #000000;">
        </canvas>
</div>
<div>spiller poeng:
  <p id="spillerPoeng"></p>
</div>
<div>PC poeng
  <p id="pcPoeng"></p>
</div>

<br>
<div>
  <button id="venstre"> << </button>
  <button id="hoyre"> >> </button>
</div>

Answer 1

This looked fun, so I tried to "improve" your code.

Here is one that works with arrow keys, try it and edit it as much as you want !

(And of course, I'm here if you have questions, but I think my code is pretty clear)

The code isn't finished yet, I thought letting some errors would help you improve yourself, so try to find them if you can ;)

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const basketSpeed = 5;
const gravity = 2;

const basket = new Basket();
const apples = [];

const score = document.querySelector('#counter span');
let counter = 0;

setInterval(() => apples.push(new Apple()), 500);

let pressingLeft = pressingRight = false;

draw = function() {
  basket.draw();
  for (let apple of apples) { apple.draw(); }
}

animate = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  draw();
  requestAnimationFrame(animate);
}

animate();

function Basket() {

  this.width = 50;
  this.height = 10;
  
  this.x = (canvas.width / 2) - this.width / 2;
  this.y = canvas.height - this.height - 10;
  
  this.dx = 0;
  
  this.draw = function() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.width, this.height);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
    this.update();
  }
  
  this.update = function() {
    if(pressingLeft) { this.dx = -basketSpeed; }
    else if (pressingRight) { this.dx = basketSpeed; }
    else { this.dx = 0; }
    
    if (this.x + this.width + this.dx < canvas.width && this.x + this.dx > 0) { this.x += this.dx; }
  }
}

function Apple() {
  this.x = Math.random() * canvas.width;
  this.y = 0;
  
  this.radius = 10;
  
  this.dy = gravity;
  
  this.allowDraw = true;
  
  this.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
    this.update();
  }
  
  this.update = function() {
    this.y += this.dy;
    if (this.x > basket.x && this.x < basket.x + basket.width &&
      this.y + this.radius >= basket.y
    ) {
      updateScore();
      apples.splice(apples.indexOf(this), 1);
    }
  }
}

updateScore = function() {
  counter++;
  score.innerText = counter;
}

document.addEventListener('keydown', (ev) => {
  pressingLeft = ev.keyCode === 37;
  pressingRight = ev.keyCode === 39;
});

document.addEventListener('keyup', (ev) => {
  if (ev.keyCode === 37) { pressingLeft = false; }
  if (ev.keyCode === 39) { pressingRight = false; }
});

canvas { background: #ddd; position: relative; left: 50%; transform: translateX(-50%); }
#counter { display: inline-block; margin: auto; position: relative; top: 50px; }

<canvas id="canvas" width="500" height="300"></canvas>
<div id="counter">Score : <span>0</span></div>