[英]I would like to add a NEW Pokemon image for the main character to jump over after each successful hump
Javascipt
我希望角色在每次成功跳跃后跳过一个新的口袋妖怪。 目前我可以让角色一遍又一遍地跳过同一个口袋妖怪。 我怎么能 go 关于为角色添加更多口袋妖怪跳跃。 我能够添加一个不会影响游戏进度的飞行口袋妖怪。 但是我想添加会影响跳跃分数的新口袋妖怪。
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>
这里有一些改进
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>
我想添加条件以更改此脚本中的Image或创建新的
[英]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
使用javascript，我想添加图像作为链接，但是想大约每隔三次访问一次就更改图像
[英]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
在 Adobe Acrobat 中，我想要四个单选按钮，每个按钮都会在文本字段中添加/替换文本
[英]In Adobe Acrobat I would like to have four radio buttons, each of which will add/replace text into a text field
我想单击刷新页面并在刷新后隐藏 div 的 div 中的图像
[英]I would like to click an image in a div that refreshes the page and hides the div after refresh
我有一个选项表单，我想为我选择的选项标签的每个元素显示来自 JSON 文件的不同图像
[英]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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.