谁不想做一个属于自己的小球游戏呢

渔钓道人

已于 2023-07-08 14:22:44 修改

阅读量101

点赞数

文章标签： javascript 前端开发语言

于 2023-07-06 21:54:42 首次发布

本文链接：https://blog.csdn.net/NiCE_PersoN__/article/details/131585433

版权

今天水一下。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小球游戏</title>
    <style>
        .f{
            width: 1200px;
            height: 800px;
            border: 1px solid red;
            position: relative;
        }
        .z{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: royalblue;
            position: absolute;
            /* 正中心 */
            left:550px;
            top: 350px;
            }
    </style>
</head>
<body>
    <div class="f" onclick="startGame()">
        <div id="ball" class="z"></div>
    </div>
</body>
<script>
    //1.生成0-1200的随机整数
    let r=Math.floor(Math.random()*1200)
    console.log(r)
    
    //小球球心着落的随机点坐标（r，50）
    //小球球心的坐标（x，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 startGame(){
        setInterval(()=>{
            //上下碰撞
            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'
        } ,10);
    }
</script>
</html>

下面是示例代码：

let r=Math.floor(Math.random()*1200)
    console.log(r)

这段代码通过 Math.random() 函数生成一个随机数，并将其乘以 1200。然后使用 Math.floor() 函数对结果进行向下取整，得到一个范围在 0 到 1199 之间的整数。

最后，通过 console.log(r) 输出这个随机整数 r 到控制台。

通过这段代码，你可以在控制台看到一个随机生成的整数，该整数的范围是 0 到 1199（包含 0 和 1199）。

//小球球心着落的随机点坐标（r，50）
    //小球球心的坐标（x，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')

这段代码，首先定义了变量 x 和 y 分别表示小球球心的坐标，分别初始化为 600 和 400。

然后，通过计算 (x-r)/(y-50) 得到一个倍数关系 x_y，用来计算单位时间内沿着 x 轴的位移量。其中 r 是球心着落的随机点的 x 坐标。

接下来，定义了变量 dy 表示单位时间内沿着 y 轴向上运动的距离，初始值为 -1。通过将 dy 乘以 x_y 得到变量 dx，表示单位时间内沿着 x 轴的位移量。

最后，通过 document.getElementById('ball') 获取小球的 DOM 对象，并将其赋值给变量 ball。

需要注意的是，这段代码中使用了变量 r 和 ball，你需要确保这些变量已经被正确定义和赋值。

//点击父元素任意位置，开始游戏
    function startGame(){
        setInterval(()=>{
            //上下碰撞
            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'
        } ,10);
    }

这段代码，定义了一个 startGame() 函数用于开始游戏。在函数中，使用 setInterval 函数来执行一段代码，该代码会以每 10 毫秒的间隔重复执行。

在代码执行过程中，首先检查小球是否与上下边界发生碰撞（边界坐标为 50 和 750）。如果小球的纵坐标 y 小于等于 50 或者大于等于 750，就将 dy（y 轴方向的位移量）取反，实现小球的上下反弹。

接着，检查小球是否与左右边界发生碰撞（边界坐标为 50 和 1150）。如果小球的横坐标 x 小于等于 50 或者大于等于 1150，就将 dx（x 轴方向的位移量）取反，实现小球的左右反弹。

然后，通过将 dx 和 dy 应用到坐标变量 x 和 y 上，实现单位时间内的位置更新。

最后，通过将更新后的坐标应用到小球元素的 left 和 top 样式属性上，使小球的可视化位置与实际位置保持一致。

需要注意的是，代码中对于 x、y、dx、dy 和 ball 这些变量的赋值和初始化，你需要确保它们已经被正确定义和赋值。

二、键盘控制挡板移动

图片如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挡板移动</title>
</head>
<style>
    .f{
        width: 600px;
            height:600px;
            border: 1px solid red;
            position: relative;
    }
    .z{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color:rebeccapurple;
            position: absolute;
    }
</style>
<body>
    <div class="f">
        <div class="z" id="ball"></div>
    </div>
