We define all the methods that will run recursively and start defining them in the tutorial first part now its time to implement it in real, now the actual game part follows.

CosmicFighter.initialize = function() {

    this.checkIfEnded();
    this.drawHearts();
    this.moveEnemy();
    this.checkForKeyEvents(); 
    this.collisionTest();
}

We check if that particular game has ended, this happens if either the player or the enemy has 0 or less lives.

If the game has ended, we increment the winning party’s wins (which would be always a total of his wins, no matter if he exits and comes back to the site later because it is extracted from the local storage or is equal to 0 if the local storage is empty) and update the current local storage’s value. We set a message, end the game and display the game menu.

Creating a game with JavaScript and Processing.js part 1

Creating a game with JavaScript and Processing.js part 3

CosmicFighter.checkIfEnded = function() {
     if (lives <= 0) {// you lose
        dinoWins++;
        localStorage.setItem('dinoWins', dinoWins);
        gameOver = true;
        message = "You lose.";
       this.gameSetup();

    } 

     if (dinoLives < 0) {
            playerWins++;
            localStorage.setItem('playerWins', playerWins);
            gameOver = true;
            message = "You win.";
            this.gameSetup();
        }    
}

Next, we iterate over the number of hearts that the player has left and the enemy has left and display them (the heart image) in opposing sides of the screen.

CosmicFighter.drawHearts = function() {
      heartOffset = width;
     //player's lives
     for (var i = 1;i <= lives; i++){
        
        image(heart, heartOffset, 0, heartSize, heartSize);
        heartOffset -= heartSize;
     }

     //computer's lives
     heartOffset = 0;
     for (var i = 1;i <= dinoLives; i++){
            
        image(heart2, heartOffset, 0, heartSize, heartSize);
        heartOffset += heartSize;
     }
}

Now, we are going to give the enemy a random direction to follow, when he reaches an edge of the screen he would bounce in a different direction.

CosmicFighter.moveEnemy = function() {
     //set the dino moving around the screen
    if (dinoX > width -100) {
        xFactor = (Math.random() * -dinoXFactor) + dinoXFactor / 20;
    }
    
    if (dinoX < 0) {         xFactor = (Math.random() * dinoXFactor) + dinoXFactor / 20;     }               if (dinoY > height - 100) {
       yFactor = Math.random() * -dinoYFactor;
    }
    
    if (dinoY < 0) {
        yFactor = Math.random() * dinoYFactor;
    }
       dinoX += xFactor;
       dinoY += yFactor;
    image(dino,dinoX, dinoY, playerSize, playerSize);
}

If the player loses a life, we remove all of the stars that the player has shot, set the enemy’s stars position to 0, reverse the enemy’s direction and move him to its initial position and remove one life from the player’s lives.

CosmicFighter.onLifeLost = function() {
    playerStars = [];
    starX = 0;
    starY = 0;
    dinoX = dinoStartX;
    dinoY = dinoStartY;
    playerY = playerStartY;
     playerX = playerStartX;
    xFactor *= -1;
    yFactor *= -1;
    lives -= 1;
}

At this point, we check if the player has pressed a key and if he has pressed:

-Move him to the left if he is not at the left edge of the screen

-Move him to the right if his X position combined with his width is not greater than the right edge of the screen.

– We do that with up/and down as well but check the player’s Y coordinates

– If the player is trying to shoot a star, we are checking if the milliseconds elapsed since the start of the program are greater than the milliseconds elapsed since his last shot combined with  the period in which the player cannot shoot again, and if they are greater he can shoot a star. The star’s x and y coordinates is added to an array of all his stars

CosmicFighter.checkForKeyEvents = function() {
     //player's move & shoot key handlers
    if (keyPressed) {
        if (keyCode == LEFT) {
            if (playerX > 0) {
               playerX -= 10; 
            }
           
        }

        if (keyCode == RIGHT) {
            if (playerX < width - playerSize) {                playerX += 10;             }                   }                  if (keyCode == UP) { //up             if (playerY > 0) {
            playerY -= playerSpeedY;
              }
        }
         if (keyCode == DOWN) { //down
            if (playerY < height - playerSize) {             playerY += playerSpeedY;         }         }           if (key == '1'  && (millis() > lastShotMillis + shotWaitingTime)) {//space
            lastShotMillis = millis();

            playerStars.push([playerX, playerY]);
        }  
    }
}

You can check demo here Code for download will be aided in part 3.