Implémentez la méthode de détermination des collisions via JS !

Cette fois, je vais vous donner un exemple de la façon d'utiliser JS pour déterminer les collisions. Il existe de nombreux scénarios d'application pour les collisions, tels que le déclenchement de feux d'artifice, les petites balles rebondissant sur les murs, les oiseaux pixellisés, etc., nous devons donc d'abord comprendre comment déterminer la collision avant de pouvoir procéder à de futures opérations.

Code de la page HTML :

<p id="d1"></p>
<p id="d2"></p>

Code de la page CSS :

<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;

		}
		#d1{
			width: 100px;
			height: 100px;
			background: red;
			position: absolute;
		}
		#d2{
			width: 200px;
			height: 200px;
			background: yellow;
			position: absolute;
			top: 200px;
			left: 400px;
			position: absolute;
		}
	</style>

Code de la page JS :

<script type="text/javascript">
	p=document.querySelectorAll("p"); 
function hit(obj){
	obj.onmousedown=function(e){
		var e=e||window.event;
		var dX=e.offsetX;
		var dY=e.offsetY;
		document.onmousemove=function(e){
			var x=e.clientX;
			var y=e.clientY;
			obj.style.left=x-dX+"px";
			obj.style.top=y-dY+"px";
			if(p[0].offsetTop+p[0].offsetHeight>=p[1].offsetTop && p[0].offsetTop<=p[1].offsetTop+p[1].offsetHeight && p[0].offsetLeft+p[0].offsetWidth>=p[1].offsetLeft && p[0].offsetLeft<=p[1].offsetLeft+p[1].offsetWidth){
				console.log("你撞我了！再撞一个试试！")
			};
	}
	document.onmouseup=function(){
		document.onmousemove=null;
	}
}	
}
hit(p[0]);
hit(p[1]);
</script>

Cet article explique comment déterminer les collisions via JS. Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

Présentation de quelques solutions d'implémentation js pour les algorithmes classiques

javascript Définir comme page d'accueil Ajouter le code JS favoris

Compréhension de l'héritage JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!