大佬教程收集整理的这篇文章主要介绍了带有 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">
<@R_674_10283@e>Battle</@R_674_10283@e>
<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">
<@R_674_10283@e>Battle</@R_674_10283@e>
<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>以上是大佬教程为你收集整理的带有 css 生成块的 JavaScript 游戏，角色无法在点击时跳转全部内容，希望文章能够帮你解决带有 css 生成块的 JavaScript 游戏，角色无法在点击时跳转所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。