Javascript-forum
Help - Anfängerfehler? - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Help - Anfängerfehler? (/showthread.php?tid=824)



Help - Anfängerfehler? - benhan - 09.06.2022

Hi, kann mir jemand helfen? Habe nach einem Tutorial mein erstes Game angefangen und irgendwas stimmt nicht mit den verknüpften Bildern. Im Untersuchen-Feld werden mir keine Fehler mehr angezeigt. Weiß jemand der Erfahreneren hier, woran das liegen kann? 
Danke schonmal Blush

Code:
<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Galaxy War</title>

<style>
    canvas {
      background-color: rgba(0, 0, 0, 0.8);
    }
</style>

<script>
let KEY_SPACE = false;// 32
let KEY_UP = false;// 38
let KEY_DOWN = false;// 40
let canvas;
let ctx;
let backgroundImage = new Image();

let rocket = {
    x: 100,
    y: 200,
    width: 200,
    height: 80,
    src: 'img/rocket.png'
}

let ufo = {
    x: 500,
    y: 200,
    width: 100,
    height: 40,
    src: 'img/ufo.png'
}




document.onkeydown = function(e) {
    if (e.keyCode == 32) // Leertaste gedrückt
    KEY_SPACE = true;


if (e.keyCode == 38) // Nach oben gedrückt
KEY_UP = true;


if (e.keyCode == 40) // Nach unten gedrückt
KEY_DOWN = true;
}

document.onkeyup = function(e) {
    console.log(e.keycode);
    if (e.keycode == 32) // Leertaste losgelassen
    KEY_SPACE = false;


if (e.keycode == 38) // Nach oben losgelassen
KEY_UP = false;


if (e.keycode == 40) // Nach unten losgelassen
KEY_DOWN = false;
}





function startGame(){
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');
    loadImages();
    update();
    draw();
    //.calculate


}

function loadImages(){
    backgroundImage.src = 'img/background.png';
    rocket.img = new Image();
    rocket.img.scr = rocket.scr;

    ufo.img = new Image();
    ufo.img.scr = ufo.scr;


}


function draw(){
    ctx.drawImage(backgroundImage, 0, 0);
    ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height);






    requestAnimationFrame(draw);
}
</script>

</head>

<body onload='startGame'()>
   <canvas id='canvas' width='720' height='480'></canvas>

</body>

</html>



RE: Help - Anfängerfehler? - admin - 11.06.2022

Was ist denn mit den Bildern?
Kannst du das mal online stellen , weil so kann man nicht sehen .
So müssten die Bilder in einen Ordner sein der img heißt


RE: Help - Anfängerfehler? - admin - 11.06.2022

außerdem hast du hier ein Hoch Kommer falsch gesetzt
<body onload='startGame'()>
und die Funktion update() gibt es in deinen Code nicht


RE: Help - Anfängerfehler? - benhan - 11.06.2022

Danke. Im Anhang die Screenshots von der Ordnerstruktur.

Und bei dem Hochkomma - was ist denn da falsch?  Huh


RE: Help - Anfängerfehler? - admin - 12.06.2022

Nicht so

Code:
<body onload='startGame'()>
sondern so
Code:
<body onload='startGame()'>
dann die Funktion update() löschen , wenn sie keine Funktion hat und dann sollte es laufen


RE: Help - Anfängerfehler? - benhan - 12.06.2022

Danke! Haben es so geändert, leider funzt es immer noch nicht. :-( Wir haben jetzt beschlossen, den Code einfach nochmal neu zu generieren. Neuer Versuch.


RE: Help - Anfängerfehler? - sockenbart - 21.02.2023

Hallo , 
hat man schon eine Lösung gefunden ? 

Bei mir kommt immer die Meldung : Uncaught TypeError: Cannot read properties of undefined (reading 'drawImage')

Der User und ich , machen dass selbe wie es aussieht . 

Würde mich über eine Antwort freuen .

Danke 

LG


RE: Help - Anfängerfehler? - rzscout - 22.02.2023

Hi,
wir benötigen die Dateien für das Zeichnen der Bilder. Aber es gibt ein paar Sachen die ich persöhnlich anders machen würde.