was ist hier falsch gelaufen?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rocket vs Aliens</title>
<style>
canvas {
background-color: gray;
}
</style>
<script>
let KEY_SPACE = false;
let KEY_UP = false;
let KEY_DOWN = false;
let canvas;
let ctx;
let backgroundImage = new Image();
let rocket = {
x: 100,
y: 200,
width: 200,
height: 80,
src: 'img/rocket.png'
};
let spaceship = {
x: 500,
y: 200,
width: 100,
height: 40,
src: 'img/spaceship.png'
};
document.onkeydown = function(e) {
if (e.keyCode ==32) { // Leertaste gedrückt
KEY_SPACE = true;
}
if (e.keyCode ==32) { // unten gedrückt
KEY_SPACE = true;
}
if (e.keyCode ==38) { // Oben gedrückt
KEY_UP = true;
}
}
document.onkeyup = function(e) {
if (e.keyCode ==32) { // Leertaste losgelassen
KEY_SPACE = false;
}
if (e.keyCode ==38) { // oben losgelassen
KEY_UP = false;
}
if (e.keyCode ==40) { // unten losgelassen
KEY_DOWN = false;
}
}
function startGame () {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
loadImages();
draw();
// calculate
}
function loadImages() {
backgroundImage.src = 'img/background.png';
rocket.img = new Image();
rocket.img.src = rocket.src;
spaceship.img = new Image();
spaceship.img.src = spaceship.src;
}
function draw() {
ctx.drawImage(backgroundImage, 0, 0);
ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
requestAnimationFrame(draw);
}
</script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>
1 Antwort
Deine Rakete wird nicht dargestellt, da du hier einen Tippfehler hast:
Original: ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
Korrektur: ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height);
Prüf mal ob das Bild für den Hintergrund vorhanden ist. Und der Dateiname stimmt.
Ja. Es ist vorhanden und der Dateiname stimmt, wenn du damit gemeint hast, ob es richtig geschrieben ist.
Wenn die Erweiterung nicht stimmt oder das Bild im falschen Ordner liegt bekomm ich die meldung auch. Habe deinen Code 1:1 kopiert und hatte den Fehler am Anfang auch.
okay
wie genau fixe ich den Fehler jetzt? Bin noch ganz neu im Programmieren, sry wegen den vielen Fragen haha
Schau dir nochmal die Datei background.png an. Liegt die wirklich im Ordner img, ist die Datei auch komplett klein geschrieben. für den fall das du das mit Linux und nicht mit Windows testest. Ist das Bild auch wirklich eine PNG und nicht eine JPG mit falschem Namen. Das müsste meiner Meinung nach geprüft werden.
Oh.
Das war ursprünglich eine JPG.
Soll ich dann einfach alles zu jpg umändern, und das Bild wieder zu JPG machen?
Ich habs nämlich zu JPG umgeändert und es geht immernoch nicht.
backgroundImage.src = 'img/background.png';
ist jetzt
backgroundImage.src = 'img/background.jpg';
das bild ist auch nach JPG benannt
Schau mal unter https://gutefragetest.wsadm.de/ habe dir da auch den Quellcode verlinkt.
danke.
Leider hat sich nichts verändert
Laut Browser ist in der Zeile
ein Fehler
Uncaught DOMException: CanvasRenderingContext2D.drawImage: Passed-in image is "broken"