[Løst] canvas spillprogrammering - hvorfor beveger ikke bilen min seg?

poande05 · 23. november 2011

Håper det er noen som kan hjelpe meg. Vet at kodesnutten er lang, men se nederst for inngangen til scriptet, document ready fra jquery. Det som skal skje er at en bil (som tegnes helt fint, men er statisk på bildet) beveger seg nedover og forsvinner. Har prøvd å være så ryddig som mulig i koden, men forstår ikke hvorfor jeg ikke klarer få til å bevege bilen. Jeg er temmelig ny i javascript.

//Objektorientert JavaScript
//Per-Øivin Berg Andersen
var HEIGHT = $("#canvas").height();
var world;
var context2d;
//constructor for Car object
function Car(imageURL, maxSpeed, acceleration, brakeSpeed, speed, posX, posY) {
this.imageURL = imageURL;
this.maxSpeed = maxSpeed;
this.acceleration = acceleration;
this.brakeSpeed = brakeSpeed;
this.speed = speed;
this.posX = posX;
this.posY = posY;

this.spinning = false;

this.drawCar = function() {
	var image = new Image();
	image.posX = this.posX;
	image.posY = this.posY;
	image.onload = function() {
		context2d.drawImage(image, image.posX,image.posY);
	}
	image.src = imageURL;
}

this.accelerate = function () {
	if(speed < maxSpeed) {
		speed = speed + acceleration;
	}
}

this.spin = function() {
	spinning = true;
	var worker = new Worker("carSpinWorker.js");
	worker.onMessage = function() {
		spinning = false;
	}
}

this.moveDown = function() {
	this.posY = this.posY - 0.1;
}

this.brake = function() {
	speed = speed - brakeSpeed;
}
}

function World() {
this.background = "back.jpg";
this.roadBoundTop = 87;
this.roadBoundBottom = 326;
this.car = new Car("car.png", 180, 0.1, 1, 0, 20, 20);

	this.drawBackground = function() {
	var back = new Image();
	back.src = this.background;
	back.onload = function() {
		var pattern = context2d.createPattern(back, "repeat");
		context2d.fillStyle = pattern;
		context2d.fillRect(0,0, 600, 400);
	};
}

this.draw = function() {
	this.drawBackground();
	this.car.drawCar();
}


}

function Obstacle(image, spin, locationX, locationY) {
this.image = image;
this.spin = spin;
this.locationX = locationX;
this.locationY = locationY;
}

function gameCycle() {
draw();
world.car.moveDown();
}
function draw() {
context2d.clearRect(0, 0, 600, 400);
world.draw();
world.car.drawCar();

}

$(document).ready(function() {
context2d = $("#canvas")[0].getContext("2d");
world = new World();
var timed = setTimeout("gameCycle()", 10);
});

forresten her er html filen så det skal være lettere å debugge:

<!DOCTYPE html>
<html>
<head>
	<title>Objektorientert Javascript</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script src="objekter.js"></script>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>

Endret 23. november 2011 av poande05

poande05 · 23. november 2011

Håper det er noen som kan hjelpe meg. Vet at kodesnutten er lang, men se nederst for inngangen til scriptet, document ready fra jquery. Det som skal skje er at en bil (som tegnes helt fint, men er statisk på bildet) beveger seg nedover og forsvinner. Har prøvd å være så ryddig som mulig i koden, men forstår ikke hvorfor jeg ikke klarer få til å bevege bilen. Jeg er temmelig ny i javascript.

//Objektorientert JavaScript
//Per-Øivin Berg Andersen
var HEIGHT = $("#canvas").height();
var world;
var context2d;
//constructor for Car object
function Car(imageURL, maxSpeed, acceleration, brakeSpeed, speed, posX, posY) {
this.imageURL = imageURL;
this.maxSpeed = maxSpeed;
this.acceleration = acceleration;
this.brakeSpeed = brakeSpeed;
this.speed = speed;
this.posX = posX;
this.posY = posY;

this.spinning = false;

this.drawCar = function() {
	var image = new Image();
	image.posX = this.posX;
	image.posY = this.posY;
	image.onload = function() {
		context2d.drawImage(image, image.posX,image.posY);
	}
	image.src = imageURL;
}

this.accelerate = function () {
	if(speed < maxSpeed) {
		speed = speed + acceleration;
	}
}

this.spin = function() {
	spinning = true;
	var worker = new Worker("carSpinWorker.js");
	worker.onMessage = function() {
		spinning = false;
	}
}

this.moveDown = function() {
	this.posY = this.posY - 0.1;
}

this.brake = function() {
	speed = speed - brakeSpeed;
}
}

function World() {
this.background = "back.jpg";
this.roadBoundTop = 87;
this.roadBoundBottom = 326;
this.car = new Car("car.png", 180, 0.1, 1, 0, 20, 20);

	this.drawBackground = function() {
	var back = new Image();
	back.src = this.background;
	back.onload = function() {
		var pattern = context2d.createPattern(back, "repeat");
		context2d.fillStyle = pattern;
		context2d.fillRect(0,0, 600, 400);
	};
}

this.draw = function() {
	this.drawBackground();
	this.car.drawCar();
}


}

function Obstacle(image, spin, locationX, locationY) {
this.image = image;
this.spin = spin;
this.locationX = locationX;
this.locationY = locationY;
}

function gameCycle() {
draw();
world.car.moveDown();
}
function draw() {
context2d.clearRect(0, 0, 600, 400);
world.draw();
world.car.drawCar();

}

$(document).ready(function() {
context2d = $("#canvas")[0].getContext("2d");
world = new World();
var timed = setTimeout("gameCycle()", 10);
});

forresten her er html filen så det skal være lettere å debugge:

<!DOCTYPE html>
<html>
<head>
	<title>Objektorientert Javascript</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script src="objekter.js"></script>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>

Fant ut av det. Svaret lå i å legge setTimeout i gameCycle og kalle gameCycle i document load.

Logg inn

[Løst] canvas spillprogrammering - hvorfor beveger ikke bilen min seg?

Anbefalte innlegg

poande05

Lenke til kommentar

Videoannonse

poande05

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Elbil-tråden 1 2 3 4 1012

Hvem er aktive 0 medlemmer