我有以下游戏，并且css绿色块无法在点击时跳转。我似乎无法发现我的错误。
如您所见，我已经在HTML中添加了onclick事件，据我所知，css动画已在样式文件中正确编码。我希望角色跳起来调用CSS动画，并且最好在此阶段避免使用JScript函数（或同时使用两种方法来查看这对年轻学生来说更简单）
任何人都可以发现并指出错误。
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #f74cbc
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 10px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
@keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
@keyframes moveenemy {
0% {
top: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320px;
}
}<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Battle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TG</h1>
<p>Avoid the red</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>更新：
我知道我可以使用如下所示的Jscript函数，但是那还是行不通的？
下面尝试了JavaScript（在script.js中）
function jump(){
if(character.classlist!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
理想地，如上所述，我想要最简单的解决方案。是否可以指出这两个错误（提供了解决方案），所以答案中都存在这两种选择。推荐哪种方法？
您可以CSS使用执行跳动画的javascript切换类。您不能CSS直接通过引用动画JS
// Get your character div
const character = document.getElementById('character');
// Create "jump" animation that you referenced in the "onclick".
function jump() {
// Check if the animation is already started
if(!character.classList.contains('jumping')){
// Add the "jumping" class
character.classList.add('jumping');
// After "500 ms" remove the "jumping" class, duration must match your CSS animation length
setTimeout(function() {
character.classList.remove('jumping');
}, 500);
}
}* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #f74cbc
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
}
/* Moved the animation to it's own class so we can toggle it */
#character.jumping {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 10px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
@keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
@keyframes moveenemy {
0% {
top: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320px;
}
}<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Battle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TG</h1>
<p>Avoid the red</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句