흰색 블록을 밟지 않는 게임의 웹 버전을 구현하는 방법(코드 예)

이 글은 흰색 블록을 밟지 않는 게임의 웹 버전(코드 예제)을 사용하고 구현하는 방법을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근에 작은 프로젝트를 해보고 싶었는데, 큰 시스템을 만들기에는 코딩 실력이 너무 부족해서 그냥 평생 배운 것들을 활용해서 작은 게임을 작성하고 있어요, 하하하
밟지 마세요. 화이트 블록. 많은 사람들이 이 게임을 휴대폰으로 가지고 있는 것 같아요. 오늘은 웹 버전을 만들어 보겠습니다.

. 손가락 터치를 사용하는 웹 버전에서는 마우스로 검은색 블록을 클릭해야 합니다. 게임을 시작하려면 페이지를 새로 고치세요. 초보자도 이 미니 게임의 가장 중요한 코드 부분을 빠르게 이해할 수 있습니다. YES~

시작하기 전에 전체 게임 과정을 간단히 분석해 보겠습니다. 특정 속도로 아래로 이동하고 검은색 블록을 클릭하면 검은색 블록이 사라지고 새로운 검은색 블록이 눈에 보이는 게임의 시작이 되어야 합니다 일반 게이머의 경우, 검은색 블록은 계속해서 아래쪽으로 이동하며, 검은색 블록이 바닥에 닿으면 게임이 종료되고, 우리에게는 검은색 블록과 흰색 블록이 모두 데이터 구조로 추상화됩니다. 검은색 블록은 실제로 데이터 구조의 생성 및 파괴입니다. 작성될 기능에 대한 일반적인 이해를 돕기 위해 게임의 흐름도를 살펴보겠습니다.

페이지 레이아웃

당신 흰색 블록을 밟지 않으려면 div+css 레이아웃을 사용할 수 있습니다. 정적 효과 표시를 위해 HTML 코드를 직접 입력해 보겠습니다. 아이디어는 메인 인터페이스를 4×4의 큰 직사각형 그리드로 분해하는 것입니다. 각 사각형은 각 행의 4개의 흰색 블록 중 하나를 나타냅니다. 각 행에 무작위로 생성되지만 여기에는 정적 페이지가 있으므로 직접 결정한 다음 통과할 수 있습니다. CSS는 스타일을 제어합니다.

nbsp;html>


    <meta>
    <title>别踩白块</title>
    <style>
    </style>


    <div>
        <div>
            <div>
                <div></div>/*白块*/
                <div></div>/*黑块*/
                <div></div>
                <div></div>
            </div>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>

<script>
</script>

게임 초기화

이전 HTML 부분에 따르면 각

class="cell black">은 검정색 블록을 클릭하여 사라질 때마다 실제로

를 클릭한 다음 위에서 새로운

를 추가하세요. 따라서 먼저 js를 통해

생성 및 생성(정적 페이지 작성 시 지정되고 생성된 4개의 div.rows를 삭제하는 것을 기억하세요). 구체적인 방법은 다음과 같습니다.

//创建div, 参数className是其类名
    function creatediv(className){
        var div = document.createElement('div');
        div.className = className;
        return div;
    }

    // 创造一个<div>并且有四个子节点<div>
    function createrow(){
        var con = $('con');
        var row = creatediv('row'); //创建div className=row
        var arr = creatcell(); //定义div cell的类名,其中一个为cell black

        con.appendChild(row); // 添加row为con的子节点

        for(var i = 0; i     
    function delrow(){
            var con = $('con');
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

    //创建一个类名的数组，其中一个为cell black, 其余为cell
    function creatcell(){
        var temp = ['cell', 'cell', 'cell', 'cell',];
        var i = Math.floor(Math.random()*4);//随机生成黑块的位置
        temp[i] = 'cell black';
        return temp;
    }<p><strong>Make the black block move</strong></p>
<p>js를 통해 div를 생성하고 제거한 후에는 검은색 블록을 이동시켜야 합니다. 이때 CSS&lt ;div에 언급된 설정을 사용합니다.
id="con"> </p>
<div id="row"> 행을 숨기고 js의 DOM을 전달합니다.
아래쪽으로 이동하도록 작동하고 타이머를 30밀리초마다 이동하도록 설정하여 검은색 블록이 이동하는 동안 검은색 블록이 바닥에 닿았는지 확인해야 합니다. 바닥에 닿으면 게임이 실패합니다.
 move(), 바닥에 닿은 후 실패() 함수를 호출하면 게임이 실패합니다. 구체적인 방법은 다음과 같습니다. <pre class="brush:php;toolbar:false">//使黑块向下移动    
    function move(){
        var con = $('con');
        var top = parseInt(window.getComputedStyle(con, null)['top']);

        if(speed + top > 0){
            top = 0;
        }else{
            top += speed;
        }            
        con.style.top = top + 'px';

        if(top == 0){
            createrow();
            con.style.top = '-100px';
            delrow();
        }else if(top == (-100 + speed)){
            var rows = con.childNodes;
            if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                fail();
            }
        }
    }

    function fail(){
            clearInterval(clock);
            confirm('你的最终得分为 ' + parseInt($('score').innerHTML) );
        }
点击黑块事件

让黑块动起来之后呢，就要考虑用户有没有点击到黑块，用户若点击到黑块我们要让所在那一行消失，那么就需要一个 judge 方法，具体如下：

//判断用户是否点击到了黑块，
function judge(ev){
    if (ev.target.className.indexOf('black') != -1) {
        ev.target.className = 'cell';
        ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
        score();
    }
}

이 단계에서 몇 가지 핵심 기능 포인트가 구현되었습니다. 완전한 논리 관계를 형성합니다.

완전한 코드

nbsp;html>


    <meta>
    <title>别踩白块</title>
    <style>
        #score{
            text-align: center;}

        h2 {
            text-align: center;    }

        div{
            margin: 0 auto;
            width: 100px;
            height: 100px;}

        #main {
            width: 400px;
            height: 400px;
            background: white;
            border: 2px solid gray;
            margin: 0 auto;
            position: relative;
            overflow: hidden;}

        #con {
            width: 100%;
            height: 400px;
            position: relative;
            top: -100px;
            border-collapse:collapse;}

        .row{
            height: 100px;
            width: 100%;}

        .cell{
            height: 100px;
            width: 100px;
            float: left;}

        .black {
            background: black;}
    </style>



    <h2>score</h2>
    <h2>0</h2>
    <div>
        <div></div>
    </div>

