接球游戏项目案例（基于JavaScript的动画）

最新推荐文章于 2024-07-12 09:52:04 发布

程序猿小猿。

最新推荐文章于 2024-07-12 09:52:04 发布

阅读量104

点赞数 1

文章标签：游戏前端 javascript

本文链接：https://blog.csdn.net/cd001_/article/details/131584622

版权

项目演示如下：

接球游戏（基于JavaScript动画）

分析：

本项目需要先定义一个游戏范围（即小球运动的范围以及接球挡板的范围），这里需要先用css样式把游戏范围、小球、挡板的模型画出来，然后用JavaScript技术控制小球随机运动的开始。这个项目的难点在于用JavaScript技术实现：

计算小球随机运动的着落点坐标；
计算x和y之间运动距离的倍数关系；
小球在边界线上的镜像反弹；
用键盘的左右键控制挡板的移动。

代码展示：

css部分代码

    /* 游戏范围 */
        .f{
            width: 1200px;
            height: 600px;
            border: 1px solid red;
            position: relative;
        }
    /* 小球 */
        .z{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: aquamarine;
            position: absolute;
            left: 550px;
            top: 250px;
        }
    /* 挡板 */
        .board{
            width: 300px;
            height: 30px;
            border-radius: 30px;
            background-color: rgb(246, 127, 255);
            position: absolute;
            left: 450px;
            top: 570px;
        }

body部分代码

<body>
     <div class="f" onclick="start()">     <!--游戏范围 -->
    <div id="ball" class="z"></div>        <!--小球 -->
    <div class="board" id="board"></div>   <!--挡板 -->
    </div>
</body>

JavaScript部分代码

//点击父元素任意位置开始游戏
    function start(){
            //随机生成0-1200的随机整数
            let r= Math.floor(Math.random()*1200)
            console.log(r)
            //小球球心随机着落点的坐标是（r，50)

            //小球的球心坐标（x,y)
            let x=600,y=300

            //计算x和y之间运动距离的倍数关系
            let x_y=(x-r)/(y-50)

            let dy=-1       //单位时间沿着Y轴向上运动1
            let dx=x_y*dy   //单位时间沿着X轴向左运动的距离

            //获取小球
            let ball=document.getElementById("ball")

            //设置一个定时器控制小球的运动
            let dsq=setInterval(()=>{

            //上下有效碰撞
            if(y<=50 || (y>=520&&x>x1-150&&x<x1+150)){
                dy=-dy
            }

            //上下无效碰撞
            if((y==550)){
                clearInterval(dsq)
                alert("游戏结束")
            }

            //左右碰撞
            if(x<=50 || x>=1150){
                dx=-dx
            }

            //把单位时间的位移作用到坐标上
            x+=dx
            y+=dy

            //把坐标作用到实际定位上
            ball.style.left=x-50  +'px'
            ball.style.top=y-50  +'px'
        },1)
    }


    //挡板
    let board=document.getElementById('board')
        let dx=50           //按一次键盘挡板x轴移动的距离
        let x1=600,y1=585   //挡板初始的中心坐标

    document.onkeydown=function (e){
        console.log(e.keyCode)
        switch(e.keyCode){

            //向左
            case 37:
                if(x1>150){
                    x1-=dx
                    board.style.left=x1-150 + 'px'
                }
                break
            //向右
              case 39:
                if(x1<1050){
                x1+=dx
                board.style.left=x1-150 + 'px'
                }
                break
            }
       }