使用js制作接小球的游戏

最新推荐文章于 2024-08-07 21:58:12 发布

LovDubNation

最新推荐文章于 2024-08-07 21:58:12 发布

阅读量126

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/CurryISGod/article/details/131583586

版权

效果图

当点击屏幕任意位置的时候游戏开始，键盘左右键操作屏幕下方的挡板，当屏幕下方的挡板没能够接住球的时候游戏挑战失败。

接小球游戏.gif

实现思路

首先我们的小球肯定是向上走的。那么它的上边距将是越来越小的；
设左边距就是x坐标上的值，那么小球的球心x坐标是随机生成的，所以需要用到随机数。
得知小球的x和y轴的坐标之后，就可以求出由y轴的运动带动x轴运动的运动轨迹公式

根据这个公式可以让球向上倾斜运动
镜像反弹实现思路：
- 当小球上下碰撞时，他的x值正好是相反的；当小球左右碰撞时他的y轴刚好相反。
挡板实现思路：
- 使用键盘事件控制挡板左右移动
- 当圆心位置坐标到达最下面是判断圆心的x值是否在圆心r - 挡板的左间距 到挡板左间距+挡板宽度这个区间内，如果在则继续反弹，否则游戏结束

具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接球游戏</title>
    <style>
        #screen{
            width: 1500px;
            height: 600px;
            border: 1px dashed red;
            position: relative;
        }
        #ball{
            width: 100px;
            height: 100px;
            background-color: rgb(245, 245, 147);
            border-radius: 50%;
            position: absolute;
            top: 250px ;
            left: 700px;
        }
        #footer{
            width: 1500px;
            height: 100px;
            position: relative;
            border: 1px solid red;
        }
        #board{
            width: 300px;
            height:50px;
            background-color: red;
            text-align: center;
            line-height: 50px;
            position:absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="screen" onclick="start()">
        <div id="ball"></div>
    </div>
    <div id="footer">
        <div id="board" onclick="start()">
            开始游戏
        </div>
    </div>
    <script>
         //获取foot
         let board = document.getElementById("board");
        //挡板的位置
        let board_x = 0,border_y = 0;
        document.onkeydown =  function (event) { 
            //左键为39 右键37
            let keyCode = event.keyCode;
            console.log(keyCode);
            switch(keyCode){
                case 37:
                    if(board_x <= 0){
                        break;
                    }
                    //向左边移动
                    board_x-=30;
                    
                    board.style.left = board_x+'px';
                    break;
                case 39:
                if(board_x >= 1200){
                        break;
                    }
                    //向右边移动
                    board_x+=30;
                    board.style.left = board_x+'px';
                    break;
                default:;
            }

        }





        //1、生成0都1980的随机整数
        let r = Math.floor(Math.random()*1500);
        //小球撞顶随机点的坐标(r,50)
        //球心的坐标（x,y）
        let x=800,y=300;
        //计算x和y之间运动距离之间的倍数关系
        let x_y = (x-r)/(y-50);
        //表示单位时间内沿着y轴向上运动一个单位
        let dy = -1;
        //x轴在一个单位时间内运动的单位
        let dx = x_y*dy;
        //获取元素
        let ball = document.getElementById("ball");

        //绑定事件
        function start(){
            // alert("游戏开始")
            setInterval(() => {
                //上下碰撞
                if(y<=50||y>=550){
                    dy=-dy;
                    //如果没接住
                    if(y>=550){
                        console.log('快接住我');
                        if(x<=board_x || x>=board_x + 300){
                        alert("游戏结束!");
                        window.location.reload();
                        }
                    }
                }

                //左右碰撞
                if(x<=50 || x>=1450){
                    dx=-dx;
                }
                //计算单位时间内坐标的位置
                y+=dy;
                x+=dx;
                //控制小球
                ball.style.left = x-50+'px';
                ball.style.top = y-50 +'px';
            }, 5);
        }
    </script>
</body>
</html>