JS实现打砖块小游戏

用JS实现一个简单的打砖块游戏

话不多说，先看看效果：

HTML架构部分

<!-- HTML结构 -->
<div class="content">
        <div class="game"></div>
        <div class="container">
            <h2>打砖块小游戏</h2>
            <hr />
            <center>
                <button id="start"
                    style="width: 120px;height: 22px;margin: 20px auto;border-radius: 10px;border: none;outline: none;color: rgba(145, 146, 146, 0.918);cursor:pointer;">开始游戏</button>
            </center>
            <div style="width: 219px;border: 1px solid rgba(145, 146, 146, 0.918);"></div>
            <center>
                <button id="reset"
                    style="width: 120px;height: 22px;margin: 20px auto;border-radius: 10px;border: none;outline: none;color: rgba(145, 146, 146, 0.918);cursor:pointer;">再来一局</button>
            </center>
            <center>
                <!-- 分数 -->
                <div id="score"></div>
            </center>
        </div>

    </div>

CSS样式部分

<!-- CSS样式 -->
<style>
        * {
            padding: 0;
            margin: 0;
        }

        /* body>div {
            width: 550px;
            height: 520px;
            display: flex;
            margin: 20px auto;
        } */

        .container {
            width: 220px;
            height: 500px;
            border: 1px solid rgba(145, 146, 146, 0.918);
            margin-top: 20px;
            margin-right: 120px;
        }

        h2 {
            text-align: center;
            font-size: 26px;
            color: rgba(145, 146, 146, 0.918);
            margin-bottom: 2px;
        }

        .content {
            position: relative;
            width: 800px;
            height: 600px;
            margin: 0 auto;
            overflow: hidden;
            display: flex;
        }

        .game {
            position: relative;
            width: 456px;
            height: 500px;
            border: 1px solid rgba(145, 146, 146, 0.918);
            margin: 20px auto 0;
        }

        .brick {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: rgb(238, 17, 28);
        }

        /* 画挡板 */
        .flap {
            position: absolute;
            width: 120px;
            height: 10px;
            bottom: 0;
            left: 0;
            background-color: royalblue;
        }

        .ball {
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: 10px;
            left: 52px;
            border-radius: 50%;
            background-color: blue;
        }

        #score {
            width: 100px;
            height: 30px;
            right: 0;
            top: 10%;
            color: rgba(145, 146, 146, 0.918);
        }
    </style>

JavaScript脚本语言部分

