JS小球游戏

小球游戏

描述:

小球最开始会停在红色div中间

点一下红色div任意位置小球开始移动

可以用键盘的方向键控制红色板子移动

如果小球没有落在红色板子上则弹出 游戏失败

实现代码

css代码

		*{
            margin: 0;
            padding: 0;
        }
        #console-output {
            position: fixed;
            top: 0;
            right: 0;
            width: 200px;
            height: 50%;
            background-color: #f1f1f1;
            overflow-y: scroll;
            padding: 10px;
        }

        .f {
            width: 1200px;
            height: 800px;
            border: 1px solid red;
            position: relative;
        }

        .z {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: aqua;
            position: absolute;
            left: 550px;
            top: 350px;
        }

        #tanban {
            background-color: red;
            width: 200px;
            height: 50px;
            position: absolute;
            bottom: 0px;
        }

html代码

	<!-- 红色大div框框 -->
	<div class="f" onclick="startGame()">
        <!-- 移动小球 -->
        <div id="ball" class="z"></div>
    </div>
	<!-- 可移动的红色板子 -->
    <div id="tanban" style="left:0px;top: 800px;"></div>

js代码

	//生成0-1200的随机整数
    let r = Math.floor(Math.random() * 1200)
    console.log(r)
    //随机点的坐标是(r,50)
    //小球球心的坐标
    let x = 600, y = 400
    //计算x和y之间运动距离的倍数关系
    let x_y = (x - r) / (y - 50)
    let dy = -1 //表示 单位时间 沿着y轴向上移动
    let dx = x_y * dy

    //获取小球的dom对象
    let ball = document.getElementById('ball')

    //点击父元素任意位置 开始游戏
    function startGame() {
        setInterval(() => {
            // console.log(x,y)
            //检测下面有没有板子
            if (y > 750) {
                if(x>parseInt(box.style.left)+200 || x<parseInt(box.style.left)){
                    alert("游戏失败")
                }
            }
            //上下碰撞 这里 50 和 750 都是把小球的半径算了进去 因为小球移动的是球心
            //所以圆形点里边框还有50px距离 也就是球的边边碰到了框框尽头开始反弹 
            if (y <= 50 || y > 750) {
                dy = -dy
            }
            //左右碰撞
            if (x <= 50 || x >= 1150) {
                dx = -dx
            }
            //
            x += dx
            y += dy
            //把坐标作用到实际的位置上
            ball.style.left = x - 50 + 'px';
            ball.style.top = y - 50 + 'px';

            
        }, 5);
    }


	//控制板子移动
    var box = document.getElementById("tanban")
    document.onkeydown = function (event) {
        switch (event.keyCode) {
            case 39:
                if (parseInt(box.style.left) == 1020) {
                    break
                }
                //找到当前元素的left值
                var left = box.style.left
                var x = parseInt(left)
                //console.log(x)
                var result = x + 30
                box.style.left = result + "px"
                break
            case 37:
                if (parseInt(box.style.left) == 0) {
                    break
                }
                var left = parseInt(box.style.left)
                box.style.left = left - 30 + "px"
                break
        }
    }

效果图