728x90
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrapper {
position: relative;
margin: 0px auto;
width: 400px;
height: 300px;
background-color: rgba(31, 143, 187, 0.562);
}
#id_bar {
position: absolute;
bottom: 40px;
width: 80px;
height: 20px;
background-color: wheat;
}
#id_ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 15px 15px;
background-color: wheat;
}
</style>
</head>
<body>
<input type="button" onclick="f_move()" value="공 튀기기 시작">
<div id="wrapper" tabindex="0" onkeydown=f_lrMove()>
<div id="id_bar"></div>
<div id="id_ball"></div>
</div>
<script>
var v_bar = document.getElementById("id_bar");
var v_ball = document.getElementById("id_ball");
var v_btn = document.getElementById("id_btn");
var v_w = document.getElementById("wrapper");
var v_parWidth;
var v_parHeight;
var v_mvWidth = 10;
var v_mW = 10;
var v_mH = 10;
var isRun = false;
function f_move() {
if (!isRun) {
f_mv1();
isRun = true;
}
}
function f_mv1() {
v_parWidth = parseInt(v_w.style.width);
v_parHeight = parseInt(v_w.style.height);
var v_left = parseInt(v_ball.style.left);
var v_top = parseInt(v_ball.style.top);
v_ball.style.left = v_left + v_mW + "px";
v_ball.style.top = v_top + v_mH + "px";
v_left = parseInt(v_ball.style.left);
v_top = parseInt(v_ball.style.top);
// alert(v_top);
if ((v_left + 25) >= v_parWidth || v_left <= 0) {
v_mW = -v_mW;
}
if ((v_top + 25) >= v_parHeight || v_top <= 0) {
v_mH = -v_mH;
}
setTimeout(f_mv1, 100);
}
function f_lrMove() {
// 좌우 화살표 눌렀을 때 막대 움직이기
if (event.keyCode == 37) { // 왼쪽 화살표
//왼쪽으로 가는 건 left값이 0보다 클때만
if (parseInt(v_bar.style.left) > 0) {
v_bar.style.left = parseInt(v_bar.style.left) - v_mvWidth + "px";
}
// if (parseInt(v_ball.style.left) > 0) {
// v_ball.style.left = parseInt(v_ball.style.left) - v_mar + "px";
// }
}
if (event.keyCode == 39) { // 오른쪽 화살표
//오른쪽으로 가는 건 left값 + 막대width가 wrapper넓이보다 작을때
if ((parseInt(v_bar.style.left) + 80) < 400) {
v_bar.style.left = parseInt(v_bar.style.left) + v_mvWidth + "px";
}
// if ((parseInt(v_ball.style.left) + 20) < 400) {
// v_ball.style.left = parseInt(v_ball.style.left) + v_mar + "px";
// }
}
}
// 초기세팅이 필요한 일들은 window.onload 이벤트에 모아서
window.onload = function () {
if (!v_w.style.width) {
v_w.style.width = "400px";
}
if (!v_w.style.height) {
v_w.style.height = "300px";
}
if (!v_bar.style.left) {
v_bar.style.left = "0px";
}
if (!v_ball.style.left) {
v_ball.style.left = "0px";
}
if (!v_bar.style.bottom) {
v_bar.style.top = v_bar.style.bottom;
}
if (!v_ball.style.top) {
v_ball.style.top = "0px";
}
}
// 여기서 문제 막대가 좌우로 움직이는데
// 부모(wrapper)를 벗어나지 않게 해 주세용
</script>
</body>
</html>'화면구현 > HTML' 카테고리의 다른 글
| 일반버튼으로submit (0) | 2020.07.09 |
|---|---|
| 자바스크립트가나온이유 (0) | 2020.07.09 |
| [php] location (0) | 2020.07.08 |
| [php] action과 get, post (0) | 2020.07.08 |
| WAS와 Web Server차이 (0) | 2020.07.08 |