<!-- JS结构 -->
    <script>
        /*
        // 获取canvas元素
        const canvas = document.getElementById('canvas');
        // 获取到上下文，创建context对象
        const ctx = canvas.getContext('2d');

        let raf;
        // 定义一个小球
        const ball = {
            x: 100,    // 小球的 x 坐标
            y: 100,    // 小球的 y 坐标
            raduis: 20,  // 小球的半径
            color: 'blue',  // 小球的颜色
            vx: 3, // 小球在 x 轴移动的速度
            vy: 2, // 小球在 y 轴移动的速度
            // 绘制方法
            draw: function () {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.raduis, Math.PI * 2, false);
                ctx.closePath();
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }
        // 该函数为绘制函数：主要逻辑就是清空画布，重新绘制小球
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ball.draw();
            // 进行边界的判断
            if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
                ball.vy = -ball.vy;
            }
            if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
                ball.vx = -ball.vx;
            }
            ball.x += ball.vx;
            ball.y += ball.vy;
            raf = window.requestAnimationFrame(draw);
        }
        raf = window.requestAnimationFrame(draw);
        */

        // 加载窗口 = init
        window.onload = init;
        function init() {
            // 获取元素
            let gameArea = document.getElementsByClassName("game")[0];
            // 设置10列
            let rows = 10;
            // 设置8行
            let cols = 8;
            // 砖块与砖块之间的宽度
            let b_width = 58;
            // 砖块与砖块之间的高度
            let b_height = 28;
            // 用数组的形式来装砖块
            let bricks = [];
            // 小球的X轴方向（上下左右来回的运动）
            let speedX = 5;
            // 小球Y轴方向（上下左右来回的运动）
            let speedY = -5;
            // 在内部里，小球上下左右来回的运动，【小球碰撞到砖块 = null】
            let interId = null;
            // 左边距离为0
            let lf = 0;
            // 上边距离为0
            let tp = 0;
            // 挡板
            let flap;
            // 挡板上面的小球
            let ball;
            // 分数记录（初始值为0）
            let n = 0;
            // 获取开始游戏按钮的元素
            let st = document.getElementById("start");
            // 获取再来一局（重新渲染）按钮的元素
            let rt = document.getElementById("reset");
            // 获取分数记录的元素
            let score = document.getElementById("score");
            score.innerHTML = "分数：" + n;
            // 提供（渲染）Dom[渲染砖块] 方法
            renderDom();
            // 键盘的操作（A与D;askm查询：A：65，需-32，D：68，需+32）方法
            bindDom();

            // 进行渲染砖块
            function renderDom() {
                getBrick();
                // 画砖块
                function getBrick() {
                    for (let i = 0; i < rows; i++) {
                        let tp = i * b_height;
                        let brick = null;
                        for (let j = 0; j < cols; j++) {
                            let lf = j * b_width;
                            brick = document.createElement("div");
                            brick.className = "brick";
                            brick.setAttribute("style", "top:" + tp + "px;left:" + lf + "px;");
                            // 获取背景的颜色
                            brick.style.backgroundColor = getColor();
                            bricks.push(brick);
                            gameArea.appendChild(brick);
                        }
                    }
                }

                //添加挡板
                flap = document.createElement("div");
                flap.className = "flap";
                gameArea.appendChild(flap);
                //添加挡板+小球
                ball = document.createElement("div");
                ball.className = "ball";
                gameArea.appendChild(ball);
            }

            // 键盘的操作
            function bindDom() {
                flap = document.getElementsByClassName("flap")[0];
                window.onkeydown = function (e) {
                    let ev = e || window.event;
                    // 左边移动
                    let lf = null;
                    // A键往左移动
                    if (e.keyCode == 65) {
                        lf = flap.offsetLeft - 32;
                        if (lf < 0) {
                            lf = 0;
                        }
                        flap.style.left = lf + "px";
                        // D键往右移动
                    } else if (e.keyCode == 68) {
                        lf = flap.offsetLeft + 32;
                        if (lf >= gameArea.offsetWidth - flap.offsetWidth) {
                            lf = gameArea.offsetWidth - flap.offsetWidth
                        }
                        flap.style.left = lf + "px";
                    }
                }

                // 为开始游戏按钮添加点击事件
                st.onclick = function () {
                    // 实现小球上下左右不断移动
                    ballMove();
                    st.onclick = null;
                }

                // 为再来一局按钮添加点击事件
                rt.onclick = function () {
                    window.location.reload();
                }

            }

            // 获得砖块的颜色 rgb ===>>> 随机颜色；random() = 随机数方法
            function getColor() {
                let r = Math.floor(Math.random() * 256);
                let g = Math.floor(Math.random() * 256);
                let b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
            // 实现小球上下左右不断移动
            function ballMove() {
                ball = document.getElementsByClassName("ball")[0];
                interId = setInterval(function () {
                    // 左边（X轴方向）的移动速度
                    lf = ball.offsetLeft + speedX;
                    // 上边（Y轴方向）的移动速度
                    tp = ball.offsetTop + speedY;
                    // 用for（）{}循环实现小球与砖块碰撞后从而消失
                    for (let i = 0; i < bricks.length; i++) {
                        let bk = bricks[i];
                        // if进行判断，判断小球与砖块接触 【若：接触到：面板的宽度：offset ===>>> 抵消的意思，使它/2，简单的说就是：X轴=宽，Y轴=高，边距：上边offsetTop；左边offsetLeft.从什么地方反回到某一个地方接触一次则记为碰撞一次，从而进行让砖块抵消】
                        if ((lf + ball.offsetWidth / 2) >= bk.offsetLeft && (lf + ball.offsetWidth / 2) <= (bk.offsetLeft + bk.offsetWidth) && (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop) {
                            // 执行时 = none时 ===>>> 消失 
                            bk.style.display = "none";
                            // Y轴的移动速度
                            speedY = 5;
                            // 小球与砖块碰撞抵消后，分数+1（n++）
                            n++;
                            score.innerHTML = "分数:" + n;
                        }
                    }

                    if (lf < 0) {
                        speedX = -speedX;
                    }
                    if (lf >= (gameArea.offsetWidth - ball.offsetWidth)) {
                        speedX = -speedX;
                    }
                    if (tp <= 0) {
                        speedY = 5;
                    } else if ((ball.offsetTop + ball.offsetHeight) >= flap.offsetTop && (ball.offsetLeft + ball.offsetWidth / 2) >= flap.offsetLeft && (ball.offsetLeft + ball.offsetWidth / 2) <= (flap.offsetLeft + flap.offsetWidth)) {
                        speedY = -5;
                    } else if (ball.offsetTop >= flap.offsetTop) {
                        // 游戏结束
                        gameOver();
                    }
                    ball.style.left = lf + 'px';
                    ball.style.top = tp + "px";
                    // 让小球移动是时间参数随便给
                }, 40)
            }

            //判断游戏是否结束
            function gameOver() {
                // 弹框提示游戏该结束
                alert("游戏结束！" + "\n" + score.innerHTML);
                // 清除间隔
                clearInterval(interId);
            }
        }
    </script>