stackoom
  简体   繁体   中英

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

 原文  2022-08-01 08:18:07  6   1    javascript/ html/ css/ function

Question

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 class="game"> <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>

1 answers

solution1
 0  2022-08-03 13:05:52

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 class="game"> <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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question I would like to add condition to change Image in this script or create new With an array of pictures I would like to have a different audio for each image I would like to disable elements after useing Image modal Jump over like this example Using javascript I would like to add an image as a link, but would like to change the image about every third time someone visits In Adobe Acrobat I would like to have four radio buttons, each of which will add/replace text into a text field Character will not jump after touching in JS I would like to add a dynamic component I would like to click an image in a div that refreshes the page and hides the div after refresh I have an option form and I would like to show a different image from a JSON file for each element of the option tag i choose
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM