所以我在 YouTube 上观看了一个教程，向我展示了如何使用 JavaScript 制作一个简单版本的恐龙游戏。我遵循了该教程，之后，我决定对代码进行一些更改。在改变了几个方面之后，这就是我所拥有的:
// Start check
setTimeout(function startobstacles() {
obstacle.classList.add("animateObstacle")
}, 3000);
// Variable definition
var character = document.getElementById('character');
var obstacle = document.getElementById('obstacle');
var score = 0
var dead = false
// Jump movement
function jump() {
character.classList.add("animateJump");
setTimeout(function() {
character.classList.remove("animateJump");
}, 500);
}
// Check if player lost
var checkDead = setInterval(function() {
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
var obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("left"));
if (obstacleLeft < 20 && obstacleLeft > 0 && characterTop >= 130) {
obstacle.style.animation = "none";
obstacle.style.diaplay = "none";
dead = true
var check = alert("You lost! Your score was " + score + ".");
if (typeof check == 'undefined') {
location.reload();
}
}
}, 10);
// Scoring system
setInterval(function() {
if (dead == false) {
score += 1;
highScore = window.localStorage.getItem('high_score');
if (score > highScore || highScore == null) {
window.localStorage.setItem('high_score', score);
}
highScore = parseInt(window.localStorage.getItem('high_score'));
document.getElementById("scoreBoard").innerHTML = "Your score: " + score + " | Your personal best: " + highScore;
}
}, 2000)* {
padding: 0;
margin: 0;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
#scoreBoard{
font-family: cursive;
font-size: 16px;
}
#game {
width: 500px;
height: 200px;
border: 1px solid black;
background-image: url("images/background.png");
}
#character {
width: 10px;
height: 50px;
background-color: transparent;
position: relative;
top: 142px;
}
#obstacle {
width: 20px;
height: 20px;
background-color: transparent;
position: relative;
top: 130px;
left: 450px;
}
.animateJump {
animation: jump 0.5s
}
.animateObstacle {
animation: obstacle 2s infinite linear;
}
@keyframes obstacle {
0%{left: 429px;}
100%{left: -429px;}
}
@keyframes jump {
0%{top: 142px;}
50%{top: 100px;}
100%{top: 142px;}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script type="text/javascript">
alert("Welcome to Mouse Run! In this game, your goal is to avoid touching the infected cheese. If you do, you lose! Press \"OK\" to start.")
alert("Use LEFT CLICK to jump!")
</script>
<link rel="icon" href="images/thumbnail.png">
<meta charset="utf-8">
<title>Mouse Run</title>
<link rel="stylesheet" href="style.css">
</head>
<body onclick="jump();" style="background-color: lightblue">
<!-- Main Game -->
<p id="title"></p>
<div id="game">
<div id="character"><img class="noselect" src="images/player.png"></div>
<div id="obstacle"><img class="noselect" src="images/obstacle.png" style="height: 20px; width: 50px;"></div>
</div>
<p id="scoreBoard"></p>
</body>
<script type="text/javascript" src="script.js"></script>
</html>所有这些代码，我得到这样的东西:
所以现在， Angular 色只能跳跃。我想给它冲刺的能力。我的计划是为鼠标制作第二个图像，并在用户按下某个键进行冲刺时在该图像之间切换。问题是我真的不知道在这种情况下如何交换图像。
那么有人知道怎么做吗？如果可以，请告诉我。感谢您的帮助!
最佳答案
更改图像的 src 应该可以。
function jump() {
let characterImage = character.getElementsByTagName("IMG")[0];
characterImage.src = "images/player_dash.png"; // Path to the new image (change it to the actual name)
setTimeout(function() {
characterImage.src = "images/player.png";
}, 500);
}
关于JavaScript 在按键上更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68945025/