Мне нужно знать, как я могу сделать, чтобы корзина собирала яйца, как только дотронулся до нее? (яйцо и корзиночка) - PullRequest
Новая
       3

Мне нужно знать, как я могу сделать, чтобы корзина собирала яйца, как только дотронулся до нее? (яйцо и корзиночка)

0 голосов
/ 15 апреля 2020

Я пытаюсь сделать игру с яйцом и корзиной с помощью 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

1 Ответ

0 голосов
/ 15 апреля 2020

То, что вы ищете, - это обнаружение столкновений. Способ обнаружения столкновений заключается в проверке перекрытия двух фигур. Для вашей игры достаточно представить границы столкновений в виде прямоугольников в той же позиции и с той же шириной и высотой, что и ширина и высота корзины и текстур яиц в пикселях.

Первый шаг создать прямоугольную структуру, вероятно, класс с именем Rectangle или что-то подобное - для этого вам нужно будет сохранить вышеупомянутые значения - позиции x и y на экране, а также ширину и высоту в качестве переменных в вышеупомянутый Rectangle class.

Далее, чтобы проверить, перекрываются ли два прямоугольника, можно создать функцию, которая возвращает Boolean относительно того, перекрываются ли прямоугольники или нет. Это можно легко определить с помощью следующей логической функции: 

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

Наконец, чтобы определить, перекрывает ли корзина какие-либо яйца, просто выполните итерации по прямоугольникам для яиц и проверьте, перекрывают ли они корзину, если так - собрать яйцо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...