web html javascript 醇前段无线弹力球游戏开发开发侧率解析加代码实例原文出自：https://

原文出自：blog.csdn.net/weixin_4274…

策略：

1.绘制一张图

2.在途中添加圆球

3.让圆球移动

4.左右移动，小于最左往右移动，大于最右网左移动

5.上下移动，小于top，向下，大于bottom 向上

写这个完全是锻炼游戏思想

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹力球游戏</title>
</head>
<style>
    body {
        margin: 0px;
        padding: 0px;
    }

    .main {
        width: 350px;
        height: 500px;
        position: absolute;
        border: 1px solid #000;
        margin: 20px;

    }

    .qq {
        top: 30px;
        left: 30px;
        width: 15px;
        height: 15px;
        background: #000;
        position: absolute;
        border-radius: 15px;
    }
    input{
        position:absolute;
        margin-top:530px;
        margin-left:150px;
    }
    h3{
        margin-left:150px;
    }
</style>

<body>
    <h3>无线弹力</h3>
    <div class="main"></div>
    <input type="button" value="加一个球球" onclick="game.addQ();" /> 

</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    var game = {
        addQ: function () {
            $(".main").append("<span class='qq'>&nbsp;</span>");
        },
        init: function () {
            game.addQ();
            game.move();
        },
        move: function () {
            window.setInterval(function () {
                $(".main span").each(function (k, y) {
                    if (game.params.arr[k] == undefined) {
                        game.params.arr.push([true, true]);
                    }
                    if (Number($(this).css("left").split("px")[0]) >= 336) {
                        game.params.arr[k][0] = false;
                    } else if (Number($(this).css("left").split("px")[0]) <= 0) {
                        game.params.arr[k][0] = true;
                    }

                    if (Number($(this).css("top").split("px")[0]) >= 490) {
                        game.params.arr[k][1] = false;
                    } else if (Number($(this).css("top").split("px")[0]) <= 0) {
                        game.params.arr[k][1] = true;
                    }

                    if (game.params.arr[k][0]) {
                        $(this).css("left", (Number($(this).css("left").split("px")[0]) + 3) + "px");
                    } else {
                        $(this).css("left", (Number($(this).css("left").split("px")[0]) - 3) + "px");
                    }


                    if (game.params.arr[k][1]) {
                        $(this).css("top", (Number($(this).css("top").split("px")[0]) + 2) + "px");
                    } else {
                        $(this).css("top", (Number($(this).css("top").split("px")[0]) - 2) + "px");
                    }

                });
            }, 20);
        },
        params: {
            arr: []
        }
    }
    game.init();
</script>

</html>

持续更新

web html javascript 醇前段 无线弹力球游戏 开发 开发侧率解析 加代码实例

web html javascript 醇前段无线弹力球游戏开发开发侧率解析加代码实例