Bounding volumeReal-Time collision detectionOpenGL collision detectionAABB treeProcessing collisionOBB collisionThree js collision

2D collision detection - Game development - MDN Web Docs

文章推薦指數： 80 %
投票人數：10人

One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. The algorithm works by ... SkiptomaincontentSkiptosearchSkiptoselectlanguageGamedevelopmentTechniquesforgamedevelopment2DcollisiondetectionArticleActionsEnglish(US)Axis-AlignedBoundingBoxCircleCollisionSeparatingAxisTheoremCollisionPerformanceRelatedTopics Introduction Introduction Anatomy Examples APIsforgamedevelopment Canvas CSS Fullscreen Gamepad IndexedDB JavaScript PointerLock SVG TypedArrays WebAudio WebGL WebRTC WebSockets WebVR WebWorkers XMLHttpRequest Techniques Usingasyncscriptsforasm.js Optimizingstartupperformance UsingWebRTCpeer-to-peerdatachannels Efficientanimationforwebgames AudioforWebGames 2Dcollisiondetection Tilesandtilemapsoverview 3DgamesontheWeb 3DgamesontheWeboverview Explainingbasic3Dtheory BuildingupabasicdemowithA-Frame BuildingupabasicdemowithBabylon.js BuildingupabasicdemowithPlayCanvas BuildingupabasicdemowithThree.js WebVR 3Dcollisiondetection BoundingvolumecollisiondetectionwithTHREE.js Implementinggamecontrolmechanisms Controlmechanisms Mobiletouch Desktopwithmouseandkeyboard Desktopwithgamepad Other Tutorials 2DbreakoutgameusingpureJavaScript 2DbreakoutgameusingPhaser 2Dmaze_gamewithdeviceorientation 2DplatformgameusingPhaser Publishinggames Publishinggamesoverview Gamedistribution Gamepromotion Gamemonetization Axis-AlignedBoundingBoxCircleCollisionSeparatingAxisTheoremCollisionPerformance2DcollisiondetectionAlgorithmstodetectcollisionin2Dgamesdependonthetypeofshapesthatcancollide(e.g.RectangletoRectangle,RectangletoCircle,CircletoCircle).Generallyyouwillhaveasimplegenericshapethatcoverstheentityknownasa"hitbox"soeventhoughcollisionmaynotbepixelperfect,itwilllookgoodenoughandbeperformantacrossmultipleentities.Thisarticleprovidesareviewofthemostcommontechniquesusedtoprovidecollisiondetectionin2Dgames.Axis-AlignedBoundingBoxOneofthesimplerformsofcollisiondetectionisbetweentworectanglesthatareaxisaligned—meaningnorotation.Thealgorithmworksbyensuringthereisnogapbetweenanyofthe4sidesoftherectangles.Anygapmeansacollisiondoesnotexist.

Movetherectanglewitharrowkeys.Greenmeanscollision,bluemeansnocollision.

Crafty.init(200,200); vardim1={x:5,y:5,w:50,h:50} vardim2={x:20,y:10,w:60,h:40} varrect1=Crafty.e("2D,Canvas,Color").attr(dim1).color("red"); varrect2=Crafty.e("2D,Canvas,Color,Keyboard,Fourway").fourway(2).attr(dim2).color("blue"); rect2.bind("EnterFrame",function(){ if(rect1.xrect2.x&& rect1.yrect2.y){ //collisiondetected! this.color("green"); }else{ //nocollision this.color("blue"); } }); Note:AnotherexamplewithoutCanvasorexternallibraries. CircleCollisionAnothersimpleshapeforcollisiondetectionisbetweentwocircles.Thisalgorithmworksbytakingthecenterpointsofthetwocirclesandensuringthedistancebetweenthecenterpointsarelessthanthetworadiiaddedtogether.

Movethecirclewitharrowkeys.Greenmeanscollision,bluemeansnocollision.

#cr-stage{ position:static!important; height:200px!important; } Crafty.init(200,200); vardim1={x:5,y:5} vardim2={x:20,y:20} Crafty.c("Circle",{ circle:function(radius,color){ this.radius=radius; this.w=this.h=radius*2; this.color=color||"#000000"; this.bind("Move",Crafty.DrawManager.drawAll) returnthis; }, draw:function(){ varctx=Crafty.canvas.context; ctx.save(); ctx.fillStyle=this.color; ctx.beginPath(); ctx.arc( this.x+this.radius, this.y+this.radius, this.radius, 0, Math.PI*2 ); ctx.closePath(); ctx.fill(); ctx.restore(); } }); varcircle1=Crafty.e("2D,Canvas,Circle").attr(dim1).circle(15,"red"); varcircle2=Crafty.e("2D,Canvas,Circle,Fourway").fourway(2).attr(dim2).circle(20,"blue"); circle2.bind("EnterFrame",function(){ vardx=(circle1.x+circle1.radius)-(circle2.x+circle2.radius); vardy=(circle1.y+circle1.radius)-(circle2.y+circle2.radius); vardistance=Math.sqrt(dx*dx+dy*dy); if(distance

請為這篇文章評分？

延伸文章資訊