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

기본 JS를 사용하여 Don't Step on White Blocks 게임을 구현하는 전반적인 아이디어는 이전 기사에서 간략하게 소개되었습니다. 다음을 참조할 수 있습니다: "흰색 블록을 밟지 마세요 게임의 기본 JS 구현(3)"

이제 계속해서 소스 코드의 js 코드 부분을 결합하고 js 메소드를 소개하겠습니다. 하나씩.

js 코드의 일부는 다음과 같습니다.

<script>
    var main = document.getElementById(&#39;main&#39;)
    go = document.getElementById(&#39;go&#39;)
    count = document.getElementById(&#39;count&#39;);
//设置四种颜色
    cols = [&#39;#1AAB8A&#39;, &#39;#E15650&#39;, &#39;#121B39&#39;, &#39;#80A84E&#39;];
//动态创建div
    function CDiv(classname) {
        var Div = document.createElement(&#39;div&#39;)
        //生成随机数
        index = Math.floor(Math.random() * 4)
        Div.className = classname
        for (var i = 0; i < 4; i++) {
            var iDiv = document.createElement(&#39;div&#39;)
            Div.appendChild(iDiv)
        }
        if (main.children.length == 0) {
            main.appendChild(Div);
        } else {
            main.insertBefore(Div, main.children[0]);
        }

        Div.children[index].style.backgroundColor = cols[index];
        Div.children[index].className = "i";
    }
</script>

이 코드에서는 CDiv 메소드를 사용하여 div를 동적으로 생성합니다. 이 방법에서는 변수 Div와 index를 정의합니다.

createElement() 메소드는 이름을 지정하여 요소를 생성합니다. (참고: 모든 주요 브라우저는 createElement() 메서드를 지원합니다.)

floor() 메서드 는 x보다 작거나 같은 가장 큰 정수를 반환합니다[여기: Math.random() * 4]. 전달된 매개변수가 정수인 경우 값은 변경되지 않습니다.

random() 메서드는 0~1 사이의 난수를 반환할 수 있습니다. Math.random() 함수는 해당 범위에서 거의 균일한 분포를 갖는 0-1 범위(0 포함, 1 제외)의 부동 소수점 의사 난수를 반환합니다. 그런 다음 원하는 범위로 확장할 수 있습니다. 사용자가 선택하거나 재설정할 수 있습니다.

그러면 여기서 생성된 무작위 값 인덱스는 Don't Step on the White Blocks 미니 게임에서 무작위로 연속으로 나타나는 색상 사각형을 나타냅니다.

Div.className은 CDiv 메소드에 전달된 classname 매개변수인 class의 값을 설정하거나 반환하는 것을 의미합니다.

공간 문제로 인해 여기에서 먼저 js 메서드를 소개하겠습니다. 이후 글에서는 나머지 js 부분의 구현 방법을 계속 소개하겠습니다.

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