弹弹乐小游戏

游戏效果图如下：

简易说明：

小球开始会在方框正中间，点击方框任意位置，小球会向前任意方向发射

当小球往回弹的时候通过用键盘操纵蓝色方框使小球弹回去

当操控蓝色方块未接到小球时，小球运动暂停，显示游戏结束。

主要代码如下：

    <script>
        //获取板子的对象
        let borad=document.getElementById('borad')
        let a=400,da=20,db=20
        document.onkeydown=function(e){
            switch(e.keyCode){
            case 65:
                if(a>=40){
                    a-=db
                borad.style.left=a-20+'px';
                }
                
            break;
            case 68:
                if(a<=970){
                    a+=da
                    borad.style.left=a+20+'px';
                }
                
            break;
            } 
        }
        //生成0-1200的随机整数
        let r=Math.floor(Math.random()*1200)
        // alert(r)
        //小球的球心随机着落点的坐标(r,50)
        //小球球心的坐标(x,y)
        let x=600,y=400
        //计算x和y之间运动距离的倍数关系
        let x_y=(x-r)/(y-50)
        let dy=-1       //表示单位时间沿着y轴向上运动一个单位
        let dx=x_y*dy   //表示单位时间 沿着x轴的位移


        //获取小球的dom对象
        let ball=document.getElementById('ball')
        //点击父元素任意位置开始游戏
        function startGame(){
            //alert("游戏开始")
            let game=setInterval(()=>{
                //上下碰撞
                if(y<=50){
                    dy=-dy
                }else if(y>=750){
                    if(x>=a&&x<=a+200){
                        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'
                if(y>800){
                    clearInterval(game)
                    alert("游戏结束！")
                }
            },1)
        }
    </script>

重难点：

1、需要获取小球发射的方向

2、需要计算出小球移动时x轴和y轴运动的比例

3、小球撞到边框时如何进行反弹以及反弹的方向

4、如何计算更改小球的left和top值