<!DOCTYPE html>
<html>
<head>
<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<title>Page Title</title>
</head>
<body>
<img id='player' src='https://img.itch.zone/aW1hZ2UvMTAxNjU5LzQ3NDg3OC5qcGc=/original/fSOA5z.jpg'>
<div><button id='up'>Up</button><br /><button id='down'>Down</button></div>
<div><button id='left'>Left</button> <button id='right'>Right</button></div>
<script>
var top = 0, bottom = 0, left = 0, right = 0;
$("#up").click(function() {
top += 2;
$("#player").css("bottom", top);
});
</script>
</body>
</html>
#player {
height: 40px;
width: 40px;
position: absolute;
bottom: 300px;
left: 300px;
}
#up {
background: black;
color: red;
left: 300px;
border: 1px solid red;
border-radius: 5px;
width: 60px;
height: 30px;
font-size: 20px;
position: absolute;
}
#down {
background: black;
color: red;
position: absolute;
left: 300px;
top: 40px;
width: 60px;
height: 30px;
font-size: 20px;
border: 1px solid red;
border-radius: 5px;
}
#left {
background: black;
color: red;
width: 60px;
height: 30px;
font-size: 20px;
border: 1px solid red;
border-radius: 5px;
}
#right {
background: black;
color: red;
border: 1px solid red;
border-radius: 5px;
width: 60px;
height: 30px;
font-size: 20px;
}
При нажатии на кнопку #up, #player не двигается.
