Как я могу изменить положение элемента, когда он касается другого элемента в JavaScript? - PullRequest
Новая
       23

Как я могу изменить положение элемента, когда он касается другого элемента в JavaScript?

1 голос
/ 18 июня 2019

Я новичок в JavaScript и пытаюсь создать игру, подобную этой, в javascript: http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/. За исключением того, что мне не разрешено использовать элемент canvas, поэтому код, который я использую, не кажетсяработать.Проблема, с которой я столкнулся, заключается в том, чтобы заставить мой элемент мыши / пищи перемещаться в случайное новое положение, когда элемент змея / ползунок сталкивается с элементом мыши / пищи.Я также обычно не уверен, работает ли моя функция update (), а если нет, то я не знаю почему.

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

var snake = null;
var slither = document.querySelector("#snake > .snake");
var mouse = document.querySelector("#food > .mouse");
var body = document.getElementById("grass");
x = body.width / 2;
y = body.height / 2;

function init() {
    snake = document.getElementById("snake");
    snake.style.position = 'relative';
    snake.style.left = '0px';
    snake.style.top = '0px';
}


function getKeyAndMove(e) {
    var key_code = e.which || e.keyCode;
    switch (key_code) {
        case 37: //left arrow key
            moveLeft();
            break;
        case 38: //Up arrow key
            moveUp();
            break;
        case 39: //right arrow key
            moveRight();
            break;
        case 40: //down arrow key
            moveDown();
            break;
    }
}

function moveLeft() {
    snake.style.left = parseInt(snake.style.left) - 7 + 'px';
    update();
}
function moveUp() {
    snake.style.top = parseInt(snake.style.top) - 7 + 'px';
    update();
}
function moveRight() {
    snake.style.left = parseInt(snake.style.left) + 7 + 'px';
    update();
}
function moveDown() {
    snake.style.top = parseInt(snake.style.top) + 7 + 'px';
    update();
}
window.onload = init;

var update = () => {
    if (
        mouse.x === slither.x || mouse.y === slither.y || mouse.y === slither.y && mouse.x === slither.x
    ) {
        mouse.x = Math.floor((Math.random() * 30) + 1);
        mouse.y = Math.floor((Math.random() * 30) + 1);
    }
};
<body id="grass" onkeydown='getKeyAndMove(event)'>
        <div id="snake">
            <img class="snake" src="img/snek.png" alt="snake">
        </div>

        <div id="food">
            <img class="mouse" src="img/mouse.png" alt="mouse">
        </div>



    <script type="text/javascript" src="myscript.js"></script>
</body>

Мне нужны ответы только на JavaScript, пожалуйста, потому что я еще не изучил JQuery и все такое.Я думаю, что могут быть проблемы с моими значениями x и y, но я не знаю, как установить положение мыши для перемещения относительно окна, как это делается в примерах элемента canvas.Я просто запутался, пожалуйста, помогите.

Ответы [ 3 ]

1 голос
/ 18 июня 2019

Ваше обнаружение столкновений нуждается в работе, потому что вы в настоящее время только проверяете, пересекаются ли левая и верхняя стороны, но есть еще много комбинаций.

Посмотрите на этот ответ и это , чтобы узнать больше

Я также изменил селектор, чтобы переместить div, который держит мышь так же, как вы определили для вашей змеи. Я также установил его на position = 'relative';, чтобы он мог двигаться. Я добавил 'px' в конец вашей случайной строки с координатами 

var snake = null;
var food = null;
var slither = document.querySelector("#snake > .snake");
var mouse = document.querySelector("#food > .mouse");
var body = document.getElementById("grass");
x = body.width / 2;
y = body.height / 2;

function init() {
    snake = document.getElementById("snake");
    snake.style.position = 'relative';
    snake.style.left = '0px';
    snake.style.top = '0px';
    food = document.getElementById("food");
    food.style.position = 'relative';
}


