Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

codingfarm

switch, keydown- 물고기 움직이기 본문

web/JQuery

switch, keydown- 물고기 움직이기

scarecrow1992 2020. 10. 11. 16:01

요구사항

1. 초기시작위치 : x(left) = 50, y(top) = 200

2. 상,하,좌,우 화살표 버튼을 누를 경우 해당방향으로 50씩 이동

3. 물고기가 움직이는 영역(#panel)밖으로 넘어서면 안됨

 

구현

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style>
        body {
            font-size: 9pt;
        }
 
        #panel {
            width: 500px;
            height: 500px;
            border: 1px solid #999;
            position: relative;
        }
 
        #fish {
            position: absolute;
            left: 50px;
            top: 200px;
        }
 
    </style>
 
    <script type="text/javascript"  src="../../../libs/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 물고기 노드 구하기.
            var $fish = $("#fish");
            // 위치 초기화, 시작위치는 50, 200
            var x = 50;
            var y = 200;
 
            // 키보드 다운 이벤트 리스너 등록
            $(document).keydown(function(e) {
                console.log("입력한 키 코드 값 = " + e.keyCode);
 
                /*
                 * 화살표 키에 따른 물고기 위치 움직이기
                 * keyCode
                 * 37 : 왼쪽 화살표
                 * 39 : 오른쪽 화살표
                 * 38 : 위쪽 화살표
                 * 40 : 아래쪽 화살표
                 */
                //여기에 소스를 입력해주세요.
                switch(e.keyCode){
                    // 왼쪽 화살표
                    case 37 :
                        x-=50;
                        break;
                    // 오른쪽 화살표
                    case 39 :
                        x+=50;
                        break;
                    // 위쪽 화살표
                    case 38 :
                        y-=50;
                        break;
                    // 아랫쪽 화살표
                    case 40 :
                        y+=50;
                        break;
                }
 
                // 물고기 유효값 처리
                if(x<0)
                    x=0;
                // 패널 너비=500, 물고기 너비=120
                if(x>500-120)
                    x=500-120;
                if(y<0)
                    y=0;
                // 패널 높이=500, 물고기 너비 = 70
                if(y>500-70)
                    y=500-70;
 
                // 물고기 이동 위치 확인하기
                console.log("물고기 위치값 ", x, y);
 
                // 물고기 이동시키기
                $fish.css({
                    left:x,
                    top:y
                });
            });
        })
 
    </script>
 
</head>
 
<body>
<div id="panel">
    <img src="fish.png" id="fish">
</div>
</body>
</html>
 
 
cs

 

저작자표시

'web > JQuery' 카테고리의 다른 글

.eq() - 이미지 배열하기  (0) 2020.10.11
addClass, removeClass - 체크박스 만들기  (0) 2020.10.11
<input> 태그의 값 읽기 - 물고기 움직이기  (0) 2020.10.09
사용법  (0) 2020.10.09
소개  (0) 2020.10.09
'web/JQuery' Related Articles more
Comments