設計思路

遊戲內容:在遊戲區內隨機下滑白塊點中便消失，白塊到達底部時遊戲結束。
遊戲機制簡單，以面向物件思路程式設計為主

宣告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>