1.Emu8086平台及数据传送实验.doc1实验报告-学生用.docx1.Emu8086平台及数据传送实验.doc
1.Emu8086平台及数据传送实验.doc
1.Emu8086平台及数据传送实验.doc
<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<title>小球移动</title>
<style type="text/css">
    #main {
        width: 800px;
        height: 200px;
        margin: 400px auto;
        position: relative;
    }

    #box1 {
        width: 600px;
        height: 600px;
        margin: 400px auto;
        position: relative;
        background-color: #66ccff;

    }

    #ball {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        position: absolute;
        background-color: chartreuse;
    }

    #ball2 {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        position: absolute;
        left: 100px;
        top: 100px;
        background-color: brown;
    }

    #start {
        width: 100px;
        border:1px solid #ff6a00; 
        height: 50px;
        bottom: 200px;
        left: 250px;
        position: absolute;
        background-image: linear-gradient(green yellow);
    }

    #stop {
        width: 100px;
        border:1px solid #ff6a00; 
        height: 50px;
        bottom: 200px;
        left: 450px;
        position: absolute;
        background-image: linear-gradient(green yellow);
    }
</style>

</head>

<body>

<div id="main">
    <div id="box1">
        <div id="ball"></div>
        <div id="ball2"></div>
    </div>
    <button id="start">发射</button>
    <button id="stop">停止</button>
</div>
<script type="text/javascript">
    var sid;
    var box = document.getElementById('box1');
    var ball = document.getElementById('ball');
    var ball2 = document.getElementById('ball2')
    var sign = 0;
    document.getElementById('start').onclick = function () {

        //用于解决多次按键的标记,多次按下开始的话只会执行一次
        if (sign == 0) {
            sign = 1;

            var xtemp = randomnum(5, 10);
            var ytemp = randomnum(5, 10);
            var xtemp2 = randomnum(5, 10);
            var ytemp2 = randomnum(5, 10);
            sid = setInterval(function () {
                var x = ball.offsetLeft;
                var y = ball.offsetTop;
                var x2 = ball2.offsetLeft;
                var y2 = ball2.offsetTop;
                var loc = box.offsetWidth - ball.offsetWidth;
                var loc2 = box.offsetWidth - ball2.offsetWidth;
                if (x <= 0) {
                    xtemp = randomnum(5, 10);
                } else if (x >= loc) {
                    xtemp = - randomnum(5, 10);
                }
                if (x2 <= 0) {
                    xtemp2 = randomnum(5, 10);
                } else if (x2 >= loc2) {
                    xtemp2 = - randomnum(5, 10);
                }
                if (y <= 0) {
                    ytemp = randomnum(5, 10);
                } else if (y >= loc) {
                    ytemp = - randomnum(5, 10);
                }
                if (y2 <= 0) {
                    ytemp2 = randomnum(5, 10);
                } else if (y2 >= loc2) {
                    ytemp2 = - randomnum(5, 10);
                }

                //勾股定理判断圆心距离是否已经小于半径之和
                if (Math.pow(x - x2, 2) + Math.pow(y - y2, 2) <= Math.pow(ball.offsetWidth / 2 + ball2.offsetWidth / 2, 2)) {
                    //写过迷宫问题之类带方向的问题的话应该很容易理解这里方向的写法,思路是小球碰撞后向着它来时的方向移动,移动角度没有计算,直接用的随机数
                    if (x < x2) {
                        if (y < y2) {
                            xtemp = - randomnum(5, 10);
                            ytemp = - randomnum(5, 10);
                            xtemp2 = randomnum(5, 10);
                            ytemp2 = randomnum(5, 10);
                        } else if (y > y2) {
                            xtemp = - randomnum(5, 10);
                            ytemp = randomnum(5, 10);
                            xtemp2 = randomnum(5, 10);
                            ytemp2 = - randomnum(5, 10);
                        } else {
                            xtemp = - randomnum(5, 10);
                            xtemp2 = randomnum(5, 10);
                        }
                    } else if (x > x2) {
                        if (y < y2) {
                            xtemp = randomnum(5, 10);
                            ytemp = - randomnum(5, 10);
                            xtemp2 = - randomnum(5, 10);
                            ytemp2 = randomnum(5, 10);
                        } else if (y > y2) {
                            xtemp = randomnum(5, 10);
                            ytemp = randomnum(5, 10);
                            xtemp2 = - randomnum(5, 10);
                            ytemp2 = - randomnum(5, 10);
                        } else {
                            xtemp = randomnum(5, 10);
                            xtemp2 = - randomnum(5, 10);
                        }
                    } else if (y > y2) {
                        ytemp = randomnum(5, 10);
                        ytemp2 = - randomnum(5, 10);
                    } else if (y < y2) {
                        ytemp = - randomnum(5, 10);
                        ytemp2 = randomnum(5, 10);
                    }
                }
                x = x + xtemp;
                y = y + ytemp;
                ball.style.left = x + "px";
                ball.style.top = y + "px";
                x2 = x2 + xtemp2;
                y2 = y2 + ytemp2;
                ball2.style.left = x2 + "px";
                ball2.style.top = y2 + "px";
                console.log(sign);
            }, 10)

        } else {
            console.log(sign);
        }
    }
    document.getElementById('stop').onclick = function () {
        if (sid) {
            clearInterval(sid)
            //按下停止时置零
            sign = 0;
        }
    }
    //一个产生随机数的方法
    function randomnum(m, n) {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }
</script>

</body>

</html>

(所以说面向过程基础还是很有用的,咳咳)

Last modification:March 19th, 2021 at 08:11 am