Heim > Artikel > tägliche Programmierung > Native JS implementiert das Spiel „Don’t Step on White Block“ (1)

Native JS implementiert das Spiel „Don’t Step on White Block“ (1)

藏色散人Original: 2018-12-25 11:58:028864Durchsuche

Für Frontend-Entwickler ist die Entwicklung eines kleinen Spiels zum Zeitvertreib auch ein Test ihrer Grundkenntnisse. Treten Sie also nicht auf das White-Block-Spiel ein, ich glaube, jeder ist damit vertraut. Wir können dieses Spiel über native JS implementieren, und selbst Front-End-Anfänger können es problemlos abschließen.

Jetzt stellen wir Ihnen eine native JS-Methode vor, um das Spiel „Nicht auf den weißen Block treten“ zu implementieren .

Das Codebeispiel lautet wie folgt:

<!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>

Der Front-End-Effekt ist wie folgt:

Native JS implementiert das Spiel „Don’t Step on White Block“ (1)

Wenn wir auf Start klicken, wird der Spiel beginnt. Klicken Sie auf die farbigen Quadrate, um Punkte zu erzielen. Mit zunehmender Punktzahl bewegen sich die Seitenquadrate schneller.

Native JS implementiert das Spiel „Don’t Step on White Block“ (1)

Wenn Sie auf den weißen Block klicken, endet das Spiel.

Native JS implementiert das Spiel „Don’t Step on White Block“ (1)

In diesem Artikel geht es darum, die Methode zur Implementierung des Don't Step on White Blocks-Spiels mit nativem js zu teilen und vorzustellen. Interessierte Freunde können den obigen Code direkt kopieren und testen vor Ort. In späteren Artikeln werde ich Ihnen dann weiterhin die spezifische Implementierungsmethode des Minispiels „Don't Step on White Blocks“ vorstellen.

Das obige ist der detaillierte Inhalt vonNative JS implementiert das Spiel „Don’t Step on White Block“ (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erhalten Sie die Koordinaten der Mausposition mit jQueryNächster Artikel：So erhalten Sie die Koordinaten der Mausposition mit jQuery

In Verbindung stehende Artikel

Mehr sehen