简体繁体 English

javascript中的移动对象检测与其他对象的碰撞

[英]moving object in html/css/javascript detecting collision with other objects

原文 2012-02-01 09:52:47 6 2 javascript/ css/ html5/ graphics/ jquery-animate

I want to make a moving man in css/html/javascript, also detect collisions with other objects. 我想在css / html / javascript中做一个动人的人，也要检测与其他对象的碰撞。 Any idea how to do it? 知道怎么做吗？ or any pointers to the same will do great. 或任何指向相同内容的指针都可以。

2 个解决方案

The first try is look at rapahel js project it uses canvas, second it is a pretty hard thing to do as you want your own physics engine at 2 D level, but i guess with some math formulas you could do it, but everything that you need as an object should be scripted in js to be sure to get the collision effect. 第一次尝试是查看它使用画布的rapahel js项目，其次，这是一件非常困难的事情，因为您希望使用自己的2D级别的物理引擎，但是我想可以通过一些数学公式来做到，但是您要做的一切需要作为对象应该在js中编写脚本，以确保获得碰撞效果。

Some design patterns should help you to make your code better. 一些设计模式应该可以帮助您改善代码。

Good luck. 祝好运。

Pretty much any basic game tutorial covers the topics you asked. 几乎所有基本游戏教程都涵盖了您所要求的主题。 If you can't find a javascript version of that, just get anything in a language you are familiar and try to code the same thing in javascript. 如果找不到该版本的javascript版本，请以您熟悉的语言获取任何内容，然后尝试在javascript中编写相同的代码。

to draw things somewhat in the same way these tutorials probably do, use a div with "position:relative" and its children with "position:absolute" and use "top" and "left" css style proprieties to position the boxes/sprites/whatever. 以与本教程可能的方式相同的方式绘制事物，请使用带有“ position：relative”的div及其带有“ position：absolute”的子级，并使用“ top”和“ left” css样式专有性来放置框/小精灵/随你。

I am pretty sure you can figure out what to do if you follow these tips. 我很确定，如果您遵循这些提示，便可以弄清楚该怎么办。