【案例分享】：挡板接小球案例和图片移动归位案例。

最新推荐文章于 2024-05-15 20:43:52 发布

小心你的脚踝

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量92

点赞数

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

本文链接：https://blog.csdn.net/m0_73575951/article/details/131582714

版权

案例1：挡板接小球

思路：首先设计出游戏的基本图样，一个游戏区域，然后写出一个小球和一个挡板。首先要计算好挡板的位置和球的位置，以页面左上角为坐标原点，高度是y轴，水平是x轴。球跟挡板碰撞时的圆心跟挡板的距离。然后写出小球从游戏区域的中心向上随机点着落，然后通过镜面反射弹射继续移动，可以以单位时间沿着y轴向上运动，算出x和y之间的弧度关系，上下碰撞为沿y轴的位移取反，左右碰撞为沿x轴的位移取反，最后将坐标作用在实际定位上。、

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小球游戏</title>
    <style>
        .f1{
            width: 1200px;
            height: 800px;
            border: 1px solid red;
            position: relative;
        }
        .z1{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: aqua;
            position: absolute;
            /*正中心*/
            left: 580px;
            top: 380px;
        }
        /*.f2{
            width: 1200px;
            height: 20px;
            border: 0px solid red;
            position: relative;
        }*/
        .z2{
            width: 160px;
            height: 20px;
            left: 530px;
            top: 780px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="f1" onclick="startGame()">
    <div id="ball1" class="z1"></div>
    <div id="ball2" class="z2"></div>
</div>
<!--<div class="f2">
    <div id="ball2" class="z2"></div>
</div>-->
</body>
<script>

    let ball2=document.getElementById('ball2')

    let x2=520//挡板的初始坐标
    let dx2=10//按一次键盘，x轴方向移动的距离

    //2.感知键盘keyCode 下40 上38 左37 右39
    document.onkeydown=function (e){
        console.log(e.keyCode)
        switch (e.keyCode){
            case 37:
                if (x2<10){
                    x2=10
                }
                x2-=dx2
                console.log('左')
                ball2.style.left=x2+'px'
                break;
            case 39:
                if (x2>1030){
                    x2=1030
                }
                x2+=dx2
                console.log('右')
                ball2.style.left=x2+'px'
                break;
        }
    }

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

    //获取小球的dom对象
    let ball1=document.getElementById('ball1')

    //点击父元素任意位置，开始游戏
    function startGame(){
        let xx=setInterval(()=>{
            //上下碰撞
            if (y1<=20){
                dy=-dy
            }
            if (y1>=760){
                if (x1>=x2&&x1<=x2+160){
                    dy=-dy
                }else{
                    // clearInterval(xx)
                    alert("Game Over");
                }

            }
            //左右碰撞
            if (x1<=20||x1>=1180){
                dx=-dx
            }
            //把单位时间的位移作用在坐标上
            x1+=dx
            y1+=dy
            //把坐标作用在实际的定位上
            ball1.style.left=x1-20+'px'
            ball1.style.top=y1-20+'px'
        },10)
    }
</script>
</html>

效果图演示：

案例2：图片移动归位

思路：首先写出大致框架，上面六张照片依次排放，下面六个方框，等待将图片归位到方框内。使用页面布局子绝父相，在JavaScript区写入函数，感知键盘keyCode 下40 上38 左37 右39。使用switch语句来控制图片的移动坐标，再写出六个调用函数，来绑定点击事件，使每个函数对应一个图片。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三国英雄归位</title>
    <style>

        /* 鼠标放上去，有个阴影 */
        button{
            border: none;
            border-radius: 8px;
            font-size: large;
            color: white;
            outline: none;
            font-size:large;
            cursor: pointer;
        }
        /* 鼠标放上去，有个阴影 */
        img:hover{
            box-shadow: 10px 10px 10px rebeccapurple;
        }
        h2{
            color: rebeccapurple;
            text-align: center;
            line-height: 300px;

        }
        .f2{
            display: flex;
            justify-content: space-around;
        }
        .z22{
            width: 200px;
            height: 350px;
            border: 1px solid rebeccapurple;

        }
        .f1{
            width: 1600px;
            height: 400px;
            position: relative;

        }
        .z1{
            left: 220px;
            position: absolute;
        }
        .z2{
            left: 420px;
            position: absolute;
        }
        .z3{
            left: 620px;
            position: absolute;
        }
        .z4{
            left: 820px;
            position: absolute;
        }
        .z5{
            left: 1020px;
            position: absolute;
        }
        .z6{
            left: 1220px;
            position: absolute;
        }
        img{
            width: 200px;
            height: 350px;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="f1">
    <div id="a" class="z1"><button onclick="a1()"><img src="曹操.jpg"></button></div>
    <div id="b" class="z2"><button onclick="b1()"><img src="貂蝉.webp"></button></div>
    <div id="c" class="z3"><button onclick="c1()"><img src="关羽.webp"></button></div>
    <div id="d" class="z4"><button onclick="d1()"><img src="刘备.jpg"></button></div>
    <div id="e" class="z5"><button onclick="e1()"><img src="刘协.webp"></button></div>
    <div id="f" class="z6"><button onclick="f1()"><img src="孙权.webp"></button></div>
</div>
<hr>
<div class="f2" >
    <div class="z22"><h2>刘协</h2></div>
    <div class="z22"><h2>刘备</h2></div>
    <div class="z22"><h2>关羽</h2></div>
    <div class="z22"><h2>曹操</h2></div>
    <div class="z22"><h2>孙权</h2></div>
    <div class="z22"><h2>貂蝉</h2></div>
</div>
</body>
<script>
    //根据id获取dom元素
    let ball=document.getElementById('ball')
    function a1(){
        y=350,x=200
        ball=document.getElementById('a')
        ff(ball,x,y)
    }
    function b1(){
        y=350,x=400
        ball=document.getElementById('b')
        ff(ball,x,y)
    }
    function c1(){
        y=350,x=600
        ball=document.getElementById('c')
        ff(ball,x,y)
    }
    function d1(){
        y=350,x=800
        ball=document.getElementById('d')
        ff(ball,x,y)
    }
    function e1(){
        y=350,x=1000
        ball=document.getElementById('e')
        ff(ball,x,y)
    }
    function f1(){
        y=350,x=1200
        ball=document.getElementById('f')
        ff(ball,x,y)
    }
    //2.感知键盘keyCode 下40 上38 左37 右39
    function ff(ball,x,y) {
        document.onkeydown = function (e) {
            console.log(e.keyCode)
            switch (e.keyCode) {
                case 38:
                    console.log('上')
                    ball.style.top = ball.offsetTop - 10 + 'px'
                    break;
                case 40:

                    console.log('下')
                    ball.style.top = ball.offsetTop + 10 + 'px'
                    break;
                case 37:

                    console.log('左')
                    ball.style.left = ball.offsetLeft - 10 + 'px'
                    break;
                case 39:

                    console.log('右')
                    ball.style.left = ball.offsetLeft + 10 + 'px'
                    break;
            }
        }

        function generateTab() {
            //调用函数
            createTab(emps)
        }
    }
</script>
</html>

效果显示图：

小心你的脚踝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【案例分享】：挡板接小球案例和图片移动归位案例。

思路：首先设计出游戏的基本图样，一个游戏区域，然后写出一个小球和一个挡板。首先要计算好挡板的位置和球的位置，以页面左上角为坐标原点，高度是y轴，水平是x轴。球跟挡板碰撞时的圆心跟挡板的距离。然后写出小球从游戏区域的中心向上随机点着落，然后通过镜面反射弹射继续移动，可以以单位时间沿着y轴向上运动，算出x和y之间的弧度关系，上下碰撞为沿y轴的位移取反，左右碰撞为沿x轴的位移取反，最后将坐标作用在实际定位上。使用switch语句来控制图片的移动坐标，再写出六个调用函数，来绑定点击事件，使每个函数对应一个图片。
复制链接

扫一扫