我想知道我怎样才能让篮子一旦接触到鸡蛋就收集起来？（鸡蛋和篮子游戏）答案

【问题标题】：I need to know how can i make the basket collect the eggs once touch it ? (egg and basket game )我想知道我怎样才能让篮子一旦接触到鸡蛋就收集起来？（鸡蛋和篮子游戏）
【发布时间】：2020-04-16 01:51:00
【问题描述】：

我正在尝试用 JS 制作鸡蛋和篮子游戏，我只需要制作一个收集鸡蛋的函数就可以击中篮子，所以任何帮助都可以通过一个简单的方法来完成方式：

<!--html code -->

<body class="home-page overflow-hidden ">
    <div class="container-fluid">
        <div class="heading-score-life d-flex justify-content-between">
            <span class="ml-3 mt-1">Score&nbsp;0</span>
            <span class="mr-3 mt-1">Life&nbsp;10</span>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-4">
                    <div class="first hen d-flex justify-content-center">
                        <img src="photos/Happy-hen.svg" class="img-fluid henD">

                    </div>
                </div>
                <div class="col-4 ">
                    <div class="second hen d-flex justify-content-center">
                        <img src="photos/Happy-hen.svg" class="img-fluid henD">
                    </div>
                </div>
                <div class="col-4 ">
                    <div class="third hen d-flex justify-content-center">
                        <img src="photos/Happy-hen.svg" class="img-fluid henD">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <div class="first hen d-flex justify-content-center">
                        <img src="photos/Happy-Egg.svg" class="egg one">
                    </div>
                </div>
                <div class="col-4">
                    <div class="second hen d-flex justify-content-center">

                        <img src="photos/Happy-Egg.svg" class="egg two">
                    </div>
                </div>
                <div class="col-4 ">
                    <div class="third hen d-flex justify-content-center">

                        <img src="photos/Happy-Egg.svg" class="egg three">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div id="start-table" class="caption text-center m-auto">
                        <h1 class="pb-3 mt-4 text-white font-weight-bold">HAPPY EGGS</h1>
                        <button id="play" >PLAY</button>
                    </div>
                </div>
            </div>

            <div class="basket-area">
                <div class="row align-items-center">
                    <div class="basket" id="basket_move">
                        <img src="photos/Basket.svg" class="img-fluid">
                    </div>
                </div>
            </div>
            <script src="js/jquery-3.4.1.min.js"></script>
            <script src="js/popper.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/main.js"></script>
</body>

</html>

//css code 

.home-page{
   background-image: url(../photos/Background-Night.svg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center 43%;
   height: 100vh;
}

.henD{
    width: 40%;
    animation:henscale 1s infinite linear;

}

@keyframes henscale {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

}

.home-page span {

    font-family: "Roboto", sans-serif;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
}

.caption {
    height: 22vh;
    background-color:#4C4660;
    width: 60%;
    border: 4px solid #FF4571;
    border-radius: 70px;
    margin-top: 50px !important;
}

.caption h1 {
    font-size:300%;
}

.caption button{
border: 4px solid #fff;
background-color: #ff5f84;
border-radius: 100px;
color: #fff;
width: 200px;
height: 56px;
font-size: 42px;
text-align: center;
font-weight: 900;
letter-spacing: -3px;
line-height: 44px;
}

.basket{
    width: 5rem;
}

.hes{
    overflow: hidden
}

#basket_move{
    position: absolute;
    bottom: 50px
}

.dispalyNone {
    display :none !important;
}

.dispaly{

    display: flex !important;

}
.egg{
    position: absolute;
    z-index: 9999999999999999;
    display: none;
}
.one{

    width: 22px;

}
.two{

    width: 22px;

}
.three{

    width: 22px;

}

.first img {
 position: relative;
 z-index: 9999;
}



// JS code

var bascket = document.getElementById("basket_move");
var playBtn = document.getElementById("play");
var caption = document.querySelector(".caption");
var eggsO = document.querySelector(".one");
var eggsT = document.querySelector(".two");
var eggsTh = document.querySelector(".three");


var currentPosEgg = 0;
var requestAnimationFrame = window.requestAnimationFrame;

playBtn.onclick = function playBtn() {
    start();
    animation();
    during()



}

function start() {
    caption.classList.add("dispalyNone")
}

function during() {

    eggsO.classList.add("dispaly")
    eggsT.classList.add("dispaly")
    eggsTh.classList.add("dispaly")
}

function animation() {
    eggsO.style.top = currentPosEgg + "px";
    currentPosEgg++
    if (currentPosEgg >= 400) {

        currentPosEgg = 0;
    }

    eggsT.style.top = currentPosEgg + "px";
    currentPosEgg++
    if (currentPosEgg >= 900) {

        currentPosEgg = 0;
    }


    eggsTh.style.top = currentPosEgg + "px";
    currentPosEgg++
    if (currentPosEgg >= 800) {

        currentPosEgg = 0;
    }
    requestAnimationFrame(animation);

}



document.addEventListener("mousemove", function (e) {
    mouse(e);
})

function mouse(e) {
    var x = e.clientX;
    bascket.style.left = x + "px"

}

感谢很快的回复，给我一个简单的方法来做这个功能，并将它们收集在分数中，原生 javascript：0.0.00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

【问题讨论】：

标签： javascript html css animation bootstrap-4

【解决方案1】：

您正在寻找的是碰撞检测 - 碰撞检测的工作方式是检查两个形状是否重叠。就您的游戏而言，将碰撞边界表示为位于相同位置的矩形，并且具有与篮子和鸡蛋纹理的宽度和高度相同的宽度和高度（以像素为单位）。

第一步是创建一个矩形结构，可能是一个名为 Rectangle 的类或类似的东西 - 为此您需要存储上述值 - 屏幕上的 x 和 y 位置，以及宽度和高度作为上述Rectangle 类中的变量。

接下来，要检查两个矩形是否重叠，可以创建一个函数，返回 Boolean 来判断矩形是否重叠。这可以使用以下逻辑函数轻松确定：

...
function overlaps(rect) {
    return x < rect.x + rect.width 
        && x + width > rect.x 
        && y < rect.y + rect.height
        && y + height > rect.y
}
...

最后，要检测篮子是否与鸡蛋重叠，只需遍历鸡蛋的矩形并检查它们是否与篮子重叠，如果是 - 收集鸡蛋。

【讨论】：