如何解决带有 css 生成块的 JavaScript 游戏,角色无法在点击时跳转
我有以下游戏,并且 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。