</body>
<script>
    //1.根据id获取dom获取元素
    let ball=document.getElementById('ball')

    let x=50,y=50 //球心的初始坐标
    let dy=10; //按一次键盘，y轴方向移动的距离
    let dx=10;//按一次键盘，x轴方向移动的距离

    //2.感知键盘 keyCode下 40 上 38 左 37 右 39
    document.onkeydown=function(e){
        console.log(e.keyCode)
        switch(e.keyCode){
            case 38:
            console.log('上')
            y-=dy
            ball.style.top=y-50+'px'
            break;
            case 40:
            console.log('下')
            y+=dy
            ball.style.top=y-50+'px'
            break;
            case 37:
            console.log('左')
            x-=dx
            ball.style.left=x-50+'px'
            break;
            case 39:
            console.log('右')
            x+=dx
            ball.style.left=x-50+'px'
            break;
        }
    }
</script>
</html>

示例代码：

let ball=document.getElementById('ball')

这段代码的作用是通过调用 document.getElementById('ball') 方法来获取页面上 ID 为 "ball" 的元素，并将其赋值给变量 ball。

这样做的目的是为了在后续的代码中使用变量 ball 来操作和控制小球的样式、位置或其他属性。通过获取到小球的 DOM 元素，可以通过修改这个元素的属性来实现对小球的可视化效果进行控制，例如修改其位置、颜色、形状等。

需要注意的是，在使用这段代码之前，确保页面上存在一个具有 ID 为 "ball" 的元素，否则代码将无法正确获取到元素，导致后续操作出错。

//2.感知键盘 keyCode下 40 上 38 左 37 右 39
    document.onkeydown=function(e){
        console.log(e.keyCode)
        switch(e.keyCode){
            case 38:
            console.log('上')
            y-=dy
            ball.style.top=y-50+'px'
            break;
            case 40:
            console.log('下')
            y+=dy
            ball.style.top=y-50+'px'
            break;
            case 37:
            console.log('左')
            x-=dx
            ball.style.left=x-50+'px'
            break;
            case 39:
            console.log('右')
            x+=dx
            ball.style.left=x-50+'px'
            break;
        }
    }

这段代码是用于监听键盘事件，并根据按下的键盘按键来移动小球的位置。

当用户按下键盘上的某个键时，document.onkeydown 事件将被触发。在事件处理程序中，首先通过 console.log(e.keyCode) 打印出按下键盘的 keyCode 值，以便进行调试和查看。

然后，通过使用 switch 语句来判断按下的键盘按键是哪一个。根据不同的按键码，执行相应的操作。

如果按下的是 "上箭头" 键（keyCode 为 38），则将小球的纵坐标 y 减去 dy（y 轴方向的位移量），并将更新后的坐标应用到小球元素的 top 样式属性上。
如果按下的是 "下箭头" 键（keyCode 为 40），则将小球的纵坐标 y 加上 dy，并将更新后的坐标应用到小球元素的 top 样式属性上。
如果按下的是 "左箭头" 键（keyCode 为 37），则将小球的横坐标 x 减去 dx，并将更新后的坐标应用到小球元素的 left 样式属性上。
如果按下的是 "右箭头" 键（keyCode 为 39），则将小球的横坐标 x 加上 dx，并将更新后的坐标应用到小球元素的 left 样式属性上。
通过不同的按键操作，实现了根据用户的按键来控制小球的移动。

三、合体终极版本：挡板小球游戏

首先图片开道：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挡板小球游戏</title>
    <style>
        .f{
            width: 900px;
            height: 600px;
            border: 1px solid red;
            position: relative;
        }
        
        .z1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: royalblue;
            position: absolute;
            left:550px;
            top: 350px;
            }
            .z2{
            width: 150px;
            height: 50px;
            background-color:red;
            position: absolute;
            top: 600px;
            left: 0px;
            }
    </style>
</head>
<body>
    <div class="f" onclick="startGame()">
        <div id="ball" class="z1"></div>
        <div id="ban" class="z2"></div>
    </div>
    
