<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#myimg{
position: absolute;
}
</style>
<script type="text/javascript">
var myimg;
var xpos=500;
var ypos=300;
window.onload=function(){
myimg=document.getElementById("myimg");
myimg.style.top=ypos+"px";
myimg.style.left=xpos+"px";
//키보드의 아스키코드값 확인
window.onkeyup=function(e){
console.log(e.keyCode); //4방향키와 엔터의 아스키코드값
//상:38 하:40 좌:37 우:39 엔터:13
switch(e.keyCode)
{
case 38:
ypos-=10;
myimg.style.top=ypos+"px";
break;
case 40:
ypos+=10;
myimg.style.top=ypos+"px";
break;
case 37:
xpos-=10;
myimg.style.left=xpos+"px";
break;
case 39:
xpos+=10;
myimg.style.left=xpos+"px";
break;
case 13:
xpos=500;
ypos=300;
myimg.style.top=ypos+"px";
myimg.style.left=xpos+"px";
break;
}
}
}
</script>
</head>
<body>
<!-- 이미지를 초기값 xpos=500, ypos=300 에서 시작
방향키 를 누를때마다 해당방향으로 10씩 이동,엔터키 누르면 다시 시작위치로
엔터13, 상38, 하40, 좌37, 우39 -->
<img alt="" src="../image/07.png" id="myimg">
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210929_calendar (0) | 2021.09.29 |
|---|---|
| 210929_form,setInterval (0) | 2021.09.29 |
| 210928_time,setInterval,setTimeout,image (0) | 2021.09.28 |
| 210928_setInterval,setTimeout,clearInterval,keyCode (0) | 2021.09.28 |
| 210928_image,random,marquee,array,button (0) | 2021.09.28 |