집 >일일 프로그램 >HTML 지식 >Native JS는 흰색 블록 게임을 밟지 마세요(1)를 구현합니다.

Native JS는 흰색 블록 게임을 밟지 마세요(1)를 구현합니다.

藏色散人원래의: 2018-12-25 11:58:028960검색

프론트엔드 개발자에게 남는 시간을 보내기 위해 작은 게임을 개발하는 것은 기본 능력을 테스트하는 것이기도 합니다. 그러니 흰색 블록 게임을 밟지 마세요. 모두가 익숙하다고 생각합니다. 이 게임은 네이티브 JS를 통해 구현할 수 있으며 프런트엔드 초보자도 쉽게 완료할 수 있습니다.

흰색 블록을 밟지 마세요 를 구현하는 네이티브 js 메서드를 공유해 보겠습니다.

코드 예시는 다음과 같습니다:

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

프론트 데스크 효과는 아래와 같습니다:

Native JS는 흰색 블록 게임을 밟지 마세요(1)를 구현합니다.

# 🎜🎜#start when을 클릭하면 게임이 시작됩니다. 색칠된 사각형을 클릭하여 점수를 획득하고, 점수가 높아질수록 페이지 사각형이 더 빠르게 이동합니다.

Native JS는 흰색 블록 게임을 밟지 마세요(1)를 구현합니다.

흰색 블록을 클릭하면 게임이 종료됩니다.

Native JS는 흰색 블록 게임을 밟지 마세요(1)를 구현합니다.

이 글은 네이티브 js를 사용하여 밟지 마세요 화이트 블록 게임을 구현하는 방법을 공유하고 소개하는 것입니다. 관심 있는 친구들이 직접 복사할 수 있습니다. 위의 코드를 로컬에서 테스트하세요. 그럼 이후 글에서는 계속해서 "흰 블록을 밟지 마세요" 미니게임의 구체적인 구현 방법을 소개하겠습니다.

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

성명：

이전 기사：jQuery를 사용하여 마우스 위치 좌표를 얻는 방법다음 기사：jQuery를 사용하여 마우스 위치 좌표를 얻는 방법