웹페이지

JAVASCRIPT STEP 56 - 이동하는 고양이를 잡기

2023. 4. 28. 17:41
728x90

★ 이동하는 고양이를 잡기

  • 이동하는 고양이를 클릭하여 포착하기

■ HTML 코드

<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
	<div id="box">
		<div id="bar1"></div>
		<div id="bar2"></div>
	</div>
</body>

■ CSS 코드

<style>
    body { background-color: #444; margin-top: 150px; }
    #box { border: 10px solid black; width: 700px; height: 700px; margin: 50px auto; overflow: hidden; position: relative; left: 0px; top: 0px; background-color: white; border-radius: 50%;}
    #bar1 { border-top: 3px solid tomato; width: 700px; position: absolute; left: 0px; top: 348px; }
    #bar2 { border-top: 3px solid tomato; width: 700px; position: absolute; left: 0px; top: 348px; transform: rotate(90deg); }
</style>

■ JavaScript

<script>
    var box;
    var timer;
    var cat;
    var catTimer;

    window.onload = function() {

        box = document.getElementById("box");

        timer = setTimeout(run, (parseInt(Math.random() * 3) + 3) * 1000);



        box.onmousedown = function() {
            if (parseInt(cat.style.left) >= 222 && parseInt(cat.style.left) <= 345) {
                box.style.backgroundColor = "rgba(255, 0, 0, .6)";
                clearInterval(catTimer);
                clearTimeout(timer);
            } else {
                box.style.backgroundColor = "rgba(255, 0, 0, .6)";
                setTimeout(function() {
                    box.style.backgroundColor = "white";
                }, 100);
            }
        };
    };

    function run() {

        if (cat != null) {
            box.removeChild(cat);
            clearInterval(catTimer);
        }

        cat = document.createElement("img");
        cat.src = "images/catty0" + (parseInt(Math.random() * 9) + 1) + ".png";
        cat.style.position = "relative";
        cat.style.left = "-130px";
        cat.style.top = "286px";
        box.appendChild(cat);

        catTimer = setInterval(function() {
            cat.style.left = parseInt(cat.style.left) + 10 + "px";
        }, parseInt(Math.random() * 30));


        timer = setTimeout(run, (parseInt(Math.random() * 3) + 3) * 1000);
    }

</script>

■ 실행 결과

이동하는 고양이를 클릭하여 포획

 

 

 

 

 

■ 시뮬레이션

Document
728x90
저작자표시 비영리 변경금지 (새창열림)

'웹페이지' 카테고리의 다른 글

JAVASCRIPT STEP 58 - JSON  (0) 2023.05.04
JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임  (0) 2023.04.28
JAVASCRIPT STEP 55 - 다량의 선 애니메이션  (0) 2023.04.28
JAVASCRIPT STEP 54 - 셀 클릭 애니메이션  (0) 2023.04.28
JAVASCRIPT STEP 53 - 이미지 뷰어  (0) 2023.04.28
'웹페이지' 카테고리의 다른 글
  • JAVASCRIPT STEP 58 - JSON
  • JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임
  • JAVASCRIPT STEP 55 - 다량의 선 애니메이션
  • JAVASCRIPT STEP 54 - 셀 클릭 애니메이션
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • jsp
  • React
  • 자바
  • jquery
  • DBA
  • 정보보안전문가
  • ajax
  • 앱개발자
  • 웹개발자
  • 프론트엔드
  • 웹페이지
  • 백준
  • html
  • 정보처리기사필기
  • 개발블로그
  • 데이터베이스
  • 개발자
  • java
  • 웹개발
  • IT자격증공부
  • IT개발자
  • it
  • IT자격증
  • 코딩테스트
  • JavaScript
  • 알고리즘
  • css
  • 정보처리기사
  • 백엔드
  • DB

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
JAVASCRIPT STEP 56 - 이동하는 고양이를 잡기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.