js实现小球碰撞和三国群英归位

最新推荐文章于 2024-07-11 15:29:37 发布

m0_62102386

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量34

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_62102386/article/details/131584264

版权

文章包含两个部分，一是基于HTML和CSS实现的三国人物布局，用户可以通过键盘控制移动；二是JavaScript编写的小球碰撞游戏，用户可以操作滑板防止小球掉落，具有简单的物理运动模拟和边界检测功能。

摘要由CSDN通过智能技术生成

三国群英归位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .f{
            height: 800px;
            width: 1800px;
            /*background-color: white;*/
            position: relative;

        }
        
        .z1{
           top: 400px;
            height: 400px;
            width: 1800px;
            border: 1px solid black;
            position: absolute;
        }
        .m1,.m2,.m3,.m4,.m5,.m6{
            width: 200px;
            height: 300px;
            border: 1px solid black;
            position: absolute;
        }
        .m1{
            left: 50px;
            top: 20px;
            font-size: large;
            text-align: center;
            line-height: 300px;
        }
        .m2{
            left: 300px;
            top: 20px;
            font-size: large;
            text-align: center;
            line-height: 300px;
        }
        .m3{
            left: 550px;
            top: 20px;
            font-size: large;
            text-align: center;
            line-height: 300px;
        }
        .m4{
            left: 800px;
            top: 20px;
            font-size: large;
            text-align: center;
            line-height: 300px;
        }
        .m5{
            left: 1050px;
            top: 20px;
            font-size: large;
            text-align: center;
            line-height: 300px;
        }
        .m6{
            left: 1300px;
            top: 20px;
            font-size: large;
            line-height: 300px;
            text-align: center;
        }
        .img1,.img2,.img3,.img4,.img5,.img6{
            position: absolute;
        }
        .img1{
            left: 50px;
            top: 20px;
        }
        .img2{
            left: 300px;
            top: 20px;
        }
        .img3{
            left: 550px;
            top: 20px;
        }
        .img4{
            left: 800px;
            top: 20px;
        }
        .img5{
            left: 1050px;
            top: 20px;
        }
        .img6{
            left: 1300px;
            top: 20px;
        }

    </style>
</head>
<body>
    <div class="f">
    <div class="img1"  id="img1" onclick="getid('img1')" ><img src="./期末作业图片/QQ图片20221209081819.png" height="300px" width="200px"></div>
    <div class="img2" id="img2" onclick="getid('img2')" ><img src="./期末作业图片/QQ图片20221209082618.png" height="300px" width="200px"></div>
    <div class="img3" id="img3" onclick="getid('img3')"><img src="./期末作业图片/QQ图片20221209082618.png" height="300px" width="200px"></div>
    <div class="img4" id="img4" onclick="getid('img4')"><img src="./期末作业图片/QQ图片20221209082618.png" height="300px" width="200px"></div>
    <div class="img5" id="img5"   onclick="getid('img5')"><img src="./期末作业图片/QQ图片20221209082618.png" height="300px" width="200px"></div>
    <div class="img6" id="img6"  onclick="getid('img6')"><img src="./期末作业图片/QQ图片20221209082618.png" height="300px" width="200px"></div>
   

        <div class="z1">
            <div class="m1">刘协</div>
            <div class="m2">刘备</div>
            <div class="m3">关羽</div>
            <div class="m4">曹操</div>
            <div class="m5">孙权</div>
            <div class="m6">貂蝉</div>
        </div>
    </div>
</body>
<script>
    function getid(a){
//打印参数
       console.log(a)
//获取id
    let idname=document.getElementById(a);
    let x=150,y=170
//向X轴移动10 向Y移动10
let dx=10,dy =10
//键盘控制
document.onkeydown=function(e){
        console.log(e.keyCode)
        switch(e.keyCode){
            case 38:
                console.log('上')
                y-=dy
                idname.style.top=y-50+'px'
                break;
                case 40:
                console.log('下')
                y+=dy
                idname.style.top=y-50+'px'
                break;
                case 37:
                console.log('左')
                x-=dx;
                idname.style.left=x-50+'px'
                break;
                case 39:
                console.log('右')
                x+=dx;
                idname.style.left=x-50+'px'
                break;
        }
    }
    }
/*let img1= document.getElementById('img1')*/

</script>

</html>

小球碰撞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .f{
            width: 1200px;
            height: 800px;
            border: 1px solid rgb(13, 11, 11);
            position: relative;
        }
        .z{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: aqua;
            position: absolute;
            left: 550px;
            top:350px
        }
        .k1{
            width: 1200px;
            height: 100px;
           border:1px solid rgb(186, 45, 45);
           top: 700px;
           position: absolute;
        }
        .k2{
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
        }

    </style>
</head>
<body>
    <div class="f" onclick="startGame()">
        
        <div id="ball" class="z"></div>

        <div class="k1">
            <div class="k2" id="k3"></div>
        </div>

        </div>
</body>
<script>
    //生成随机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轴向上运动
 
let ball=document.getElementById('ball')

function startGame(){
    setInterval(()=>{
       
     
    
        //上下
      /*  if(y<=50 || y>=650){
            dy=-dy;
        }
        //左右
        if(x<=50 || x>=1150){
            dx=-dx;
        }*/

       if(y<=50 ){
        dy=-dy
       }
       if(y>=650){
//如果不在滑板范围内，游戏结束
        if(x1-100>x||x>x1+100){
            alert("gameover")
           
        }else{
           //向上移动
            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'
    },5);

    let k3 =document.getElementById('k3')
//滑板中心坐标
    let x1=100
//移动距离
    let x2=10
//键盘控制
    document.onkeydown=function(e){
        console.log(e.keyCode)
        switch(e.keyCode){
            case 38:
                case 37:
                console.log('左')
                if(x1-100>=0){
                  x1-=x2
                k3.style.left=x1-100+'px'
                break;
                }else{
						//防止向左超出
                    k3.style.left=0
                }
               
                case 39:
                console.log('右')
                if(x1<=1100){
                    x1+=x2
                    k3.style.left=x1-100+'px'
                break;
                }else{
//防止向右超出
                    k3.style.right=1200
                }
               
        }
    }

}

    

</script>
</html>