前端实现小球游戏

小球游戏

实现了一个小球游戏，游戏界面是一个大小为1200x800像素的矩形框，其中包含一个红色的小球和一个蓝色的格挡方块。点击游戏界面的任意位置即可开始游戏。

游戏规则如下：

小球会在游戏界面内部自动移动，碰到上下边界时会反弹，碰到左右边界时也会反弹。
方块可以通过左右箭头键进行移动，每次按下箭头键，方块会水平移动。
如果格挡碰到接到小球，小球会反弹，如果没有接到就会游戏结束，弹出提示框。

小球游戏

核心代码如下：

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

    // 获取小球的dom对象
    let ball=document.getElementById('ball')
    // 点击父元素任意位置开始游戏
    function startgame(){
        r=Math.floor(Math.random()*1200)
        let s=setInterval(()=>{
            // 上下碰撞
            if (y<=50||y>=750) {
                dy=-dy
            }
            if (x<=50||x>=1150) {
                dx=-dx
            }
            if (y>=750&&(x<ax-250||x>ax+150)) {
                x=600,y=400
                clearInterval(s)
                alert('游戏结束')
            }
            // 把单位时间的位移作用在坐标上
            x+=dx
            y+=dy
            // 把坐标作用在实际的定位上
            ball.style.left=x-50+'px'
            ball.style.top=y-50+'px'
        },1)
    }


    let block=document.getElementById('block')
    let adx=100 //按一次x轴移动距离
    let ax=750,ay=825 //初始坐标
    // 感知键盘 下40 上38 左37 右39
    document.onkeydown=function(e){
        switch (e.keyCode) {
        case 37:
        console.log('左')
        if (ax>=200) {
            ax-=adx
            block.style.left=ax-200+'px'
        }
        console.log(ax)
        break;
        
        case 39:
        console.log('右')
        if (ax<=1000) {
            ax+=adx
            block.style.left=ax-200+'px'
        }
        console.log(ax)
        break;
        }
    }