html5 im kreis fahren problem

02/19/2012 00:11 bammes#1

Nabend leute,

(zum nachschauen [Only registered and activated users can see links. Click Here To Register...] )
(gibt komische probleme mit link hier mal kompliziert:
h t t p : / / n o n a m e b e r i c h t e . s q u a r e 7 . c h / P r o b l e m /
)

Ich m�chte einen kleinen Kreis in einem Kreis fahren lassen.
das Problem ist, dass es komischerweise eine Abweichung gibt, die gewaltig ist.

HTML Code:

var scaleX = Math.cos(data.ball.angle*Math.PI/180);
	var scaleY = Math.sin(data.ball.angle*Math.PI/180);
	var velX = data.ball.speed * scaleX * (data.frameTime/1000);
	var velY = data.ball.speed * scaleY * (data.frameTime/1000);
	if(data.ball.angle <= 360){
	data.ball.angle += 900 * (data.frameTime/1000);
	}
	else{
	data.ball.angle = 0;
	}

is gilt:

HTML Code:

var data = {
	fps: 60,
	ball: {
		start: {
			x: 300,
			y: 300,
		},
		radiant: 5,
		color: "black",
		x: 100,
		y: 100,
		speed: 1000,
		acceleration: 2,
		gravity: 0,
		angle: 30,
	},
	workspace: {
		width: 1200,
		height: 1000,
		backgroundColor: "yellow",
		id: "gameGround",
		outerBorder: 5,
	},
}

und frametime ist die zeit in ms des letzten frames

hat da jemand einen eine Idee, wiso kein Perfekter Kreis entsteht?

02/19/2012 02:12 ms#2

Dass kein perfekter Kreis entsteht liegt an zwei Faktoren:

1. Wenn der Ball mindestens 360� durchlaufen hat, dann setzt du ihn auf genau 0� zur�ck. Du vergisst dabei aber, dass der Ball in der Regel nicht genau 360� zur�ckgelegt hat, sondern etwas mehr. Deswegen solltest du stattdessen nach jeder Umrundung genau 360� abziehen, damit keine Verschiebung entsteht.

Code:

data.ball.angle += 900 * (data.frameTime/1000);
if(data.ball.angle >= 360)
    data.ball.angle -= 360;

2. Jetzt l�uft der Ball zwar im Kreis, springt aber hin und wieder auf eine andere Bahn. Das liegt daran, dass die Bewegung des Balls zeitabh�ngig ist. Wenn der Browser mal kurz laggt, dann legt der Ball dementsprechend auch eine weitere Strecke zur�ck. Au�erdem ist die Zeitmessung nur auf die Millisekunde genau, weswegen die Kreisbahnen auch nicht zu 100% perfekt sind.

02/19/2012 11:51 bammes#3

k habs mal abge�ndert.

hab jetzt keine funktion gefunden, mit der man in JS mikro oder nanosekunden messen kann.

Schade :-(