原生js实现（别踩白块小游戏）

最新推荐文章于 2023-10-18 21:42:34 发布

crazy的蓝色梦想

最新推荐文章于 2023-10-18 21:42:34 发布

阅读量2.1k

点赞数 5

分类专栏： js实战案例文章标签：原生js 原生js实现别踩白块小游戏

本文链接：https://blog.csdn.net/qq_41257129/article/details/88823936

版权

js实战案例专栏收录该内容

15 篇文章 10 订阅

订阅专栏

原生js实现简单的小游戏，巩固原生js基础知识
js部分有详细注释
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>别踩白块</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            text-decoration: none;
        }
        .wrapper {
            width: 400px;
            height: 520px;
            border: 1px solid #222;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .box {
            width: 100%;
            height: 520px;
            /* border: 1px solid red; */
            position: relative;
            top: -150px;
        }
        #play{
            position: absolute;
            width: 200px;
            height: 100px;
            right: 150px;
            top: 350px;
            border: 1px dashed #ccc;
            text-align: center;
            border-radius: 8px;
            background-color: #ff9950;
        }
        #play a{
            line-height: 100px;
            font-size: 30px;
        }
        .rdiv{
            width: 400px;
            height: 130px;
            /* border:1px solid #000; */
        }
        .odiv{
            width:99px;
            height:129px;
             border-left:1px solid #222;
            border-bottom:1px solid #222;
            float: left;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrapper" id="_wrapper">
        <div class="box" id="_box"></div>
       
    </div>  
    <div id="play">
            <a href="#">Game Start</a>
     </div> 
</body>
</html>
<script>
    // 点击game start ，box开始运动 并创建方块
    var _box = document.getElementById('_box');
    var _wrapper = document.getElementById('_wrapper');
    var timer = null;
    var score = 0;
    var speed = 5;
    var flag = true;
    click();// 点击初始化函数
    function click(){
        var _play = document.getElementById('play');
        _play.addEventListener('click',function(){
            _play.style.display = 'none';
            boxPlay();
        })
    }
    // _box移动
    function boxPlay(){
        timer = setInterval(function(){
            _box.style.top = _box.offsetTop + speed + 'px';
            if(_box.offsetTop >= 0)
            {
                // 如果_box的到达可视区域就创建一行 并且top值立即到-150px
                create();
                _box.style.top = -130 + 'px';
            }
            // 如果_box的children.length > 6 ,移除最后一个盒子。既_box做多有6个孩子 
            if(_box.children.length == 6)
            {
                for(var i = 0;i < 4;i++)
                 {
                     // 如果最后一行 里面有没有被点击 游戏结束
                    if(_box.lastChild.children[i].className == "odiv i")
                     {
                        clearInterval(timer);
                        flag = false;
                        alert('游戏结束'+'得分是：'+ score);                       
                    }       
                 }               
                _box.removeChild(_box.children[_box.children.length -1]);
            } 
            
            
        },30) 
        // 绑定点击事件
        bindEvent();
    }
    function bindEvent(){
        // 在大wrapper中点击
        _wrapper.addEventListener('click',function(event){
            var target = event.target;// 点击的目标
            if(target.className == 'odiv i' && flag == true)
            {
                target.style.backgroundColor = "#ccc";
                target.className = 'odiv';
                score ++;
            }
            else{
                clearInterval(timer);
                flag = false;
                alert('游戏结束! '+'得分是：'+ score);
            }
            if(score % 10 == 0)
            {
                speed += 2;
            }
        })
    }
    // 创建盒子
    function create(){
        // 创建一行
        var rdiv = document.createElement('div');
        var random = Math.floor(Math.random()*4);// 随机出0-3的整数
        rdiv.setAttribute('class','rdiv');
        // 创建4列
        for(var i = 0 ; i < 4; i++)
        {
            var odiv = document.createElement('div');
            odiv.setAttribute('class','odiv');
            rdiv.appendChild(odiv);           
        }      
        if(_box.children.length == 0)
        {
            _box.appendChild(rdiv);
        }
        else{
            _box.insertBefore(rdiv,_box.children[0]);
        }
        var clickBox = _box.children[0].children[random];// 随机产生带颜色的小方块
        clickBox.className = 'odiv i';
        clickBox.style.backgroundColor = '#000';

    }
</script>

crazy的蓝色梦想

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
原生js实现（别踩白块小游戏）

原生js实现简单的小游戏，巩固原生js基础知识js部分有详细注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....
复制链接

扫一扫