Dev Faq
2
votes

Comment puis-je changer la position d'un élément lorsqu'il est touché par un autre élément en javascript?

Je suis novice en JavaScript et j'essaie de créer un jeu comme celui-ci en javascript: http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/ . Sauf que je ne suis pas autorisé à utiliser l'élément canvas, donc le code que j'utilise ne semble pas fonctionner. Le problème que j'ai est de faire bouger mon élément souris / nourriture vers une nouvelle position aléatoire lorsque l'élément serpent / glissement entre en collision avec l'élément souris / nourriture. Je ne suis généralement pas non plus sûr que ma fonction update () fonctionne et si ce n'est pas le cas, je ne sais pas pourquoi.

J'ai essayé de nombreuses façons différentes d'exécuter le code correctement; placer la fonction de mise à jour à différents endroits comme onload de fenêtre, dans chaque fonction de flèche, etc. J'ai essayé de trouver de nombreux autres codes mais tout ce que je peux trouver, ce sont des personnes qui utilisent l'élément canvas pour créer leur jeu.

p> 

<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>
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);
    }
};

J'ai besoin de réponses uniquement en JavaScript, car je n'ai pas encore appris JQuery et tout ça. Je pense qu'il pourrait y avoir un problème avec mes valeurs x et y mais je ne sais pas comment définir la position de la souris pour se déplacer par rapport à la fenêtre comme ils le font dans les exemples d'élément de canevas. Je suis juste confus, aidez s'il vous plaît.

1 commentaires

Vous pouvez envisager d'ajouter la balise collision-detection à votre question.

3 Réponses :

2
votes

Vos besoins en matière de détection de collision fonctionnent, car vous ne vérifiez actuellement que si les côtés gauche et supérieur se croisent, mais il existe de nombreuses autres combinaisons.

Regardez cette réponse et ceci pour en savoir plus

J'ai également changé le sélecteur pour déplacer le div contenant la souris de la même manière que vous l'aviez défini pour votre serpent. Je l'ai également défini sur position = 'relative'; afin qu'il puisse se déplacer. J'ai ajouté 'px' à la fin de votre chaîne de coordonnées aléatoires 

<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>
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";
    }
};

2 commentaires

merci pour les détails! Les fonctions moveUp / Down / Left / Right sont pour les touches fléchées et elles fonctionnent parfaitement, ce sur quoi je suis coincé est la fonction ci-dessous `` `` 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) + 'px'; mouse.y = Math.floor ((Math.random () * 30) + 1) + 'px'; }}; `` J'ai implémenté votre réponse qui a placé la souris comme élément supérieur pour que le serpent se déplace sous lui maintenant.

J'ai également changé la fonction update () . Pour avoir le serpent sur le dessus, augmentez son z-index en css

1
votes

Ce code n'a pas été testé mais peut vous aider à démarrer ... 

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; 
      }
    }
};

1 commentaires

Salut! Rien n'est changé pour une raison quelconque. J'ai supprimé la fonction de mise à jour et l'ai remplacée par la fonction de collision, mais est-ce que je l'exécute mal? En ce moment, je le fais vérifier à chaque touche enfoncée des touches fléchées s'il est entré en collision avec un autre élément. Mais je pense que le code ci-dessus est de vérifier les bords de l'écran? Mais ça ne marche toujours pas donc je ne sais pas. Puis-je utiliser la même stratégie pour faire une collision entre le serpent et la souris?

0
votes

voici la réponse que j'ai trouvée. Je suis toujours en train de peaufiner certains trucs css mais ce code fait ce que je veux :). Le positionnement des éléments était également la raison pour laquelle il ne restait pas dans la fenêtre. J'ai encore le reste du code, ce ne sont que les éléments importants. Merci pour l'aide! 

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 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO