JavaScript 基於運動開發，實現打磚塊小遊戲。練手項目必備

1.分析遊戲設置基本樣式

HTML結構：

<div id="div1">
    <div id="ball"></div>
    <div id="bat"></div>
    <div id="brick">
    </div>
</div>

CSS基本樣式設置：

 #div1{width: 600px;height: 600px;border: 1px black solid;position: relative;margin: 20px auto;}
        #ball{width: 20px;height: 20px;background-color: red;border-radius:50%;position: absolute;bottom: 30px;left: 290px;}
        #bat{width: 100px;height: 30px;background-color: blue;position: absolute;bottom: 0px;left: 250px;}
        #brick div{width: 98px;height: 18px;border: 1px black solid;float: left;}

2.小球，地板的基本運動
1.
//讓小球可以水平方向運動，隨機一個速度

    speedX=parseInt(Math.random()*4)+3;

//讓小球可以垂直方向運動，隨機一個速度

    speedY=-(parseInt(Math.random()*3+5));

//底部滑塊的拖拽拖拽三劍客的結構

function dragX(node){
    node.onmousedown = function(ev){
        var e = ev || window.event;
        var offsetX = e.clientX - node.offsetLeft;

        document.onmousemove = function(ev){
            var e = ev || window.event; 
            var l = e.clientX - offsetX;
            //限制出界
            if(l<=0){
                l=0;
            }
            if(l>=500){
                l=500;
            }
            node.style.left  = l+'px';
        }

    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
}

3.創建磚塊,n個

注意：我們在設置樣式時將磚塊的樣式設置爲水平浮動，所以在我們打擊後消失一個磚塊，會出現補齊的效果，爲了改變這個效果。我們需要使用文檔流的轉換。

文檔流的轉換
相對定位轉絕對定位（消失後的磚塊，不會在浮動）

function createBrick(n){
    var oBrick = document.getElementById("brick");
    for(var i = 0;i<n;i++){
        var node = document.createElement("div");
        node.style.backgroundColor=randomColor();
        oBrick.appendChild(node);
    }
    //相對定位，轉絕對定位,1.給每一個磚塊的座標定位
    var aBricks =oBrick.getElementsByTagName('div');
    for(var i = 0; i<aBricks.length ;i++){
        aBricks[i].style.left = aBricks[i].offsetLeft + 'px';
        aBricks[i].style.top =aBricks[i].offsetTop +'px';
    }
    //2.將每一個磚塊的浮動定位改成絕對定位
    for(var i = 0;i<aBricks.length;i++){
        aBricks[i].style.position = 'absolute';
    }
}
function randomColor(){
    var str = "rgba("+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+1+")";
    return str ;
}

4.碰撞的效果

碰撞函數：

        function konck(node1,node2){
        var l1 = node1.offsetLeft;
        var r1 = node1.offsetLeft + node1.offsetWidth;
        var t1 = node1.offsetTop;
        var b1 = node1.offsetTop + node1.offsetHeight;

        var l2 = node2.offsetLeft;
        var r2 = node2.offsetLeft + node2.offsetWidth;
        var t2 = node2.offsetTop;
        var b2 = node2.offsetTop + node2.offsetHeight;

        if(l2>r1 || r2<l1 || t2>b1 || b2<t1){
            return false;
        }else{
            return true;
        }
       }

碰撞檢測

1.小球與拍子

2.小球與磚塊

*/
            //1.小球與拍子
            if(konck(oDiv2,oBat)){
                speedY *=-1;
            }
            //小球與磚塊碰撞
            for(var i = 0;i<aBricks.length;i++){
                if(konck(oDiv2,aBricks[i])){
                    speedY *=-1;
                    //磚塊被銷燬掉
                    oBrick.removeChild(aBricks[i]);
                    break
                }

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 600px;height: 600px;border: 1px black solid;position: relative;margin: 20px auto;}
        #ball{width: 20px;height: 20px;background-color: red;border-radius:50%;position: absolute;bottom: 30px;left: 290px;}
        #bat{width: 100px;height: 30px;background-color: blue;position: absolute;bottom: 0px;left: 250px;}
        #brick div{width: 98px;height: 18px;border: 1px black solid;float: left;}
    </style>
    <script>
        window.onload = function(){
            var begin = confirm('是否開始遊戲');
            if(begin){
                var oDiv1 = document.getElementById("div1");
            var oDiv2 = document.getElementById("ball");
            var oBat =document.getElementById('bat');
            var oBrick = document.getElementById("brick");
            var aBricks = oBrick.getElementsByTagName('div');
            dragX(oBat);
            createBrick(60);
            //讓小球可以水平方向運動，隨機一個速度
            speedX=parseInt(Math.random()*4)+3;
            //讓小球可以垂直方向運動，隨機一個速度
            speedY=-(parseInt(Math.random()*3+5));
            timer=setInterval(function(){
                oDiv2.style.left = oDiv2.offsetLeft+speedX +"px";
                oDiv2.style.top = oDiv2.offsetTop +speedY+'px';
                if(oDiv2.offsetLeft >= 580 ||oDiv2.offsetLeft <=0){
                    speedX =speedX*-1;
                }
                if(oDiv2.offsetTop <=0){
                    speedY =speedY*-1;
                }
                if(oDiv2.offsetTop >= 580){
                    alert("GAME OVER");
                    clearInterval(timer);
                    window.location.reload();
                }
                /* 
                碰撞檢測
                1.小球與拍子
                2.小球與磚塊
                */
                //1.小球與拍子
                if(konck(oDiv2,oBat)){
                    speedY *=-1;
                }
                //小球與磚塊碰撞
                for(var i = 0;i<aBricks.length;i++){
                    if(konck(oDiv2,aBricks[i])){
                        speedY *=-1;
                        //磚塊被銷燬掉
                        oBrick.removeChild(aBricks[i]);
                        break
                    }
                }
                },30)
            }
            
        }

        //底部滑塊的拖拽
        function dragX(node){
            node.onmousedown = function(ev){
                var e = ev || window.event;
                var offsetX = e.clientX - node.offsetLeft;

                document.onmousemove = function(ev){
                    var e = ev || window.event; 
                    var l = e.clientX - offsetX;
                    //限制出界
                    if(l<=0){
                        l=0;
                    }
                    if(l>=500){
                        l=500;
                    }
                    node.style.left  = l+'px';
                }

            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }

        //創建磚塊,n個
        /* 
            文檔流的轉換
                相對定位  轉   絕對定位 （消失後的磚塊，不會在浮動）
        */
        function createBrick(n){
            var oBrick = document.getElementById("brick");
            for(var i = 0;i<n;i++){
                var node = document.createElement("div");
                node.style.backgroundColor=randomColor();
                oBrick.appendChild(node);
            }
            //相對定位，轉絕對定位,1.給每一個磚塊的座標定位
            var aBricks =oBrick.getElementsByTagName('div');
            for(var i = 0; i<aBricks.length ;i++){
                aBricks[i].style.left = aBricks[i].offsetLeft + 'px';
                aBricks[i].style.top =aBricks[i].offsetTop +'px';
            }
            //2.將每一個磚塊的浮動定位改成絕對定位
            for(var i = 0;i<aBricks.length;i++){
                aBricks[i].style.position = 'absolute';
            }
        }
        function randomColor(){
            var str = "rgba("+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+1+")";
            return str ;
        }

        function konck(node1,node2){
        var l1 = node1.offsetLeft;
        var r1 = node1.offsetLeft + node1.offsetWidth;
        var t1 = node1.offsetTop;
        var b1 = node1.offsetTop + node1.offsetHeight;

        var l2 = node2.offsetLeft;
        var r2 = node2.offsetLeft + node2.offsetWidth;
        var t2 = node2.offsetTop;
        var b2 = node2.offsetTop + node2.offsetHeight;

        if(l2>r1 || r2<l1 || t2>b1 || b2<t1){
            return false;
        }else{
            return true;
        }
       }
    </script>
</head>
<body>
    <div id="div1">
        <div id="ball"></div>
        <div id="bat"></div>
        <div id="brick">
        </div>
    </div>
</body>
</html>

JavaScript 基於運動開發，實現打磚塊小遊戲。練手項目必備

DAPPER 事務 TRANSACTION

Java中線程的創建方式

Java線程的同步--線程安全的原因及解決方法

JavaScript中Math對象，日期對象的使用。以及定時器，秒錶，實時更新系統時間實例

CSS選擇器的應用於區分

MySQL數據庫，DOS界面操作語法，常用SQL語句，連接數據庫：八個步驟（天龍八部）

入門到實操：AJAX：前後臺數據交互搬運工

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結