5
캔버스를 사용하면 더 좋은 웹 앱을 만들게 될 것이지만, 막혀있다. 회전하는 n-sided 폴리곤 (선이 이미 작동 함)이 필요합니다. 게임 루프는 그리드 배열을 통해 루프합니다 (그리드의 각 포인트는 Point() 객체의 하위 클래스를가집니다). 그리고 각각에 대해 tick() 메소드를 호출합니다. ShapePoint() 객체 (중간 마우스를 캔버스에 배치)에 도달 할 때까지 모든 것이 올바르게 작동합니다. ShapePoint의 tick() 메서드는 어떻게 든 무한 루프입니다. console.log ("hi")를 그 안에 넣으면 약 2000 개의 "hi"메시지를 줄 것이므로 이론적으로는 작동합니다. 재미있는 점은, 비록 그것이 stoke()를 통해 루핑하고 있다고해도, 아무 일도 일어나지 않는다는 것입니다!이것은 무한 루프이지만, 내 인생에서 그 이유를 알 수는 없다.
//################################################################
// THIS IS THE PROBLEM CLASS.
// So pretty much, when the game loop calls the tick() funciton
// of ANY ShapePoint object, everything hangs. The game is still
// looping through the ENTIRE tick() function (put console.log()
// functions in and you'll see what I mean) continually, but the
// effects it is supposed to display aren't shown.
//
//################################################################
function ShapePoint(x, y, sides) {
//position variable
this.positionOnCanvas = [x, y];
//number of sides
this.N = sides;
//current step
this.step = 0;
//the array to store all the angle data
this.thetas = new Array(this.N);
//the array to store all the vertex data
this.vertList = new Array(this.N);
//function to increase all the angels by an even amount
this.stepPoints = function(s) {
//for every side
for (i=0; i<this.N; i++) {
//multiply the current 'i' value by ((360/number of sides) + current step). This serves to create points at even intervals all the way around a circle, and have it increase by s every loop
this.thetas[i] = i*((360/this.N) + s);
//get the x value with 40*cos(angle for this point). Same for y, only with sin. Round both to 2 decimal places
this.vertList[i] = [Math.round((40*(Math.cos(this.thetas[i])))*100)/100, Math.round((40*(Math.sin(this.thetas[i])))*100)/100];
//if the current angle is between 90 and 180...
if (this.thetas[i]>=90 && this.thetas[i]<=180) {
//invert the x value
this.vertList[i][0] *= -1;
//else if the angle is between 180 and 270...
} else if (this.thetas[i]>=180 && this.thetas[i]<=270) {
//invert both the x and the y values
this.vertList[i][0] *= -1;
this.vertList[i][1] *= -1;
//else if the angle is between 270 and 360...
} else if (this.thetas[i]>=270 && this.thetas[i]<=360) {
//invert the y value
this.vertList[i][1] *= -1;
}
//nothing needed for 0-90 because both are positive
}
}
this.tick = function() { //<<<<<<<<THIS IS THE PROBLEM FUNCTION!
//setup all the points forward
this.stepPoints(this.step);
//for every side in this polyogn...
for (i=0; i<this.N; i++) {
//shorten the location of the positions
var posX = this.vertList[i][0] + this.positionOnCanvas[0];
var posY = this.vertList[i][1] + this.positionOnCanvas[1];
//begin drawing
ctx.beginPath();
//move to the x and y location of the current point
ctx.moveTo(posX, posY);
//if point is not the last in the array...
if (i < this.N-1) {
//draw a line to the next point in the array
ctx.lineTo(this.vertList[i+1][0] + this.positionOnCanvas[0], this.vertList[i+1][1] + this.positionOnCanvas[1]);
//else...
} else {
//draw a line to the first point in the array
ctx.lineTo(this.vertList[0][0] + this.positionOnCanvas[0], this.vertList[0][1] + this.positionOnCanvas[1]);
}
//draw a line
ctx.strokeStyle = "#000000";
ctx.lineWidth = 0.5;
//end
ctx.stroke();
//draw the vertex
ctx.fillStyle = "orange";
ctx.fillRect(posX-2, posY-2, 4, 4);
}
//draw the origin of the polygon
ctx.fillStyle = "lightPurple";
ctx.fillRect(this.positionOnCanvas[0]-2, this.positionOnCanvas[1]-2, 4, 4);
//if the step is greater than 360, set it to 0
this.step = this.step % 36; //(thanks Neikos!)
}
}
ShapePoint.prototype = new Point();
저는 여러 시간을 보냈습니다. 문제가 무엇인지 보지 못했습니다. 누구나 알아낼 수 있다면 환상적 일 것입니다. 이것이 어떻게 구현되는지에 대한 더 많은 컨텍스트가 필요하다면 JSFiddle을 생성했습니다. 사전에 감사드립니다,이 곳은 항상 도움이됩니다!
편집 : 나는 내 코드가 조금 투박 실감 할 수 있지만, 내가 뭘 모든 것이 정말 않는 것은 나를
직접적인 대답은 아니지만 'this.step = this.step % 360'을 사용하여 범위 내에서 유지할 수 있습니다. – Neikos
그냥 짐작하지만, 두 변수 모두에서 동일한 변수 인 'i'의 선언입니까? –
@ user2310289 아니, 다른 방법들, 그들은 – Lampitosgames