我有一个使用JavaScript，CSS和HTML编写简单游戏的开始，直到我创建了跳转功能，游戏一直有效。OnClick时，character元素（由css生成为绿色矩形）应跳转。相反，它是静态的，不会移动。
最初，我有以下代码：
.animate{
animation: jump 500ms;
}
在角色的CSS中，它在没有任何用户交互的情况下连续跳跃。
我做错了什么？我认为这与此有关：
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
对于答案，我将感谢您指出错误，并提供了新代码并对setTimeout函数的工作方式进行了清晰的说明。setTimeout是否是现有的内置方法，如果是，我们在哪里可以找到有关这些内容的文档？
码
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump() {
character.classList.add("animate");
setTimeout(function() {
character.classList.remove("animate");
}, 500);
}* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 1px solid #319b4e;
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 14px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
@keyframes moveenemy {
0% {
left: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320x;
}
}
@keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>B“高
在复制代码并对其进行测试之后，问题在于该术语的document.getElementById拼写是小写的b，例如document.getElementbyId，这两行应该改为：
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");`
至于setTimeout，它是一个内置函数，在一定时间（在第二个参数中指定）后执行一个函数（在第一个参数中提供），该函数在后台运行，因此不会阻止其他事情的发生。
有关setTimeout的更多信息（当我第一次开始学习html等时，我使用了此网站。）
如果您想将其更改为向上箭头，只需添加一个event listener即可检查keyup事件，并检查键码是否与向上箭头（38）匹配，其他键可以通过console.log为事件选择keyCode来进行检查，因此在JavaScript中的某处
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
所以...
整个片段是
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
@keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
@keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句