제가 작업중인이 자동차 게임의 트랙을 만드는 방법을 알아 내려고합니다. 현재 문제는 트랙을 그릴 때 드로잉의 좌표가 자동차의 좌표를 기준으로 변형된다는 것입니다. 죄송합니다. 설명하기 어렵지만 아래 코드를 보면 제가 의미하는 바를 알 수 있습니다. 그런 다음 모든 그림을 최신 프레임에 유지하는 문제가 있지만 그것은 다른 날의 문제입니다. (차가 떠나는 흔적은 무시하십시오. 도면이 최신 프레임에 다시 그려 지는지 확인하면 수정 될 것입니다.이 JS와 정말 혼란 스럽기 때문에 모든 도움을 주셔서 감사합니다!
var MAX_VELOCITY = 3;
class Car {
constructor(x, y, angle) {
this.x = x;
this.y = y;
this.angle = angle;
this.velocity = 0;
this.accel = 0;
this.width = 40;
this.height = 80;
}
show() {
fill(255, 0, 255);
stroke(0);
translate(this.x, this.y);
rotate(this.angle);
rect(0, 0, this.width, this.height);
}
move() {
this.velocity += this.accel;
if (this.velocity > MAX_VELOCITY) {
this.velocity = MAX_VELOCITY;
}
if (this.velocity < -MAX_VELOCITY) {
this.velocity = -MAX_VELOCITY;
}
this.y += this.velocity * Math.sin(this.angle + Math.PI / 2);
this.x += this.velocity * Math.cos(this.angle + Math.PI / 2);
}
}
function setup() {
WINDOW_HEIGHT = 600;
WINDOW_WIDTH = 600;
window.canvas = createCanvas(WINDOW_HEIGHT, WINDOW_WIDTH);
rectMode(CENTER);
car = new Car(width / 2, 500, -Math.PI / 2 + Math.PI / 2);
console.log("Car Created");
var flagger = false;
}
function draw() {
// background(100);
car.show();
car.move();
// console.log("X: ", car.x);
// console.log("Y: ", car.y)
console.log("X: ", mouseX)
console.log("Y: ", mouseY)
if (car.y < car.height / 2) {
car.y = car.height / 2;
}
if (car.x < car.height / 2) {
car.x = car.height / 2;
}
if (car.y > height - car.height / 2) {
car.y = height - car.height / 2;
}
if (car.x > width - car.height / 2) {
car.x = width - car.height / 2;
}
controls();
if (mouseIsPressed === true) {
line(
mouseX - car.x,
mouseY - car.y,
pmouseX - car.x,
pmouseY - car.y
);
}
// console.log("Velocity: ", car.velocity);
// console.log("Acceleration: ", car.accel);
}
function controls() {
if (keyIsDown(UP_ARROW)) {
car.velocity += -1;
flagger = false;
}
if (keyIsDown(DOWN_ARROW)) {
car.velocity += 1;
flagger = false;
}
if (keyIsDown(RIGHT_ARROW)) {
car.angle += 0.1;
}
if (keyIsDown(LEFT_ARROW)) {
car.angle -= 0.1;
}
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Car Game</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다