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 基于运动开发，实现打砖块小游戏。练手项目必备

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以太網驅動總結