Javascript Girl
  1. Javascript Girl
  3. Traversées de collision
Intereting Posts
L'exécution du webdriver-start et protractor-start using grunt et protractor ne démarre pas car la commande start-web-start ne laisse pas le processus suivant démarrer Bibliothèque JavaScript similaire à Imagemagick (c.-à-d. Redimensionner des images et des images tout en maximisant la fidélité d'image)? La fonction JQuery ne fonctionne que dans une fonction Essayer de cacher () un élément avec jQuery Besoin d'une fonction basename dans Javascript Réagir / Redux – Enregistrer la valeur sélectionnée surChange Empêcher le navigateur Web de se fermer jusqu'à ce que la réponse AJAX soit renvoyée Utilisation de Jquery Datatable with AngularJs Comment vérifier si l'adresse IP du visiteur est toujours active ou en ligne? Comment personnaliser Twitter Bootstrap popover masquer l'animation Comment appeler une activité Android depuis PhoneGap JavaScript: Comment puis-je créer JSONP? Peoplesoft écrans dans un iFrame Mise à niveau de javascript qui ajoute un lien vers un champ Exécution de priorité jquery

Traversées de collision

Je suis assez nouveau à la fois pour CANVAS et Kineticjs, mais je pense que ce que je tente, devrait être beaucoup plus facile alors que je le fais faire. Fondamentalement, c'est ce que j'ai jusqu'ici:

Le code que je tente d'utiliser est de kineticjs. Arrêter de glisser vers une forme lorsque vous chevauchez avec une autre solution, mais que vous ne parvenez pas à l'utiliser.

Vérifiez le code live jsfiddle 

var isRectCollide = function(target, box) { if (target.x - target.width >= box.x + box.width && target.y - target.height >= box.y + box.height && target.x + target.width <= box.x + box.width && target.x + target.height <= box.y - box.height ) return false; else return true; }

L'idée de cela est que le carré rose doit être entraîné mais bloqué par la boîte orange, une fois traîné autour de la boîte orange et la boîte rose 'touche' la boîte bleue et le pop-up devrait se produire.

Je ne sais pas si l'utilisation de kineticjs est la façon la plus simple de mettre en œuvre cela?

Des idées, des conseils ou des conseils m'apprécieront beaucoup.

    Oui, puisque KineticJS n'a pas de collision, vous devez faire vos propres.

    Voici un test de collision entre les 2 rectangles kinetiques de la JS: 

     function theyAreColliding(rect1, rect2) { return !(rect2.getX() > rect1.getX()+rect1.getWidth() || rect2.getX()+rect2.getWidth() < rect1.getX() || rect2.getY() > rect1.getY()+rect1.getHeight() || rect2.getY()+rect2.getHeight() < rect1.getY()); }

    Et voici comment vous appelez le test de collision entre la boîte et l'obstacle: 

     if( theyAreColliding(box,obstacle){ // obstacle is blocking box alert("You are being blocked!"); }

    Et voici comment vous appelleriez le test de collision entre la case et le but: 

     if( theyAreColliding(box,target){ // box touched the goal alert("Goal!"); }

    Pour empêcher la boîte de traîner à travers l'obstacle, vous devez donner à la boîte une fonction de glissement personnalisée comme ceci: 

     dragBoundFunc: function(pos){ if(theyAreColliding(box,obstacle){ // box is touching obstacle // don't let box move down return({ x:pos.x, y:obstacle.getY()-1 }); } else{ // box is not touching obstacle // let it move ahead return({ x:pos.x, y:pos.y }); } }

    Vous pouvez voir comment cela fonctionne dans une démo à: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/

    [Modifier: spécifiez où chaque code va]

    Je mets les pièces ensemble dans un extrait de travail ci-dessous. J'ai trouvé une chose malheureuse. Il est possible pour l'utilisateur de faire glisser la boîte rose assez rapidement pour passer à travers l'obstacle-KineticJS ne peut pas réagir assez rapidement pour arrêter une traînée très rapide.

    Également – oops sur moi. J'ai corrigé quelques parenthèses manquantes dans la fonction theyAreColliding ci-dessus.

    DragBoundFunc passe en ajoutant au constructeur de boîtes (voir le code ci-dessous).

    Vous pouvez tester si l'utilisateur a un objectif en testant le gestionnaire "dragmove" de la boîte, comme ceci: 

      box.on('dragmove', function() { if (theyAreColliding(box, target)) { // box touched the goal alert("Goal!"); } });

    Voici le code et un violon: http://jsfiddle.net/uCAys/ 

     <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 20px; } canvas { border: 1px solid #777; } </style> </head> <body> <div id="container"></div> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script> <script> var stage = new Kinetic.Stage({ container: 'container', width: 300, height: 300 }); var layer = new Kinetic.Layer(); //Dragable Pink box var box = new Kinetic.Rect({ x: 100, y: 50, width: 100, height: 50, fill: 'pink', stroke: 'black', strokeWidth: 2, draggable: true, // this causes box to be stopped if contacting obstacle dragBoundFunc: function(pos){ if(theyAreColliding(box,obstacle)){ // box is touching obstacle // don't let box move down return({ x: pos.x, y: Math.min( obstacle.getY()-box.getHeight()-1, pos.y) }); } else{ // box is not touching obstacle // let it move ahead return({ x:pos.x, y:pos.y }); } } }); box.on('dragmove', function() { if (theyAreColliding(box, target)) { // box touched the goal box.setX(100); box.setY(50); alert("Goal!"); } }); // End goal blue box var target = new Kinetic.Rect({ x: 100, y: 200, width: 100, height: 50, fill: 'blue', stroke: 'black', strokeWidth: 2 }); // Obstacle/blocker orange box var obstacle = new Kinetic.Rect({ x: 125, y: 145, width: 50, height: 30, fill: 'orange', stroke: 'black', strokeWidth: 2 }); function theyAreColliding(rect1, rect2) { return !(rect2.getX() > rect1.getX() + rect1.getWidth() || // rect2.getX() + rect2.getWidth() < rect1.getX() || // rect2.getY() > rect1.getY() + rect1.getHeight() || // rect2.getY() + rect2.getHeight() < rect1.getY()); // } layer.add(box); layer.add(obstacle); layer.add(target); stage.add(layer); </script> </body> </html>