var player = document.getElementById("player");
var block = document.getElementById("block");
function goleft(argument) {
player.classList.add("animatel");
setTimeout(function() {
player.classList.remove("animatel");
}, 1);
console.log("left");
}
function goright(argument) {
player.classList.add("animater");
console.log("right");
}
body {
background-color: lightblue;
}
.player {
height: 50px;
width: 50px;
position: relative;
top: 450px;
}
.block {
height: 30px;
width: 30px;
position: relative;
top: -50px;
animation: block 1s infinite linear;
}
#game {
width: 500px;
height: 500px;
border: 2px solid black;
}
@keyframes block {
0% {
top: -50;
}
100% {
top: 420;
}
}
@keyframes gor {
0% {
left: 0px;
}
50% {
left: 450px;
}
100% {
left: 0px;
}
}
@keyframes gol {
0% {
right: 450px;
}
50% {
right: 0px;
}
100% {
right: 450px;
}
}
.animater {
animation: gor 1s;
position: relative;
}
.animatel {
animation: gol 1s;
position: relative;
}
<body>
<div id="game">
<div id="player"><img class="player" src="https://via.placeholder.com/50" alt="player box"></div>
<div id="block"><img class="block" src="https://via.placeholder.com/80" alt="bogdan"></div>
<button onclick="goleft()">left</button>
<button onclick="goright()">right</button>
<script type="text/javascript" src="script.js"></script>
</div>
</body>