JS定时器与多分支选择结构（挡板接球）-CSDN博客

本文链接：https://blog.csdn.net/woosm/article/details/131581330

小球根据键盘操作移动（基础学习代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .f{
    width: 600px;
    height: 600px;
      border: 1px solid deepskyblue;
      position: relative;
  }
  .z{
      width: 100px;
      height: 100px;
      background-color: mediumslateblue;
      border-radius: 50%;
      position: absolute;
  }

</style>
<body>
<div class="f">
  <div class="z" id="ball"></div>
</div>
</body>
<script>
    //根据id获取dom
    let ball=document.getElementById(`ball`)
    //球心初始坐标
    let x=50,y=50
    let dy=10//按一次键盘，y轴方向运动
    let dx=10
    //感知键盘 keycode下40 上38 左37 右39
    document.onkeydown=function (e){
        switch (e.keyCode){
            case 38:
                ball.style.top=y-50+`px`
                y-=dy
                break;

            case 40:
                y+=dy
                ball.style.top=y-50+`px`
                break;

            case 37:
                x-=dx
                ball.style.left=x-50+`px`
                break;

            case 39:
                x+=dx
                ball.style.left=x-50+`px`
                break;

        }
    }
</script>
</html>

挡板接球

项目要点分析

1.随机碰撞点
2.镜像反弹
3.挡板移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .f{
            width: 1200px;
            height: 800px;
            border: 5px solid skyblue;
            position: relative;
        }
        .z{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: pink;
            position: absolute;
            left: 550px;
            top: 350px;
        }
        .b{
            width: 400px;
            height: 20px;
            top: 780px;
            border: 2px solid gold;
            background-color: gold;
            position: absolute;
        }
    </style>
</head>

<body>
<div class="f" onclick="st()">
    <div id="ball"  class="z"></div>
    <div id="ban" class="b" onkeydown="ar"></div>
</div>


</body>
<script>
//随机碰撞点
    // 生成0-1200随机整数
   let r=Math.floor(Math.random()*1200)
    //开始时刻小球球心着落随机点坐标（r,50）
    //球心坐标（x,y）
    //left+50=x,top+50=y
   let x=600,y=400
    //计算x与y运动距离倍数关系
    let x_y=(x-r)/(y-50)
    let dy=-1//表示单位时间沿y轴向上运动1
    let dx=x_y*dy//表示单位时间沿x轴位移
    //获取小球dom对象
    let ball=document.getElementById(`ball`)
    //点击父元素任意位置开始



//镜像反弹函数
    function  st(){
        let dsq=setInterval(()=>{
            //单位时间位移作用在坐标上
            x+=dx
            y+=dy
            //上下碰撞 y轴方向变化
            if(y<50){
                dy=-dy
            }
            if(y>=730){
                if(x>a&&x<a+400){
                    dy=-dy
                }else{
                    clearInterval(dsq)
                    alert('寄')
                }

            }
            /*if(zn(ball,ban)){
                dy=-dy
            }*/


            //左右碰撞 x轴方向变化
            if(x<=50||x>=1150)
                dx=-dx
            //坐标作用在实际定位上
            ball.style.left=x-50+`px`
            ball.style.top=y-50+`px`
        },10)

    }
   


//挡板移动
    let ban=document.getElementById(`ban`)
//挡板预设
    let a=0
    let da=20
    document.onkeydown=function ar(e){
        switch (e.keyCode){//多分支选择结构
            case 37:
                if (a<=0){
                    a=0
                }else {
                    a-=da
                }
                ban.style.left=a+`px`
                break;
            case 39:
                if (a>=800){
                    a=800
                }else {
                a+=da}
                ban.style.left=a+`px`
                break
        }
    }
</script>

</html>

挡板运动(监听器实现)

挡板运动第二种方式
 //获取变量声明
let ban = document.getElementById('ban');
 let a = 0;

function handleKeyDown(e) {
// 监听键盘按下事件
      if (e.keyCode === 37) {
// 如果按下左箭头键
      if (a > 0) {
       a -= 10; // 控制每次移动的间距，你可以根据需要进行调整
   }
} else if (e.keyCode === 39) {
// 如果按下右箭头键
      if (a < 800) {
      a += 10; // 控制每次移动的间距，你可以根据需要进行调整
    }
      }
  
      ban.style.left = `${a}px`; // 更新元素的left属性值
   }
//添加一个事件监听器
     document.addEventListener('keydown', handleKeyDown);