问题描述
我有以下游戏,并且 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);
}
理想情况下,如上所述,我想要最简单的解决方案。是否可以指出这两个错误(提供了解决方案),以便答案中存在两种选择。推荐哪种方式?
解决方法
您可以使用执行跳跃动画的 javascript 切换 CSS
类。您不能通过 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>