JavaScript Fehler im Zusammenhang mit canvas-Verarbeitung

[Gamer Xy1]

Hallo zusammen,
ich bin gerade dabei, eine 3D-Engine für den 2D-Canvas-Kontext zu schreiben.
Die Engine an sich funktioniert auch ganz gut, nur bei der Visualisierung der Errechneten Punkte gibt es einen Fehler...
Hier der Abschnitt im Quellcode:

var canvas = document.getElementById('game');  
var cwidth = $("canvas").innerWidth();
var cheight = $("canvas").innerHeight();
if (canvas.getContext){  
  var ctx = canvas.getContext('2d');
}

(Ich benutze jQuery in Teilen meines Codes)

var pointx = tldimensionx(point[i+1]['x'], point[i+1]['y'], point[i+1]['z']);
var pointy = tldimensiony(point[i+1]['x'], point[i+1]['y'], point[i+1]['z']);

ctx.beginPath();
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 2;
ctx.arc(pointx, pointy, 5, Math.PI*2, false);
ctx.closePath();
ctx.stroke();

Könnt ihr erkennen, welcher Fehler sich hier eingeschlichen hat?
Falls jemand den ganzen Quellcode sehen möchte, einfach eine PM an mich...

Schon mal Danke im Voraus für Eure Antworten

LG
Gamer Xy1

 

[bluebarcode]

Wie äussert sich dieser Fehler?

edit: als erster Ansatz ist MÖGLICHERWEISE irgend eine Variable nicht präzise genug - du rechnest immerhin mit pi. Hatt bei einer 3d enine in c auch mal das Problem dass durch das runden meine objekte immer mehr geschrumpft sein :-D

 

[Gamer Xy1]

Der Fehler ist, dass das Skript den Browser zu einer Fehlermeldung à la "Skript antwortet nicht mehr" bringt und absolut GAR NICHTS im canvas-Element angezeigt wird...
Einen kleineren Fehler habe ich schon behoben, indem ich dem canvas eine feste Breite und Höhe gegeben habe.
Aber das Skript ist trotzdem irgendwie fehlerhaft...
Ich werde es in den nächsten Tagen mal auslagern und dir den Link schicken...

 

[ice-breaker]

Dann hast du in deinem Code höchstwahrscheinlich irgendwo eine Endlosschleife oder deine Berechnungen brauchen zu lange, vermutlich aber ersteres.

 

[Gamer Xy1]

Klar, hab ja eine bewusste setInterval-Funktion, aber das ist ja gewollt...
Ich schick euch beiden mal nen Link zum Script...

 

[ice-breaker]

Wenn du Hilfe willst, dann poste den Code hier, wegen den lächerlichen 50 Zeilen Code so einen Aufstand zu machen, kann ich wirklich nicht verstehen...
Ich sehe da beim Drüberfliegen keinen Fehler aber meine Aussage bleibt bestehen, du musst den Code eben mal debuggen und auf die beiden genannten Probleme untersuchen.

 

[Gamer Xy1]

Ok, hast ja recht, hier also für alle der Code:

var canvas = document.getElementById('game');  
var cwidth = $("canvas").innerWidth();
var cheight = $("canvas").innerHeight();
if (canvas.getContext){  
  var ctx = canvas.getContext('2d');
	var drawpoints = function(i){
		ctx.drawImage(pointImg,point[i]['dx'],point[i]['dy']);
	}
}

ctx.translate(cwidth/2,cheight/2);

var mouseposx = 500;
var mouseposy = 200;
var fx = 0.5;
var fy = 0.5;

$("canvas").click(function(e){

var offset = $('canvas').offset();
var mousex = e.clientX-offset.left;
var mousey = e.clientY-offset.top;

mouseposx = mousex;
mouseposy = mousey;

});

	var pointImg = new Image();
	var pointReady = false;
	pointImg.onload = function(){
		pointReady = true;
	}
	pointImg.src = 'bullet_enemy.png';



var point = new Array();
point[0] = new Array();
point[0]['x'] = 0;
point[0]['y'] = 0;
point[0]['z'] = 0;
point[0]['dx'] = 0;
point[0]['dy'] = 0;

point[1] = new Array();
point[1]['x'] = 50;
point[1]['y'] = 0;
point[1]['z'] = 0;
point[1]['dx'] = -25;
point[1]['dy'] = 25;

point[2] = new Array();
point[2]['x'] = 0;
point[2]['y'] = 0;
point[2]['z'] = 0;
point[2]['dx'] = 0;
point[2]['dy'] = 0;

point[3] = new Array();
point[3]['x'] = 0;
point[3]['y'] = 50;
point[3]['z'] = 0;
point[3]['dx'] = 50;
point[3]['dy'] = 0;

point[4] = new Array();
point[4]['x'] = 0;
point[4]['y'] = 0;
point[4]['z'] = 0;
point[4]['dx'] = 0;
point[4]['dy'] = 0;

point[5] = new Array();
point[5]['x'] = 0;
point[5]['y'] = 0;
point[5]['z'] = 50;
point[5]['dx'] = 0;
point[5]['dy'] = -50;

point[6] = new Array();
point[6]['x'] = 0;
point[6]['y'] = 0;
point[6]['z'] = 0;
point[6]['dx'] = 0;
point[6]['dy'] = 0;
var numberpoints = 5;




var update = function(factor){

fx = mouseposx/cwidth;
fy = mouseposy/cheight;



for(i=0;i<numberpoints;i++){

var partdx = point[i]['x'] * (-fx);
var partdy = point[i]['y'] * (1-fx);
var partdz = point[i]['z'] * 0;

var resultdx = partdx + partdy + partdz;

point[i]['dx'] = resultdx;

}

for(i=0;i<numberpoints;i++){

var partvx = point[i]['x'] * (1-(fx * fy));
var partvy = point[i]['y'] * (1-((1-fx) * fy));
var partvz = point[i]['z'] * fy;

var resultvy = partvx + partvy + partvz;

point[i]['dy'] = resultvy;

}

};

var render = function(){

ctx.clearRect(0,0,cwidth,cheight);

for(i=0;i<numberpoints;i+2){


ctx.beginPath();

ctx.strokeStyle = "#0000ff"
ctx.moveTo(point[i]['dx'], point[i]['dy']);
ctx.drawImage(pointImg, point[i]['dx']-3, point[i]['dy']-3);

ctx.lineTo(point[i+1]['dx'], point[i+1]['dy']);
ctx.drawImage(pointImg, point[i+1]['dx']-3, point[i+1]['dy']-3);
ctx.closePath();
ctx.stroke();

/*
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 2;
ctx.moveTo(point[i]['dx'], point[i]['dy']);
ctx.lineTo(point[i+1]['dx'], point[i+1]['dy']);
ctx.arc(point[i]['dx'], point[i]['dy'], 5, Math.PI*2, false);
ctx.closePath();
ctx.stroke();
*/

//drawpoints(i);

}



};



var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;

};

var then = Date.now();
setInterval(main, 1);

die Seite, auf der ihr den Fehler beobachten könnt ist:
www.philip-maerz.de/game/enginetest/index.html