别踩白块案例笔记

设计思路

游戏内容:在游戏区内随机下滑白块点中便消失，白块到达底部时游戏结束。
游戏机制简单，以面向对象思路编程为主

声明White_block类（白块）
为白块类添加私有属性如：宽高等
为白块类添加生成、下滑、消失的method方法
生成实例后重复调用生成与下滑，便可以达到随机白块连续下滑
通过父元素对子元素（将新生成的白块添加到游戏区内）的事件代理完成点击白块消失的效果。

游戏结束判定：
因为每个白块都是相对独立的，所以需要对每个白块与底边线进行距离判定（需要遍历所有的白块）
一开始打算使用控制变量，但是由于无法判定是否会有漏掉的白块 此思路失败×

获取到的知识

static关键字

静态方法调用同一个类中的其他静态方法，可使用 this 关键字。非静态方法中，不能直接使用 this 关键字来访问静态方法。而是要用类名来调用

static 不能与变量声明关键字同时使用
constructor, method, accessor, or property was expected（应为构造函数、方法、访问器:getter/setter或属性。）

parseInt()：

在获取白块距离底边线的距离时，不知道如何让带有px的数值与普通数值计算
百度得知，parseInt()可以将字符串转换为数值 √

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。
parseInt函数将其第一个参数转换为一个字符串，对该字符串进行解析，然后返回一个整数或 NaN MDN

代码

`

</div>
<div class="launch">开始</div>
<script src='./js/jquery.min.js'></script>
<script>
    $(document).ready(function(){
        
        class White_block {
            static width = 200;
            static height = 200;
            static color = 'white';
            constructor(value){
                this.value = value;   
            }
            generate = function(){
                this.block = document.createElement('div');
                this.block.className = 'white-block';
                this.block.status = true;
                $(this.block).css({
                    'width':White_block.width + 'px',
                    'height':White_block.height + 'px',
                    'background-color':White_block.color,
                    'position':'absolute',
                    'left':parseInt(Math.random()*4)*200+'px',
                    'top':'-200px'
                })
                $('#game-area').append(this.block);
            }
            move = function(delay,speed){
                this.delay = delay;
                setTimeout(() => {
                    $(this.block).animate({
                        top:'410px'
                    },speed,"linear",() => {
                        // console.log($('.white-block'))
                        let white_block = document.getElementsByClassName('white-block');
                        for (let i = 0; i <white_block.length; i++) {
                            //parseInt(string,radix) 函数可解析一个字符串，并返回一个整数。
                            //radix 进制基数 
                            //  /^\d+/.exec(document.getElementById('image').style.width)[0] 正则

                            if(parseInt(white_block[i].style.top) == 410){ 
                            // console.log(white_block[i].style.top);
                                alert("游戏结束");
                                $('.white-block').remove();
                                block = null;
                            }
                        }                           
                    })
                },delay)
            }
            destroy = function () {
                $(this.block).remove();
            }
        }
        //开始
        $('.launch').click(function() {
            let block =  new White_block();
            console.log(block);
            // console.log(this.block.status,1 )
            // console.log("hello world")
            setInterval(function () {
                block.generate();
                block.move(100,2000);   
            },500)             
        })
        $('#game-area').delegate('.white-block','click',function(){
            console.log(this);
            // this.block.status = false;
            $(this).remove();
        })
        // let block = new White_block(1);
    })
</script>

`