如何解决我正在尝试制作一个基本的游戏,当我想制作动画时,元素会从屏幕上消失我将在下面插入我的代码
我正在制作一种霸王龙游戏,当用户点击我的 div 时,我希望角色跳跃以避开障碍物。但是当我点击 div 时,角色(只是一个盒子)完全离开了屏幕,动画也不适用于跳跃。当我制作动画并在页面加载时运行时,它起作用了。有谁知道这里出了什么问题?也请不要使用jQuery。我是初学者,两三周前才开始学习 js。我对 jQuery 不太熟悉,控制台中也没有错误消息。控制台日志也在工作。
<html>
<head>
<title> Test game </title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mainBlock {
width: 850px;
height: 200px;
border: 1px solid black;
margin-left: 5vw;
}
.character{
height: 54px;
width: 50px;
background: #30f026;
margin-left: 20px;
position: relative;
top: 144px;
}
.animate {
animation: jumpo 500ms;
}
@keyframes jumpo {
0% {top: 144px;}
50% {top: 117px;}
60% {top: 117px;}
100% {top: 144px;}
}
.object {
height: 30px;
width: 30px;
background: #3385ff;
animation-name: block;
animation-duration: 900ms;
animation-iteration-count: infinite;
position: relative;
top: 114px;
left: 580px;
}
@keyframes block {
0% {left: 850px;}
100% {left: -100px;}
}
</style>
<div class="mainBlock app">
<div class="character">
</div>
<div class="object">
</div>
</div>
<script>
let mainBlock = document.getElementsByClassName('mainBlock')[0];
let object = document.getElementsByClassName('object')[0];
let character = document.querySelector('.character');
mainBlock.onclick = jumpie;
function jumpie() {
character.className += 'animate';
}
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。