</body>
<script>
    let r=Math.floor(Math.random()*900)
    console.log(r)
    
    //小球球心着落的随机点坐标（r，50）
    //小球球心的坐标（x，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 startGame(){
        setInterval(()=>{
            //上下碰撞
            if(y<=50||y>=550){
                dy=-dy
            }
            //左右碰撞
            if(x<=50||x>=850){
                dx=-dx
            }
            if(y>=550&&(x<l-50||x>l+100)){
                
                clearInterval
                alert('游戏结束')
            }
            //把单位时间的位移作用在坐标上
            x+=dx
            y+=dy
            //把坐标作用在实际的定位上
            ball.style.left=x-50+'px'
            ball.style.top=y-50+'px'
        } ,20);
    }
</script>
<script>
    let ban=document.getElementById('ban')

//挡板
let l=50,t=625
let dt=50;
let dl=50;

//2.感知键盘 keyCode下 40 上 38 左 37 右 39
document.onkeydown=function(e){
    console.log(e.keyCode)
    switch(e.keyCode){
        case 37:
        console.log('左')
        l-=dl
        ban.style.left=l-50+'px'
        break;
        case 39:
        console.log('右')
        l+=dl
        ban.style.left=l-50+'px'
        break;
    }}
</script>
</html>

然后是示例代码：

//点击父元素任意位置，开始游戏
    function startGame(){
        setInterval(()=>{
            //上下碰撞
            if(y<=50||y>=550){
                dy=-dy
            }
            //左右碰撞
            if(x<=50||x>=850){
                dx=-dx
            }
            if(y>=550&&(x<l-50||x>l+100)){
                
                clearInterval
                alert('游戏结束')
            }
            //把单位时间的位移作用在坐标上
            x+=dx
            y+=dy
            //把坐标作用在实际的定位上
            ball.style.left=x-50+'px'
            ball.style.top=y-50+'px'
        } ,20);
    }

其中重点在

if(y>=550&&(x<l-50||x>l+100)){

clearInterval

alert('游戏结束')

}

这段代码上。

它使用条件 y >= 550 && (x < l - 50 || x > l + 100) 来判断小球是否触发了游戏结束的条件。该条件判断包括两个部分：

y >= 550：表示小球的纵坐标 y 是否大于等于 550。当小球超过或达到页面底部时，满足这个条件。
(x < l - 50 || x > l + 100)：表示小球的横坐标 x 是否小于 l - 50 或者大于 l + 100。其中 l 是一个未定义的变量，你需要自行确定其值。这个条件用来判断小球是否超出了指定的左右边界。
如果以上条件均满足，即小球触发了游戏结束的条件，那么代码会执行以下操作：

clearInterval：这里代码中缺少了 clearInterval 函数的参数，你需要补充进去。clearInterval 用于清除之前设置的定时器，以停止小球的移动。
alert('游戏结束')：弹出一个提示框，显示游戏结束的消息。

//2.感知键盘 keyCode下 40 上 38 左 37 右 39
document.onkeydown=function(e){
    console.log(e.keyCode)
    switch(e.keyCode){
        case 37:
        console.log('左')
        l-=dl
        ban.style.left=l-50+'px'
        break;
        case 39:
        console.log('右')
        l+=dl
        ban.style.left=l-50+'px'
        break;
    }}

然后，通过使用 switch 语句来判断按下的键盘按键是哪一个。根据不同的按键码，执行相应的操作。

如果按下的是 "左箭头" 键（keyCode 为 37），则会执行下面的代码：

打印出 '左'，用于调试和查看。
将变量 l 减去 dl（一个未定义的变量），并将更新后的值应用到名为 ban 的元素的 left 样式属性上，使其向左移动。
如果按下的是 "右箭头" 键（keyCode 为 39），则会执行下面的代码：

打印出 '右'，用于调试和查看。
将变量 l 加上 dl（一个未定义的变量），并将更新后的值应用到名为 ban 的元素的 left 样式属性上，使其向右移动。

以上就是今天的全部内容了，后面接着鬼扯。。