Menu
I'm trying to figure out how to make a track for this car game I'm working on. The current issue is that when I'm drawing the track, the coordinates of the drawing get transformed relative to the coordinates of the car. Sorry, it's kind of hard to explain, but if you look at the code below you'll see what I mean. Then there's the issue of making all of the drawings stay on the newest frame, but that's an issue for another day. (Please ignore the trail the car leaves, that will be fixed once I figure out how to ensure the drawings get redrawn on the newest frame. I really am kind of confused with this JS, so any and all help is appreciated!
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>
407
Use push() and pop() to store and restore the current style settings and transformations. This saves and restores the current matrix, too.
push() before the car is drawn (car.show()) and pop() after. That cause that the transformation in car.show() is applied to the car only:
function draw() {
background(100);
push();
car.show();
pop();
car.move();
// [...]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