<script>
    var clock = null;
    var state = 0;
    var speed = 4;

        /*
        *    初始化 init
        */
        function init(){
            for(var i=0; i<4; i++){
                createrow();
            }

            // 添加onclick事件
            $(&#39;main&#39;).onclick = function(ev){
                judge(ev);
            }

            // 定时器 每30毫秒调用一次move()
                clock = window.setInterval(&#39;move()&#39;, 30);
        }

        // 判断是否点击黑块
        function judge(ev){
            if (ev.target.className.indexOf(&#39;black&#39;) != -1) {
                ev.target.className = &#39;cell&#39;;
                ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
                score();
            }
        }

        // 游戏结束
        function fail(){
            clearInterval(clock);
            confirm(&#39;你的最终得分为 &#39; + parseInt($(&#39;score&#39;).innerHTML) );
        }

        // 创建div, className是其类名
        function creatediv(className){
            var div = document.createElement(&#39;div&#39;);
            div.className = className;
            return div;
        }

        // 创造一个<div class="row">并且有四个子节点<div class="cell">
        function createrow(){
            var con = $(&#39;con&#39;);
            var row = creatediv(&#39;row&#39;); //创建div className=row
            var arr = creatcell(); //定义div cell的类名,其中一个为cell black

            con.appendChild(row); // 添加row为con的子节点

            for(var i = 0; i < 4; i++){
                row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
            }

            if(con.firstChild == null){
                con.appendChild(row);
            }else{
                con.insertBefore(row, con.firstChild);
            }
        }

        // 根据id来get DOM元素
        function $(id) {
            return document.getElementById(id);
        }

        // 创建一个类名的数组，其中一个为cell black, 其余为cell
        function creatcell(){
            var temp = [&#39;cell&#39;, &#39;cell&#39;, &#39;cell&#39;, &#39;cell&#39;,];
            var i = Math.floor(Math.random()*4);
            temp[i] = &#39;cell black&#39;;
            return temp;
        }

        //让黑块动起来
        function move(){
            var con = $(&#39;con&#39;);
            var top = parseInt(window.getComputedStyle(con, null)[&#39;top&#39;]);

            if(speed + top > 0){
                top = 0;
            }else{
                top += speed;
            }            
            con.style.top = top + &#39;px&#39;;

            if(top == 0){
                createrow();
                con.style.top = &#39;-100px&#39;;
                delrow();
            }else if(top == (-100 + speed)){
                var rows = con.childNodes;
                if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                    fail();
                }
            }
        }

        // 加速函数
        function speedup(){
            speed += 2;
            if(speed == 20){
                alert(&#39;你超神了&#39;);
            }
        }

        //删除某行
        function delrow(){
            var con = $(&#39;con&#39;);
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

        // 记分
        function score(){
            var newscore = parseInt($(&#39;score&#39;).innerHTML) + 1;
            $(&#39;score&#39;).innerHTML = newscore;
            if(newscore % 10 == 0){
                speedup();
            }
        }

    init();
</script>

관련 추천:

자바스크립트 미니 게임 흰 블록을 밟지 마세요 예시

흑백 주사위 놀이 게임 HTML5 웹 버전의 샘플 코드 공유