function getKeyAndMove(e) {
    var key_code = e.which || e.keyCode;
    switch (key_code) {
        case 37: //left arrow key
            moveLeft();
            break;
        case 38: //Up arrow key
            moveUp();
            break;
        case 39: //right arrow key
            moveRight();
            break;
        case 40: //down arrow key
            moveDown();
            break;
    }
}

function moveLeft() {
    snake.style.left = parseInt(snake.style.left) - 7 + 'px';
    update();
}
function moveUp() {
    snake.style.top = parseInt(snake.style.top) - 7 + 'px';
    update();
}
function moveRight() {
    snake.style.left = parseInt(snake.style.left) + 7 + 'px';
    update();
}
function moveDown() {
    snake.style.top = parseInt(snake.style.top) + 7 + 'px';
    update();
}
window.onload = init;

var update = () => {
    if (
        mouse.x === slither.x || mouse.y === slither.y || mouse.y === slither.y && mouse.x === slither.x
    ) {
        food.style.left = Math.floor((Math.random() * 30) + 1) + "px";
        food.style.right = Math.floor((Math.random() * 30) + 1) + "px";
    }
};
<body id="grass" onkeydown='getKeyAndMove(event)'>
        <div id="snake">
            <img class="snake" src="img/snek.png" alt="snake">
        </div>

        <div id="food">
            <img class="mouse" src="img/mouse.png" alt="mouse">
        </div>



    <script type="text/javascript" src="myscript.js"></script>
</body>
0 голосов
/ 19 июня 2019

вот ответ, который я закончил. Я все еще настраиваю некоторые вещи CSS, но этот код делает то, что я хочу :). Кроме того, расположение элементов было причиной, по которой они не оставались в окне. У меня есть остальная часть кода, это только важные биты. Спасибо за помощь! 

function init() {
    snake = document.getElementById("snake");
    snake.style.position = 'relative';
    snake.style.left = '0px';
    snake.style.top = '0px';
    food = document.getElementById("food");
    food.style.position = 'absolute';
}




function collisionCheck(slither, mouse) {
    var snakeBounds = slither.getBoundingClientRect();
    var mouseBounds = mouse.getBoundingClientRect();

    if (!((snakeBounds.top + snakeBounds.height) < mouseBounds.top ||
        snakeBounds.top > (mouseBounds.height + mouseBounds.top) ||
        (snakeBounds.left + snakeBounds.width) < mouseBounds.left ||
        snakeBounds.left > (mouseBounds.width + mouseBounds.left))) {

        food.style.left = Math.floor(Math.random() * 800) + 'px';  
        food.style.top = Math.floor(Math.random() * 500) + 'px';
    }
}
0 голосов
/ 18 июня 2019

Этот код не проверен, но может помочь вам начать ... 

function collisionCheck(elem1, elem2) {
    var elem1Bounds = elem1.getBoundingClientRect();
    var elem2Bounds = elem2.getBoundingClientRect();

    var elem1Center = {
      x: elem1Bounds.left + (elem1Bounds.width / 2),
      y: elem1Bounds.top + (elem1Bounds.height / 2)
    }

    var elem2Center = {
      x: elem2Bounds.left + (elem2Bounds.width / 2),
      y: elem2Bounds.top + (elem2Bounds.height / 2)
    }

    // initialize if element 1 is within the viewport
    if (
        elem1Bounds.top >= 0 &&
        elem1Bounds.left >= 0 &&
        elem1Bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        elem1Bounds.right <= (window.innerWidth || document.documentElement.clientWidth)
    ) {

      // see https://stackoverflow.com/a/17628488/2116041
      var distance = Math.sqrt(
        Math.pow(elem1Bounds.x - elem2Bounds.x, 2) + 
        Math.pow(elem1Bounds.y - elem2Bounds.y, 2) 
      );

      if (distance > elem1Bounds.width && distance > elem1Bounds.height) {
        // no collision
        return false; 
      } else {
        // collision detected!
        return true; 
      }
    }
};
...