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

이전 글 "Don't Step on White Blocks Game (5)의 Native JS 구현
"에서 게임 소스코드의 CDiv 방식을 분석해보았습니다. 그래서 이번 섹션에서는 계속해서 move 메소드를 소개하겠습니다.

이제 관련 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)


}

위 코드에서는 이동 메서드를 정의합니다. 이 이동 메서드는 게임의 동적 실행과 타이밍 및 득점 기능을 구현하는 데 사용됩니다.

예를 들어 다음 코드를 주석 처리하고

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]);
        }

를 전경에서 실행하면 클릭하여 게임을 시작할 때 게임 영역을 클릭하든 안 클릭하든 아무 일도 일어나지 않는다는 것을 알 수 있습니다. 흰색 블록을 클릭하면 Game Over라고 표시되고 계속 아래로 이동합니다. 그런 다음 이 코드를 사용하여 게임 시작 및 종료 여부를 결정합니다.

또 다른 예로, 위 코드에 클릭 및 점수 코드에 주석을 추가했습니다.

obj.onmousedown = function (event) {
    //点击的不是白盒子
    // 兼容IE
    event = event || window.event;
    if ((event.target ? event.target : event.srcElement).className == 'i') {
        //点击后的盒子颜色
        (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";
        //清除盒子标记
        (event.target ? event.target : event.srcElement).className = '';
        //计分
        num++;
        //显示得分
        count.innerHTML = '当前得分: ' + num;

    }
    else {
        //游戏结束
        obj.style.top = 0;
        count.innerHTML = '游戏结束,最高得分: ' + num;
        //关闭定时器
        clearInterval(obj.timer);
        //显示开始游戏
        go.children[0].innerHTML = '游戏结束';
        go.style.display = "block";
    }
    //盒子加速
    if (num % 10 == 0) {
        speed++;
    }
}

다시 실행하면 게임이 시작된 후 게임 영역을 클릭해도 더 이상 클릭 및 점수가 표시되지 않는 것을 확인할 수 있습니다. 기능 효과.

그렇다면 모두가 이미 이 두 코드의 기능을 이해하고 있다고 믿습니다. 기사가 길기 때문에 이후 기사에서 특정 코드 구현 방법을 계속 분석할 것입니다.

🎜

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