SMALL
<조건>
- 3x3 2차원 배열을 만들어 "★"이 9칸 안에서 돌아다닐 수 있도록
- 빈 칸은 "□"로 표현
- idx 값이 벗어났을 때, (0~2값을 벗어났을 때) 경고창을 띄우고 그 전 값에 머물도록 함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var map=[
['★','□','□'],
['□' ,'□','□'],
['□' ,'□','□']
]
var x=0
var y=0
function init(){
var fullText=''
for(var i=0; i<=2; i++){
for(var j=0; j<=2; j++){
fullText += map[i][j]
}
fullText += "<br>"
}
$('#map-area').html(fullText)
}
function refresh(){
$('#map-area').html('')
var fullText=''
for(var i=0; i<=2; i++){
for(var j=0; j<=2; j++){
fullText += map[i][j]
}
fullText += "<br>"
}
$('#map-area').html(fullText)
}
init()
$(document).on("keydown",keyEventFnc)
function keyEventFnc(e){
switch(e.keyCode){//키코드 값
case 37://LEFT 키코드 값
$("#user-id").val("LEFT")
map[y][x]='□'
x--
if (x < 0) {
alert("don't move");
x = 0
}
map[y][x]='★'
break;
case 38://TOP 키코드 값
$("#user-id").val("TOP")
map[y][x]='□'
y--
if (y < 0) {
alert("don't move");
y = 0
}
map[y][x]='★'
break;
case 39://RIGHT 키코드 값
$("#user-id").val("RIGHT")
map[y][x]='□'
x++
if (x >= 3) {
alert("don't move");
x = 2
}
map[y][x]='★'
break;
case 40://BOTTOM 키코드 값
$("#user-id").val("BOTTOM")
map[y][x]='□'
y++
if (y >= 3) {
alert("don't move");
y = 2
}
map[y][x]='★'
break;
}
refresh()//repaint
}
})
</script>
</head>
<body>
<p>
<input type="text" name="user-id" id="user-id">
</p>
<div id="map-area">
</div>
</body>
</html>
728x90
'JQuery' 카테고리의 다른 글
| [FrontEnd3] 무신사 로그인 창 제작 (0) | 2022.07.03 |
|---|---|
| [FrontEnd3] "keydown" 이벤트로 간단한 피아노 만들기 (0) | 2022.06.18 |
댓글