CSS
@charset "UTF-8";
#bg {
width: 1280px;
height: 720px;
background-image: url('../img/bg.png');
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
img {
width: 70px;
height: 170px;
position: absolute;
right: 0px;
bottom: 200px;
}
.btn {
width: 170px;
height: 100px;
border: none;
font-size: 20px;
font-weight: bold;
position: absolute;
color:white;
background: rgba(0,0,0,0.3)
}
.left{
right:600px;
bottom:25px;
}
.right{
right:400px;
bottom:25px;
}
event.js
// 말이 배경판에서 벗어나지 않도록 할 것
// 힌트> 스타일을 변경해주는 키워드 .css
// 1. left 버튼을 눌렀을 때,
// 말이 왼쪽으로 50px씩 이동
let move = 0;
$(document).on('click', '.btn.left', ()=>{
if(move<1200){
move += 50
$('#horse').css('right', move+'px')
}
})
// 2. rigth 버튼을 눌렀을 때,
// 말이 오른쪽으로 50px씩 이동
$(document).on('click', '.btn.right', ()=>{
if(move>0){
move -= 50
$('#horse').css('right', move+'px')
}
})
// left, right를 키보드로 조작
$('body').on('keydown', (event)=>{
console.log(event.keyCode)
if(event.keyCode == 37){
if(move<1200){
move += 50
$('#horse').css('right', move+'px')
}
}else if(event.keyCode == 39){
if(move>0){
move -= 50
$('#horse').css('right', move+'px')
}
}else if(event.keyCode == 32){
$('#horse')
.stop(true)
.animate({bottom:'400px'}, 300)
.animate({bottom:'200px'}, 300)
}
})
move_horse.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="css/moveImgStyle.css"/>
</head>
<body>
<div id="bg">
<img id="horse" src="img/horse.png" />
<button class="btn left">LEFT</button
><button class="btn right">RIGHT</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="js/event.js"></script>
</body>
</html>728x90
반응형
'언어 > JavaScript' 카테고리의 다른 글
| JS_Ajax_실습 (0) | 2022.07.14 |
|---|---|
| JS_Ajax_이론 (0) | 2022.07.14 |
| JS_jQuery 실습 (0) | 2022.07.13 |
| JS_jQuery(라이브러리) (0) | 2022.07.12 |
| JS_CallBack 함수 (0) | 2022.07.12 |