热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javascript实现多边形碰撞检测

这篇文章主要介绍了javascript如何实现多边形碰撞检测,帮助大家更好的理解和使用js,感

Javascript实现多边形碰撞检测

Javascript多边形碰撞检测

原理就是 循环每个顶点判断是不是在多边形内

const app = new PIXI.Application({ antialias: true });
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();


// draw polygon
const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520];

graphics.lineStyle(0);
graphics.beginFill(0x3500FA, 1);
graphics.drawPolygon(path);
graphics.endFill();

app.stage.addChild(graphics);

 var xuanzhuan = PIXI.Sprite.from("/moban/images/share.jpg");
 xuanzhuan.width=120;
 xuanzhuan.height=120;
 xuanzhuan.x=13;
 xuanzhuan.y=33;
  app.stage.addChild(xuanzhuan);


  xuanzhuan.interactive = true;

  xuanzhuan.buttOnMode= true;
   xuanzhuan
    .on("pointerdown", onDragStart)
    .on("pointerup", onDragEnd)
    .on("pointerupoutside", onDragEnd)
    .on("pointermove", onDragMove);

  function onDragStart(event) {
  // store a reference to the data
  // the reason for this is because of multitouch
  // we want to track the movement of this particular touch
  this.data = event.data;
  this.alpha = 0.5;
  this.dragging = true;
}

function onDragEnd() {
  this.alpha = 1;
  this.dragging = false;
  // set the interaction data to null
  this.data = null;
}
   var  posPolygon=[];
     var dianlist={};
    dianlist["x"]=600;
    dianlist["y"]=370; 
    posPolygon.push(dianlist)
  var dianlist={};
    dianlist["x"]=700;
    dianlist["y"]=460; 
    posPolygon.push(dianlist)  
  var dianlist={};
    dianlist["x"]=780;
    dianlist["y"]=420; 
    posPolygon.push(dianlist)   
  var dianlist={};
    dianlist["x"]=730;
    dianlist["y"]=570; 
   posPolygon.push(dianlist) 
  var dianlist={};
    dianlist["x"]=590;
    dianlist["y"]=520; 
    posPolygon.push(dianlist)
function onDragMove() {
  if (this.dragging) {
    const newPosition = this.data.getLocalPosition(this.parent);
    this.x = newPosition.x;
    this.y = newPosition.y;

    var baoweihe=this.getBounds();
    var youxiajiaox=baoweihe.x+baoweihe.width;
    var youxiajiaoy=baoweihe.y+baoweihe.height;

    var poslist=[];
     var pos={};
    pos["x"]=baoweihe.x;
    pos["y"]=baoweihe.y;    
    poslist.push(pos);      

  var pos={};
    pos["x"]=youxiajiaox;
    pos["y"]=baoweihe.y;    
    poslist.push(pos);      
    var pos={};
    pos["x"]=youxiajiaox;
    pos["y"]=youxiajiaoy;    
    poslist.push(pos);

    var pos={};
    pos["x"]=baoweihe.x;
    pos["y"]=youxiajiaoy;    
    poslist.push(pos);    

     
  
    var ispengzhuang=PolygonInPolygon(poslist, posPolygon,5);
    if(ispengzhuang){
      alert("碰撞了");
    }


  }
}

function PolygonInPolygon(posPolygonA, posPolygonB, count){
  console.log(posPolygonA);
    var count1=posPolygonA.length;
   for(var i=0;i Math.max( p1.y, p2.y ) )
      continue;
      
    // 计算交点 X 左边 : (p2.y - p1.y)/(p2.x - p1.x) = (y - p1.y)/(x - p1.x)
    // 直线 K 值相等, 交点y = pos.y
    let x = (pos.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x
    // 只统计单边交点,即点的正向方向
    if(x > pos.x)
      cross ++;
  }
 
  return cross % 2 == 1;
}

以上就是Javascript实现多边形碰撞检测的详细内容,更多关于Javascript多边形碰撞检测的资料请关注编程笔记其它相关文章!

原文链接:https://www.cnblogs.com/newmiracle/p/13858758.html


推荐阅读
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • 概述H.323是由ITU制定的通信控制协议,用于在分组交换网中提供多媒体业务。呼叫控制是其中的重要组成部分,它可用来建立点到点的媒体会话和多点间媒体会议 ... [详细]
  • Java太阳系小游戏分析和源码详解
    本文介绍了一个基于Java的太阳系小游戏的分析和源码详解。通过对面向对象的知识的学习和实践,作者实现了太阳系各行星绕太阳转的效果。文章详细介绍了游戏的设计思路和源码结构,包括工具类、常量、图片加载、面板等。通过这个小游戏的制作,读者可以巩固和应用所学的知识,如类的继承、方法的重载与重写、多态和封装等。 ... [详细]
  • vue使用
    关键词: ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • 本文介绍了brain的意思、读音、翻译、用法、发音、词组、同反义词等内容,以及脑新东方在线英语词典的相关信息。还包括了brain的词汇搭配、形容词和名词的用法,以及与brain相关的短语和词组。此外,还介绍了与brain相关的医学术语和智囊团等相关内容。 ... [详细]
  • Spring特性实现接口多类的动态调用详解
    本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍,以及getBeansOfType方法的应用,解决了在实际工作中遇到的接口及多个实现类的问题。同时,文章还提到了SPI使用的不便之处,并介绍了借助ApplicationContext实现需求的方法。阅读本文,你将了解到Spring特性的实现原理和实际应用方式。 ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
  • FineReport平台数据分析图表显示部分系列接口的应用场景和实现思路
    本文介绍了FineReport平台数据分析图表显示部分系列接口的应用场景和实现思路。当图表系列较多时,用户希望可以自己设置哪些系列显示,哪些系列不显示。通过调用FR.Chart.WebUtils.getChart("chartID").getChartWithIndex(chartIndex).setSeriesVisible()接口,可以获取需要显示的系列图表对象,并在表单中显示这些系列。本文以决策报表为例,详细介绍了实现方法,并给出了示例。 ... [详细]
  • iOS Swift中如何实现自动登录?
    本文介绍了在iOS Swift中如何实现自动登录的方法,包括使用故事板、SWRevealViewController等技术,以及解决用户注销后重新登录自动跳转到主页的问题。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • 本文介绍了pack布局管理器在Perl/Tk中的使用方法及注意事项。通过调用pack()方法,可以控制部件在显示窗口中的位置和大小。同时,本文还提到了在使用pack布局管理器时,应注意将部件分组以便在水平和垂直方向上进行堆放。此外,还介绍了使用Frame部件或Toplevel部件来组织部件在窗口内的方法。最后,本文强调了在使用pack布局管理器时,应避免在中间切换到grid布局管理器,以免造成混乱。 ... [详细]
author-avatar
手机用户2502877197
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有