Comment implémenter la version web du jeu de ne pas marcher sur les blocs blancs (exemple de code)

Le contenu de cet article explique comment utiliser et implémenter la version Web du jeu pour ne pas marcher sur les blocs blancs (exemple de code). J'espère que ce sera le cas. utile pour vous.

J'ai eu envie de faire un petit projet récemment, mais mes compétences en codage sont trop mauvaises pour créer un grand système, alors j'utilise simplement ce que j'ai appris tout au long de ma vie pour écrire un petit jeu, hahaha
Ne marchez pas sur les blocs blancs. Je crois en ce jeu. Beaucoup de gens y ont joué sur téléphones portables. Aujourd'hui, nous allons commencer par un rendu de jeu :

Différent de La version mobile utilise le toucher du doigt, tandis que la version Web nous oblige à cliquer sur le bloc noir avec la souris avant que le bloc noir ne disparaisse. Actualisez la page pour démarrer le jeu. Même les débutants peuvent rapidement comprendre la partie la plus importante du code de ce mini-jeu. OUI~

Avant de commencer, analysons brièvement l'ensemble du processus de jeu : descendez à une certaine vitesse, cliquez sur le bloc noir, le bloc noir disparaît, et le nouveau bloc noir devrait être le début du jeu aux yeux des joueurs ordinaires., le bloc noir descend continuellement. Si le bloc noir touche le fond, le jeu se termine ; et pour nous, chaque bloc noir et bloc blanc peut être résumé dans une structure de données. du bloc noir est en fait Pour la création et la destruction de structures de données, regardons un organigramme de jeu pour avoir une compréhension générale des fonctions à écrire :

Mise en page

Vous pouvez utiliser la mise en page div+css pour réaliser l'affichage de l'effet statique de ne pas marcher sur les blocs blancs. Laissez-moi entrer directement le code HTML. parlons brièvement du HTML. L'idée est de décomposer l'interface principale en une grande grille rectangulaire 4 × 4. Chaque carré représente l'une des petites grilles rectangulaires. Il y a un bloc noir parmi les quatre blocs blancs dans chaque rangée. dans chaque ligne ? Généré de manière aléatoire, mais comme nous avons une page statique ici, nous pouvons la déterminer nous-mêmes, puis transmettre Style des contrôles 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>

Initialisation du jeu

D'après la partie HTML précédente, on peut savoir que chaque

représente un bloc noir. Chaque fois que vous cliquez sur un bloc noir pour disparaître, vous supprimez en fait un

, puis ajoutez un nouveau

Nous devons donc d'abord contrôler

(pensez à supprimer les 4 div.rows spécifiés et générés lors de l'écriture de la page statique). La méthode spécifique est la suivante :

//创建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>Laissez le bloc noir bouger <strong></strong></p>Après avoir pu créer et détruire des divs via js, nous devons créer le bloc noir move. À cette époque, nous avons utilisé les paramètres mentionnés dans css <div. id="con"> cache une ligne de <div id="row">, on passe le DOM de js
Faites-le fonctionner vers le bas et réglez la minuterie pour qu'elle se déplace toutes les 30 millisecondes, afin d'obtenir un mouvement fluide du bloc noir. Pendant que le bloc noir se déplace, nous devons déterminer si le bloc noir a touché le bas. atteint le fond, le jeu échouera. Arrêtez d'appeler.
 move(), appelez la fonction fail() après avoir touché le bas et le jeu échoue. La méthode spécifique est la suivante : <p></p>
<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();
    }
}

Dans cette étape, plusieurs points fonctionnels de base ont été implémentés. Il ne reste plus qu'à combiner ces méthodes pour former une relation logique complète.

Code complet

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>

Recommandations associées :

Exemple de mini-jeu Javascript Ne marchez pas sur les blocs blancs

Exemple de partage de code de la version Web HTML5 du jeu de backgammon en noir et blanc