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

이전 글 "Native JS로 Don't Step on the White Blocks 게임 구현(7)"에서 Don't Step on the White Blocks 게임을 구현하기 위한 몇 가지 js 메소드에 대해 설명했습니다.

이전 글에 이어서 흰색 블록 밟지 마세요 게임을 구현하는 js 메소드를 계속 소개하겠습니다.

해당 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)


}

이 코드에서는 getComputeStyle(obj, null)['top'] 메소드를 사용하여 main의 top 속성을 가져오고 설정합니다. 그런 다음 if 문을 통해 판단합니다. 여기서 상단 값이 0보다 크거나 같으면 CDiv 메서드를 호출하여 div를 동적으로 생성하고 여기에 클래스 이름 "row"를 추가한 다음 상단의 초기 값을 설정합니다. -150px까지.

Don't Step on White Blocks 게임에 대한 전체 코드 참조: " Don't Step on White Blocks 게임의 기본 JS 구현(1)"

글이 길어서 이 글은 다음과 같습니다. 여기에서 소개하고 이후 기사에서 소개할 예정입니다. "Don't Step on the White Blocks" 미니 게임에서 js 구현 방법을 계속해서 단계별로 소개하겠습니다.

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