How to fix random subtraction of players health when collision happens?

Question

I am making a small spaceship game in which the space ship has to move around in order to not get hit by a meteor. When the meteor hits the ship the player is supposed to lose on point of health, but n my example a player always loses a number which is around 12 and I don't know what causes that.

I tried adding starting health instead of subtraction it the health I would add it when it hits the meteor, but even then the health was added by 10, not by one as I wanted to. I tried to use console.log to trie to find the error, but nothing worked

let x = 200;
let x1 = 258;
let score = 0;
let health = 5;
let meteors = [];
let ecllipseMeteors = [];
let meteor;
let ecllipseMeteor;
let spaceShipimg;
let meteorimg;

function Meteor() {
  this.x = random(0,600);
  this.y = random(-200,-190);
  this.speed = random(3,10);

  this.fall = function() {
    this.y = this.y + this.speed;
    if (this.y > height) {
      this.y = random(-200,-100);
      this.speed = random(3, 7);
    }
  };
  this.show = function() { image(meteorimg,this.x,this.y, 40, 40) };
}
function meteormodel() {
  this.x = random(0,600);
  this.y = random(-200,-190);
  this.speed = random(3,10);

  this.fall = function() {
    this.y = this.y + this.speed;
    if (this.y > height) {
      this.y = random(-200,-100);
      this.speed = random(3, 7);
    }
  };
  this.show = function() { ellipse(this.x,this.y, 20, 20) };
}

function setup() {
    // creates canvas
  createCanvas(600, 400);
  timer = createP('');
 meteor = new Meteor();
 ecllipseMeteor = new meteormodel();
 interval = setInterval(scoreCount, 500);
}

function gameOver() {
  textSize(20);
  text("GAME OVER YOUR SCORE: " + score, 200, 200);
  fill(255);
}
function preload() {
    //loads all teh necesarry material
    spaceShipimg = loadImage('assets/spaceShip.png');
  meteorimg = loadImage('assets/meteor.png');

}

function scoreCount() {
score++;
}
function draw() {
  background(11, 72, 170);


  hit = collideRectCircle(x1, 335, 20, 30, meteor.x, meteor.y, 40);
  if(hit == true) {
    health -= 1;
  //  console.log(health -= 1);
    if (health == 0) {
      gameOver();
      noLoop();

    }
  }

    if (keyIsDown(LEFT_ARROW) && x > -46) {
      x -= 5;
    }

    if (keyIsDown(RIGHT_ARROW) && x < 508) {
      x += 5;
    }
    if (keyIsDown(LEFT_ARROW) && x1 > 9) {
      x1 -= 5;
    }

    if (keyIsDown(RIGHT_ARROW) && x1 < 565) {
      x1 += 5;
    }
    rect(x1, 335, 20, 30)
    image(spaceShipimg,x,260,120,120)


        meteor.fall();
        meteor.show();




    textSize(20);
    text("Health: " + health, 10, 20);
    fill(255);
    textSize(20);
    text("Score: " + score, 10, 40);
    fill(255);
}

The expected result is that when a meteor hits the rocket the player's health would go down by one. The problem is that it goes by around 10.

Rabbid76 · Accepted Answer · 2019-06-06T21:12:43.193

The issue is, that the meteor hits the ship ore than once. One meteor hits the ship continuously on the way down from the top of the ship to the bottom.
The easiest way to solve the issue is, to force the game to spawn a new meteor. In the method fall the condition to spawn a new meteor is this.y > height. If meteor.y is that height+1, the meteor which has hit the ship will disappear an a new position is set at the top of the window:

function draw() {
    background(11, 72, 170);

    hit = collideRectCircle(x1, 335, 20, 30, meteor.x, meteor.y, 40);
    if(hit == true) {
        health -= 1;

        meteor.y = height+1; // <----------

        if (health == 0) {
            gameOver();
            noLoop();
        }
    }

    // [...]

}

I also added one more question if you maybe have time can you check it out — Lime, Jun 07 '19 at 10:59

score 0 · Answer 2 · answered Jun 06 '19 at 20:08

Essentially draw loops at a "tick rate of 60" so this is being "true" more than just once so you need to set a global flag that stops it after occurring once.

hit = collideRectCircle(x1, 335, 20, 30, meteor.x, meteor.y, 40);
  if(hit == true) {
    health -= 1;

Solution:

var flag = true; //put this outside the draw scope

 if(hit == true && flag) {
    health -= 1;
    flag = false
}

if(!hit){
flag = true
}

Hope this helps.

score 0 · Answer 3 · answered Jun 06 '19 at 20:27

I belive the problem is that the meteor is hitting the spaceship over multiple frames. So to resolve this, you have to stop the meteor from doing damage more than once.

hit = collideRectCircle(x1, 335, 20, 30, meteor.x, meteor.y, 40);
if(hit == true) {
  // Your awsome code!
  meteor.y = random(-200,-100);
  meteor.speed = random(3, 7);

Hope this helps! :-)

How to fix random subtraction of players health when collision happens?

3 Answers3