recherche

Maison  >  Article  >  programmation quotidienne  >  Native JS implémente le jeu Ne marchez pas sur les blocs blancs (1)

Native JS implémente le jeu Ne marchez pas sur les blocs blancs (1)

藏色散人
藏色散人original
2018-12-25 11:58:028921parcourir

Pour les développeurs front-end, développer un petit jeu pour passer le temps pendant leur temps libre est aussi un test de leurs compétences de base. Alors ne marchez pas sur le jeu des blocs blancs, je pense que tout le monde le connaît. Nous pouvons implémenter ce jeu via js natif, et même les débutants du front-end peuvent facilement le terminer.

Native JS implémente le jeu Ne marchez pas sur les blocs blancs (1)

Nous allons maintenant partager avec vous une méthode js native pour implémenter le jeu ne marchez pas sur le bloc blanc .

L'exemple de code est le suivant : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
 * {
        margin: 0;
 padding: 0;
 }

    .box {
        margin: 50px auto 0 auto;
 width: 400px;
 height: auto;
 border: solid 1px #222;
 }

    #cont {
        width: 400px;
 height: 600px;
 position: relative;
 overflow: hidden;
 }

    #go {
        width: 100%;
 height: 600px;
 position: absolute;
 top: 0;
 font: 700 60px &#39;微软雅黑&#39;;
 text-align: center;
 z-index: 99;
 }

    #go span {
        cursor: pointer;
 background-color: #fff;
 border-bottom: solid 1px #222;
 }

    #main {
        width: 400px;
 height: 600px;
 position: relative;
 top: -150px;
 }

    .row {
        width: 400px;
 height: 150px;
 }

    .row div {
        width: 99px;
 height: 149px;
 border: solid 1px #222;
 float: left;
 border-top-width: 0;
 border-left-width: 0;
 cursor: pointer;
 }
    #count {
        border-top: solid 1px #222;
 width: 400px;
 height: 50px;
 font: 700 36px/50px &#39;微软雅黑&#39;;
 text-align: center;
 }

</style>
<body>
<div class="box">
    <div id="cont">
        <div id="go">
            <span>点击开始</span>
        </div>
        <div id="main"></div>

    </div>
    <div id="count"></div>
</div>
</body>
<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;];

 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";
 }

    function move(obj) {
        //默认速度与计分
 var speed = 5, num = 0;
 obj.timer = setInterval(function () {
            //速度
 var step = parseInt(getComputedStyle(obj, null)[&#39;top&#39;]) + speed;
 obj.style.top = step + &#39;px&#39;
 if (parseInt(getComputedStyle(obj, null)[&#39;top&#39;]) >= 0) {
                CDiv(&#39;row&#39;);
 obj.style.top = -150 + &#39;px&#39;;
 }
            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)


    }
    go.children[0].onclick = function () {
        if (main.children.length) {
            //暴力清楚main里面所有盒子
 main.innerHTML = &#39;&#39;;
 }
        //清空计分
 count.innerHTML = &#39;游戏开始&#39;;
 //隐藏开始盒子
 this.parentNode.style.display = "none";
 move(main);
 }
</script>
</html>

L'effet frontal est le suivant :

Native JS implémente le jeu Ne marchez pas sur les blocs blancs (1)

Quand on clique sur Démarrer , le jeu démarre. Cliquez sur les carrés colorés pour marquer des points, et à mesure que le score augmente, les carrés de la page se déplacent plus rapidement.

Native JS implémente le jeu Ne marchez pas sur les blocs blancs (1)

Lorsque vous cliquez sur le bloc blanc, le jeu se termine.

Native JS implémente le jeu Ne marchez pas sur les blocs blancs (1)

Cet article concerne le partage et la présentation de la méthode de mise en œuvre du jeu Don't Step on White Blocks à l'aide de js natif. Les amis intéressés peuvent directement copier le code ci-dessus et le tester. localement. Ensuite, dans les articles suivants, je continuerai à vous présenter la méthode de mise en œuvre spécifique du jeu Don't Step on White Blocks.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir les coordonnées de la position de la souris avec jQueryArticle suivant：Comment obtenir les coordonnées de la position de la souris avec jQuery

Articles Liés

Voir plus