I would like to add a NEW Pokemon image for the main character to jump over after each successful hu-CodePudding

Javascipt

I would like for the character to jump over a new pokemon after each successful jump. Currently I can get the character to jump over the same pokemon over and over. How can I go about adding more pokemon for the character to jump. I was able to add a flying pokemon that dosent affect the games progress. But I want to add new pokemon that will affect the jump score.

var character = document.getElementById("character");
var block = document.getElementById("block");
var counter = 0;

const images = [
  'https://www.serebii.net/swordshield/pokemon/001.png',
  'https://www.serebii.net/swordshield/pokemon/002.png',
  'https://www.serebii.net/swordshield/pokemon/003.png',
];

var index = 0;

function nextImage() {
  index  ;
  index = index >= images.length ? images.length - 1 : index;
  return images[index];
}

function jump() {
  if (character.classList == "animate") {
    return
  }
  character.classList.add("animate");
  setTimeout(function() {
    character.classList.remove("animate");
  }, 300);
}

// document.querySelector("#block")function jump() {
//     document.querySelector(images).src = nextImage();
//    }



var checkDead = setInterval(function() {
  let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
  let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
  if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) {
    block.style.animation = "none";
    console.log("Game Over! Score: "   Math.floor(counter / 100));
    counter = 0;
    block.style.animation = "block 1s infinite linear";
  } else {
    counter  ;
    document.getElementById("scoreSpan").innerHTML = Math.floor(counter / 100);
  }
}, 10);

* {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

h1 {
  background-image: url(images/Gotta-Jumpem-All.png);
  background-repeat: no-repeat;
  margin-left: 450px;
  width: 1200px;
  height: 300px;
}

.game {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  margin: auto;
  margin-top: 5px;
  background-image: url("https://p4.wallpaperbetter.com/wallpaper/957/704/964/pokemon-fields-ruby-1920x1200-nature-fields-hd-art-wallpaper-preview.jpg");
  background-size: contain;
}

#character {
  width: 50px;
  height: 50px;
  content: url("https://static.pokemonpets.com/images/monsters-images-300-300/100-Voltorb.webp");
  position: relative;
  top: 150px;
}

.animate {
  animation: jump 0.3s linear;
}

@keyframes jump {
  0% {
    top: 150px;
  }
  30% {
    top: 100px;
  }
  70% {
    top: 100px;
  }
  100% {
    top: 150px;
  }
}

#block {
  width: 50px;
  height: 50px;
  position: relative;
  top: 110px;
  left: 500px;
  animation: block 1.3s infinite linear;
  content: url("https://www.serebii.net/swordshield/pokemon/027.png");
}

#flyingPokemon {
  width: 50px;
  height: 50px;
  position: relative;
  top: -100px;
  left: 500px;
  animation: block 3s linear;
  content: url("https://www.serebii.net/pokearth/sprites/pt/093.png");
}

@keyframes block {
  0% {
    left: 500px
  }
  100% {
    left: -20px
  }
}

p {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en" onclick="jump()">

<head>
  <meta charset="UTF-8">
  <title>Pokemon Jump</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <h1></h1>
  <div >
    <div id="character"></div>
    <div id="block"></div>
    <div id="flyingPokemon"></div>
    <div id="flyingPokemon2"></div>
  </div>
  <p>Score: <span id="scoreSpan"></span></p>
</body>
<script src="index.js"></script>

</html>

CodePudding user response：

Here are some improvements

please use valid HTML
use eventlisteners
the nextImage was not called
the interval was not cleared (the thing still runs though)

const images = [
  'https://www.serebii.net/swordshield/pokemon/001.png',
  'https://www.serebii.net/swordshield/pokemon/002.png',
  'https://www.serebii.net/swordshield/pokemon/003.png',
];

window.addEventListener("DOMContentLoaded", function() {
  const character = document.getElementById("character");
  const block = document.getElementById("block");
  const message = document.getElementById("message");
  let counter = 0,
    index = 0;

  function nextImage() {
    index  ;
    if (index >= images.length) index = 0;
    return images[index];
  }

  function jump() {
    if (character.classList.contains("animate")) {
      return
    }
    character.classList.add("animate");
    setTimeout(function() {
      character.classList.remove("animate");
      block.style.content = `url(${nextImage()})`;      
    }, 300);
  }

  // document.querySelector("#block")function jump() {
  //     document.querySelector(images).src = nextImage();
  //    }



  document.addEventListener("click", jump)
  var checkDead = setInterval(function() {
    let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
    if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) {
      block.style.animation = "none";
      message.textContent = ("Game Over! Score: "   Math.floor(counter / 100));
      counter = 0;
      block.style.animation = "block 1s infinite linear";
      clearInterval(checkDead);
    } else {
      counter  ;
      document.getElementById("scoreSpan").innerHTML = Math.floor(counter / 100);
    }
  }, 100);
})

* {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

h1 {
  background-image: url(images/Gotta-Jumpem-All.png);
  background-repeat: no-repeat;
  margin-left: 450px;
  width: 1200px;
  height: 300px;
}

.game {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  margin: auto;
  margin-top: 5px;
  background-image: url("https://p4.wallpaperbetter.com/wallpaper/957/704/964/pokemon-fields-ruby-1920x1200-nature-fields-hd-art-wallpaper-preview.jpg");
  background-size: contain;
}

#character {
  width: 50px;
  height: 50px;
  content: url("https://static.pokemonpets.com/images/monsters-images-300-300/100-Voltorb.webp");
  position: relative;
  top: 150px;
}

.animate {
  animation: jump 0.3s linear;
}

@keyframes jump {
  0% {
    top: 150px;
  }
  30% {
    top: 100px;
  }
  70% {
    top: 100px;
  }
  100% {
    top: 150px;
  }
}

#block {
  width: 50px;
  height: 50px;
  position: relative;
  top: 110px;
  left: 500px;
  animation: block 1.3s infinite linear;
  content: url("https://www.serebii.net/swordshield/pokemon/027.png");
}

#flyingPokemon {
  width: 50px;
  height: 50px;
  position: relative;
  top: -100px;
  left: 500px;
  animation: block 3s linear;
  content: url("https://www.serebii.net/pokearth/sprites/pt/093.png");
}

@keyframes block {
  0% {
    left: 500px
  }
  100% {
    left: -20px
  }
}

p {
  text-align: center;
}

<h1></h1>
<div >
  <div id="character"></div>
  <div id="block"></div>
  <div id="flyingPokemon"></div>
  <div id="flyingPokemon2"></div>
</div>
<p>Score: <span id="scoreSpan"></span></p>
<p id="message"></p>