웹페이지

JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임

2023. 4. 28. 17:45
728x90

★ 고양이 잡기 게임

  • 5개의 단계에 거쳐 나타나는 고양이를 포획하는 게임

■ HTML 코드

<body onselectstart="return false;" oncontextmenu="return false;" ondragstart="return false;">
    <h1>Catch Cat</h1>
    <div id="box">
        <input type="text" id="score" name="score" readonly>
        <div id="count">
            <img class="citem" name="imgPenalty">
            <img class="citem" name="imgPenalty">
            <img class="citem" name="imgPenalty">
	</div>
	
    </div>
    <div id="area">

    </div>
    <div id="stat">Ready</div>
</body>

■ CSS 코드

<style>

    body {
        transition-property: filter, -webkit-filter;
        transition-duration: 3s;
    }

    h1 { font-family: arial; font-size: 3em; font-variant: small-caps; text-align: center; margin-bottom: 5px; }
    #box {
        border: 10px solid #999;
        border-radius: 15px;
        width: 300px;
        height: 200px;
        margin: 0px auto;
        background: #eee;
        transform: translate(0px, 0px);
        z-index: 3;
        position: relative;
        left: 0px;
        top: 0px;
    }
    #score {
        font-family: impact;
        font-weight: bold;
        font-size: 7em;
        color: cornflowerblue;
        text-align: center;
        border: 0px;
        outline: none;
        width: 300px;
        background-color: transparent;
    }
    #area {
        border: 5px solid #ccc;
        border-radius: 10px;
        width: 1400px;
        height: 650px;
        margin: -130px auto;
        position: relative;
        left: 0px;
        top: 0px;
        z-index: 1;
    }
    .citem {
        width: 50px;
        height: 50px;
        float: left;
        margin-left: 10px;
    }
    .citem:first-child {
        margin-left: 70px;
    }

    .vibCat {
        animation: keyCat .1s infinite alternate;
    }

    @keyframes keyCat {
        0% { transform: translate(0px, 0px); }
        25% { transform: translate(15px, 0px); }
        50% { transform: translate(0px, 0px); }
        75% { transform: translate(-15px, 0px); }
        100% { transform: translate(0px, 0px); }
    }

    #stat {
        font-size: 7em;
        font-variant: small-caps;
        font-family: Arial;
        text-align: center;
        color: tomato;
        margin-top: -400px;
        position: relative;
        left: 0px;
        top: 0px;
        z-index: 5;
    }

</style>

■ JavaScript

<script>
    var n = 0;
    var score, imgPenalty, area;
    var timer = 0;
    var interval = 1500;
    var vibInterval = 5000;
    var catno = 1;
    var penalty = 0;
    var tlist = [];
    var tlist2 = [];
    var temp, temp2;
    var stat;

    window.onload = function() {
        score = document.all["score"];
        imgPenalty = document.all["imgPenalty"];
        area = document.getElementById("area");
        stat = document.getElementById("stat");

        //img1.src = "images/x.png";

        score.value = n;

        setTimeout(function() {
            stat.style.color = "cornflowerblue";
            stat.innerText = "Phase A";
            setTimeout(function() {
                timer = setInterval(run, interval);
                tlist.push(timer);
                stat.style.display = "none";
            }, 1000);
        }, 1000);

    };


    function run() {
        var cat = document.createElement("img");
        cat.src = "images/catty0" + catno + ".png";
        cat.style.position = "absolute";
        cat.style.left = parseInt(Math.random() * 1200) + "px";
        cat.style.top = parseInt(Math.random() * 500) + "px";

        area.appendChild(cat);
        temp = setInterval(function() {
            arguments[0].className = "vibCat";
            temp2 = setTimeout(function() {
                area.removeChild(arguments[0]);

                imgPenalty[penalty].src = "images/x.png";
                penalty++;
                if (penalty >= 3) {
                    for (var i=0; i<tlist.length; i++) {
                        clearInterval(tlist[i]);
                    }for (var i=0; i<tlist2.length; i++) {
                        clearTimeout(tlist2[i]);
                    }
                    for (var i=0; i<area.childNodes.length; i++) {
                        area.childNodes[i].className = "";
                        area.childNodes[i].onclick = null;
                    }
                    document.body.style["-webkit-filter"] = "grayscale(100%)";
                    document.body.style["filter"] = "gray";
                }
            }, vibInterval, cat);
            tlist2.push(temp2);
        }, vibInterval, cat);

        tlist.push(temp);

        cat.onclick = function() {
            n++;
            score.value = n;
            area.removeChild(event.srcElement);

            area.style.backgroundColor = "tomato";
            setTimeout(function() {
                area.style.backgroundColor = "transparent";
            }, 10);

            if (n == 10) {
                clearInterval(timer);
                interval -= 300;
                vibInterval -= 1000;

                stat.innerText = "Phase B";
                stat.style.display = "block";

                setTimeout(function() {
                    timer = setInterval(run, interval);
                    tlist.push(timer);
                    stat.style.display = "none";
                }, 1000);
            }

            if (n == 20) {
                clearInterval(timer);
                interval -= 300;
                vibInterval -= 1000;
                stat.innerText = "Phase C";
                stat.style.display = "block";

                setTimeout(function() {
                    timer = setInterval(run, interval);
                    tlist.push(timer);
                    stat.style.display = "none";
                }, 1000);
            }

            if (n == 30) {
                clearInterval(timer);
                interval -= 300;
                vibInterval -= 1000;
                stat.innerText = "Phase D";
                stat.style.display = "block";

                setTimeout(function() {
                    timer = setInterval(run, interval);
                    tlist.push(timer);
                    stat.style.display = "none";
                }, 1000);
            }

            if (n == 40) {
                clearInterval(timer);
                interval -= 300;
                vibInterval -= 1000;
                stat.innerText = "Phase Final";
                stat.style.display = "block";

                setTimeout(function() {
                    timer = setInterval(run, interval);
                    tlist.push(timer);
                    stat.style.display = "none";
                }, 1000);
            }

        };

        catno++;
        if (catno > 9) catno = 1;

    }
</script>

■ 실행 결과

나타나는 고양이를 포획, 잡은 수 만큼 스코어가 올라가고, 3번 놓쳤을 경우, 게임오버

 

 

 

 

 

■ 시뮬레이션

Document

Catch Cat

Ready
728x90

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

JAVASCRIPT STEP 58 - JSON  (0) 2023.05.04
JAVASCRIPT STEP 56 - 이동하는 고양이를 잡기  (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 56 - 이동하는 고양이를 잡기
  • JAVASCRIPT STEP 55 - 다량의 선 애니메이션
  • JAVASCRIPT STEP 54 - 셀 클릭 애니메이션
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 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

인기 글

태그

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

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
JAVASCRIPT STEP 57 - 두더지(고양이)잡기 게임
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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