네이티브 JS는 흰색 블록 게임을 밟지 마세요(10)를 구현합니다.

藏色散人
풀어 주다: 2021-01-11 11:08:51
원래의
5112명이 탐색했습니다.

네이티브 JS를 사용하여 Don't Step on White Blocks 게임을 구현하는 방법 이전 기사에서는 JS 메소드의 중요한 부분을 순차적으로 설명했습니다. 이 섹션의 내용은 이전 기사 "Native JS 구현을 위한 흰색 블록 게임(9) "과 결합되어 나머지 js 구현 방법을 소개합니다.

네이티브 JS는 흰색 블록 게임을 밟지 마세요(10)를 구현합니다.

흰색 블록을 밟지 마세요 관련 js 코드는 다음과 같습니다.

//移动效果

function move(obj) {

    //默认速度与计分

    var speed = 5, num = 0;

    obj.timer = setInterval(function () {

        //速度

        var step = parseInt(getComputedStyle(obj, null)['top']) + speed;

        obj.style.top = step + 'px'

        if (parseInt(getComputedStyle(obj, null)['top']) >= 0) {

           CDiv('row');

            obj.style.top = -150 + 'px';

        }

        if (obj.children.length == 6) {

            for (var i = 0; i < 4; i++) {

                if (obj.children[obj.children.length - 1].children[i].className == &#39;i&#39;) {

                    //游戏结束

                    obj.style.top = &#39;-150px&#39;;

                    count.innerHTML = &#39;游戏结束,最高得分: &#39; + num;

                    //关闭定时器

                    clearInterval(obj.timer);

                    //显示开始游戏

                    go.children[0].innerHTML = &#39;游戏结束&#39;;

                    go.style.display = "block";

                }

            }

            obj.removeChild(obj.children[obj.children.length - 1]);

        }

        //点击与计分

        obj.onmousedown = function (event) {

            //点击的不是白盒子

            // 兼容IE

            event = event || window.event;

            if ((event.target ? event.target : event.srcElement).className == &#39;i&#39;) {

                //点击后的盒子颜色

                (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";

                //清除盒子标记

                (event.target ? event.target : event.srcElement).className = &#39;&#39;;

                //计分

                num++;

                //显示得分

                count.innerHTML = &#39;当前得分: &#39; + num;

            }

            else {

                //游戏结束

                obj.style.top = 0;

                count.innerHTML = &#39;游戏结束,最高得分: &#39; + num;

                //关闭定时器

                clearInterval(obj.timer);

                //显示开始游戏

                go.children[0].innerHTML = &#39;游戏结束&#39;;

                go.style.display = "block";

            }

            //盒子加速

            if (num % 10 == 0) {

                speed++;

            }

        }

        //松开触发停止

        obj.onmouseup = function (event) {

        }

    }, 20)

}
로그인 후 복사

기준 이전 글의 내용에 이어 보너스 부분을 클릭하는 js 메소드를 소개하겠습니다. 여기서는 obj.onmousedown 마우스 이벤트를 추가합니다. 게임 영역에서 마우스를 클릭하면 위 함수 메소드는 다음과 같습니다. 호출되고 이벤트 객체, 즉 div 요소가 획득됩니다. 이 방법에서는 if 문을 통해 채점 상황을 판단합니다.

클릭한 div 블록 클래스가 i(색상 사각형을 의미)인 경우 배경색 backgroundColor(여기서는 회색 #bbb)를 변경합니다. 그런 다음 "i"를 덮고 공백을 지운 다음 점수 num++를 계산하여 개수로 표시합니다.

흰색 영역을 클릭하면 게임이 종료되고 최종 점수가 계산되며 타이머가 꺼집니다.

흰색 블록을 밟지 마세요 게임의 전체 코드는 다음을 참조하세요. " 흰색 블록을 밟지 마세요 게임의 네이티브 JS 구현(1) "

이 글은 네이티브 JS를 사용하여 Don't Step on White Blocks 게임을 구현하는 몇 가지 방법을 소개합니다. 글이 너무 길어서 다음으로 넘어갑니다. 이후 기사에서 계속 설명하겠습니다.

위 내용은 네이티브 JS는 흰색 블록 게임을 밟지 마세요(10)를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!