Durchsuche Foren

(Erweiterte Suche)

Foren-Statistiken
» Mitglieder: 43.382
» Neuestes Mitglied: gustucelmogufum
» Foren-Themen: 503
» Foren-Beiträge: 2.086

Komplettstatistiken

Benutzer Online
Momentan sind 115 Benutzer online
» 0 Mitglieder
» 114 Gäste
Bing

Aktive Themen
Verbindung von Entscheidu...
Forum: Javascript
Letzter Beitrag: Ashriel
16.04.2024, 11:02
» Antworten: 3
» Ansichten: 73
Neu laden ohne Scrolling
Forum: Javascript
Letzter Beitrag: Tom
16.04.2024, 08:48
» Antworten: 0
» Ansichten: 14
Formularfelder addieren u...
Forum: Javascript
Letzter Beitrag: heena123
16.04.2024, 08:03
» Antworten: 17
» Ansichten: 338
FMOVIES
Forum: Javascript
Letzter Beitrag: xomanig690
16.04.2024, 07:07
» Antworten: 0
» Ansichten: 18
Spam gelöscht
Forum: Ankündigungen,Neuigkeiten
Letzter Beitrag: rzscout
10.04.2024, 23:37
» Antworten: 0
» Ansichten: 144
Reihenfolge der Karten
Forum: Brauche Javascript / Userscript
Letzter Beitrag: hardee
10.04.2024, 17:54
» Antworten: 4
» Ansichten: 83
Variable aus Funktion zur...
Forum: Javascript
Letzter Beitrag: Kai_Behncke
27.03.2024, 14:58
» Antworten: 2
» Ansichten: 114
Probleme mit Canvas
Forum: Javascript
Letzter Beitrag: Sempervivum
27.03.2024, 09:28
» Antworten: 5
» Ansichten: 240
Bildauswahl Reset
Forum: Javascript
Letzter Beitrag: Sempervivum
25.03.2024, 05:38
» Antworten: 6
» Ansichten: 238
HTML Tabelle filtern + Na...
Forum: Javascript
Letzter Beitrag: Sempervivum
24.03.2024, 17:31
» Antworten: 1
» Ansichten: 139

  Button "onclick" Fehler
Geschrieben von: Daniel - 27.11.2022, 20:34 - Forum: Javascript - Antworten (3)

Liebe Community, 

mit großem Interesse verfolge ich einen JS Kurs und bin voller Elan dabei.
Beim Modul mit den Klassen, habe ich nun versucht ein eigenes Beispiel zu bauen.
Leider kann ich die vorhandene Fehlermeldung nicht genau deuten.
Es wäre schön, wenn ihr mal drüber schauen könntet.
Vielen lieben Dank für eure Hilfe.

Mein Übungsziel sollte sein:

  • eine eigene Klasse „Car.js“ erstellen und darin Daten speichern
  • aus einer anderen „main.js“ Datei, sollen dann diese Daten ausgelesen und ausgegeben werden. (hier reicht mir die Ausgabe per Konsole)
 Leider erhalte ich hier in Zeile 35 einen Fehler in der Konsole.

Uncaught ReferenceError: main is not defined at HTMLButtonElement.onclick ([u]index.html:35:33

Code index.html:
Code:
<!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">
    <script type="module" src="main.js" type="text/javascript"></script>
   
    <style>
        #car_field {
            margin: 10px;
           }
    </style>
    <title>Car-Rechner</title>

</head>
<body>
    <div>
        <div id="car_field">
            <label>Car Name</label><br>
            <input id="CarName" type="text">
         </div>
        <br>
        </div>
        <div id="car_field">
            <label>Car Age</label><br>
            <input id="CarAge " type="number">
        </div>
        <br>
        <div id="car_field">
            <label>Car color</label><br>
            <input id="CarColor" type="text">
        </div>

       <button onclick="main()">Ok</button>



    </div>
</body>
</html>

Code car.js:
Code:
export class Car {

    constructor(CarName, CarAge, CarColor){

        this.CarName = CarName;
        this.CarAge = CarAge;
        this.CarColor = CarColor;

}
};

Code main.js:
Code:
import {Car} from "./car.js"


function main() {   

    var inputCarName = document.getElementById("CarName").value;   

    var inputCarAge = document.getElementById("CarAge").value;

    var inputCarColor = document.getElementById("CarColor").value;

    var car = new Car(inputCarName,inputCarAge,inputCarColor);
    var car2 = new Car(inputCarName,inputCarAge,inputCarColor);




    console.log(car);
    console.log(car2);

    }

Drucke diesen Beitrag

  Preis Tabellen
Geschrieben von: tebn - 24.11.2022, 19:14 - Forum: Javascript - Antworten (3)

Hallo,

ich habe für meine Website eine Tabelle über Preise und Leistungen erstellt. Jetzt möchte ich mir den gesamtpreis mit JavaScript ausrechnen lassen  wenn die jeweilige Leistung durch eine Checkbox angeklickt wurde.

Bsp:

Motor 50€          "checkbox"
Getriebe 10€       "checkbox"
Glass 5€             "checkbox"
Tasche 10€         "checkbox"

Jetzt soll man durch Checkboxen zum Beispiel nur Motor und Glass anklicken können und der Preis von 55€ soll im einen Feld erscheinen.

Ich habe schon geschafft das JavaScript die zahlen ausliest, jedoch fehlt mir der Ansatz für die Funktion mit der Verlinkung zu den einzelnen checkboxen.
Kann mir jemand weiterhelfen ?



Angehängte Dateien
.js   rechnung.js (Größe: 430 Bytes / Downloads: 2)
.html   preise.html (Größe: 1,98 KB / Downloads: 2)
Drucke diesen Beitrag

  Zugriff auf andere Methode über EventListener
Geschrieben von: papender - 24.11.2022, 18:38 - Forum: Javascript - Antworten (1)

Hallo,

ich habe eine Frage. Ja klar, warum bin ich auch hier Smile


Code:
document.addEventListener('DOMContentLoaded', function () {
    
    class TestClass {
        constructor() {
            this.button = document.createElement('button');
        }
        
        methode1() {
            console.log('Hello World');
        }
        
        methode2() {
            this.button.addEventListener('click', function() {
                this.methode1();
            });
        }
        
        getButton() {
            return this.button;
        }
    }
    let tClass = new TestClass();
    tClass.methode2();
    let body = document.getElementsByTagName('body');
    body[0].appendChild(tClass.getButton());
    
});

Ich versuche mich gerade in die OOP mit JavaScript reinzudenken.
Ich möchte verschiedene Buttons mit unterschiedlichen Funktionen instanziieren. Wie bekomme ich es hin, dass ich durch den EventListener auf die Methode1 zugreifen kann. Ist das überhaupt ein denkbarer Weg?
Das ist erst einmal nur eine Testklasse zum ausprobieren.

Danke für eure Rückmeldungen.

Drucke diesen Beitrag

  Aktive Checkbox, andere Checkbox nicht mehr required
Geschrieben von: Crynos - 24.11.2022, 09:09 - Forum: Javascript - Antworten (2)

Hi ihr Lieben,

folgendes Thema:

Ich habe zwei Checkboxen in einem Formular. 
Die erste Checkbox ist kein Pflichtfeld
Die zweite Checkbox ist ein Pflichtfeld.
Wird allerdings die erste Checkbox angehakt, soll die zweite Chebock verschwinden und auch nicht mehr required sein, damit das Formular abgeschickt werden kann.

Dass die zweite Checkbox ausgeblendet wird, wenn die erste ausgewählt wurde hab ich hinbekommen. Aber ich checks, trotz der ganzen Anleitungen im Netz, noch nicht, wie aus der zweite Checkbox dann aus einem Pflichtfeld kein Pflichtfeld mehr wird.

Vielleicht suche ich auch einfach nicht nach den richtigen Schlagwörtern.


Reicht euch das als Infos um mir weiterhelfen zu können? Smile Besten Dank!

Drucke diesen Beitrag

  Neu im Javascript Umfeld
Geschrieben von: Crynos - 24.11.2022, 08:58 - Forum: Seid ihr neu ? - Antworten (1)

Hi Smile
beruflich muss und möchte ich mich mehr mit Javascript befassen. Ich muss sagen, dass ich echt blutiger Anfänger bin. Manche Sachen kann ich mir ausm Netz "zusammenklicken" aber es scheitert oft schon an banalen Dingen. Wie ihr an anderer Stelle des Forums lesen könnt Big Grin

Ich werde sicher öfter hier auftauchen und hoffentlich mit der Zeit auch mal sinnvolle Antworten liefern können, anstatt nur Infos zu ziehen.

Soviel erstmal. Danke schonmal für die Hilfe Wink

Drucke diesen Beitrag

  Daten an eine andere Site senden und danach diese Seite besuchen.
Geschrieben von: T.Billen - 24.11.2022, 08:44 - Forum: Javascript - Antworten (2)

Hallo zusammen,

ich möchte gerne per AJAX Request Daten versenden und diese Seite aufrufen (Selbstverständlich sollen die gesendeten Daten dann verarbeitet worden sein).

Als Vorlage habe ich folgendes HTML Script:

Code:
<HTML>
<BODY onload="document.form1.submit()">
<FORM name="form1"
      ACTION="./backend/test.php"
      CONTENT="application/x-www-form-urlencoded"
      METHOD="POST"
      enctype="multipart/form-data">

    <input type=hidden name="field_1" value="value_1">
    <input type=hidden name="field_2" value="value_2">
    <input type=hidden name="field_3" value="value_3">
</FORM>
</BODY>
</HTML>


Als Ergbnis bekomme ich:
Code:
array(3) { ["field_1"]=> string(7) "value_1" ["field_2"]=> string(7) "value_2" ["field_3"]=> string(7) "value_3" }

test.php printet einfach nur den POST Request aus.

Dieses Ergbnis möchte ich gerne mit einem AJAX Request durchführen, da die Werte in field_1, field_2 und field_3 bekannt sind und nicht vom User verändert werden dürfen (Daher ist der Type auch hidden.).

Nach einer Google Recherche bin ich folgenden AJAX - Request gekommen:
Code:
const url = "./backend";

function open(id) {
    let destination = url + "/test.php";

    $.ajax({
        type: "POST",
        url: destination,
        dataType: "json",
        data: { field_1: "value_1", field_2: "value_2", field_3: "value_3" },
        complete:
            function (e) {
                   window.location = destination;
            }

    });
}
Würde ich mir e in der anonym Function bei complete ausgeben, bekomme ich das gewünschte Ergbnis. Allerdings wenn ich window.location = destination; ausführe, wird zwar die Seite aufgerufen, allerdings ohne, dass die Daten verarbeitet werden.

Könnt ihr mir einen Tipp geben, wie ich das in AJAX umsetzen kann? Da dieses Script unabhängig arbeiten soll, kommt das Nutzen von Sessions nicht in Frage. Daher ist diese Aufgabe nicht gleich eines Login Scripts.

Auch muss der User auf die neue Seite mit diesen Eingaben weitergeleitet werden.

Ich hoffe, dass ihr mir helfen könnt.

Viele Grüße aus dem Pott

T.Billen

Drucke diesen Beitrag

  Quiz mit speziellen Anforderungen
Geschrieben von: Fastel - 23.11.2022, 19:27 - Forum: Javascript - Antworten (1)

Hi, ich hoffe ich kann das Problem, das es zu lösen gilt einigermaßen verständlich machen. Kernfrage ist, ob man das Problem mit einem Switchcase lösen kann:

##################

Eine Aufgabe entspicht weitesgehend einem Quiz:

  • Es werden zwei Fragen gestellt, für die dann jeweils ein TextInput-Formular gegeben wird.
  • Jede Frage benötigt aber zwei Antworten (ebenfalls per Textfeld).
Also: => zwei Texteingabeformulare (1 und 2), bestehend aus jeweils zwei Eingabefeldern (a und b)

Das Script soll überprüfen ob der User die Fragen richtig beantwortet hat ( reicht erstmal als console.log als true/false).

Das wichtige ist aber, dass die Reihenfolge der Antworten egal ist. Es gibt also so gesehen keine Frage 1.) die einem bestimmten Formular zugeordnet ist, sondern der User kann jede Frage in jedem Formular beantworten. Die Frage MUSS aber „in sich“ zusammen passen.

Beispiel:
Eine Frage: „Nenne ein bellendes Tier und wieviel Beine hat es?“
Eine andere Frage: „Nenne erst eine rote und dann eine blaue Farbe“
=> der User hat zwei gleiche Eingabeformulare und kann sich aussuchen, wo er welche Frage beantwortet.

Die richtigen, gesuchten Antworten („Hund“ und „4“ sowie „rot“ und „blau“) werden als Variablen definiert.

Hund kann sowohl in Formular 1 als auch 2 eingetragen werden, allerdings immer nur als erste Antwort (a) innerhalb des Formulars.
Antwort (b) muss dann = 4 sein.


Oh man... verständlich?


Ich wollte das gerne mit einem Switchcase lösen: im Fall dass der
  • Input (a) = „Hund“ kommt ist, nur der Input (b) „4“ richtig
  • Input (a) = "rot" bedeutet in (b) ist "blau" richtig.
Wenn weder Hund noch rot eingegeben wird, kann ein default anspringen (der (a) und (b) = false ergibt).
Es muss zwangsläufig Hund oder rot in die Felder (a) eingetragen werden. Nur ein Feld (b) ausfüllen macht dann keinen Sinn später. Der Input in Textfeld (a) definiert also, welche weiteren Antworten als richtig gelten. Puuh...

Ich möchte gerne beide Formulare mit einem(!) onclickevent auswerten.



Ich habe es mal im Code probiert, vielleicht habt ihr da eine Idee und könnt es ggf gleich mal reinschreiben, dann kann ich es mir angucken.

ps: ich bin noch (blutiger?) Anfänger und Kämpfe mich durch Tutorials
pps: ja vor allem zeile 40 halt...
ppps: In If/Else-Möglichkeiten habe ich mich noch nicht reingedacht und etwas Angst vor zu vielen Verschachtelungen. Später werden es pro Aufgabe 5 Fragen mit 4 Antwortteilen (also 5x4 fest definierten Antworten pro Aufgabe). Daher hoff(t)e ich auf eine elegante Switchcase-Lösung.



Code:
<!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>Document</title>
</head>

<body>
<!--Formular 1-->
<input type="text" id="input1_a"><br>
<input type="text" id="input1_b"><br>
<br><br>
<!--Formular 2-->
<input type="text" id="input2_a"><br>
<input type="text" id="input2_b"><br><br>

<!--beide Resultate sollen mit einem(!) Button kommen-->
<button onclick="submitFunction()">Submit</button>

    <script> //hier werden die Lösungen definiert und in Variablen gespeichertn
        function submitFunction() {
            var lösung1_a = "Hund";
            var lösung1_b = "4"

            var lösung2_a = "rot"
            var lösung2_b = "blau"
            // die Lösung 1_a und 1_b dürfen auch im Input 2_a und 2_b eigetragen werden.


            //Submits (userinput) als Variablen festhalten
            var submit1_a = document.getElementById("input1_a").value;
            var submit1_b = document.getElementById("input1_b").value;

            var submit2_a = document.getElementById("input2_a").value;
            var submit2_b = document.getElementById("input2_b").value;

/*!=>*/     switch ( **??**??** ) {
                //Wenn der input1_a = lösung1_a ist, dann wird überprüft, ob input1_b = Lösung 1_b
                case lösung1_a: console.log("Starte Version Hund mit 4 Beinen")

                    //variablen der Auswertung1(result) anlegen (Bools)
                    var result1_a = submit1_a == lösung1_a
                    var result1_b = submit1_b == lösung1_b
                    console.log("Ergebis Hund");
                    console.log(result1_a);
                    console.log(result1_b);
                    break;

                //Wenn der input1_a = lösung2_a ist, dann wird überprüft, ob input1_b = Lösung 2_b
                case lösung2_a: console.log("Starte Version Farbe")

                    // variablen der Auswertung2(result) anlegen
                    var result2_a = submit1_a == lösung2_a
                    var result2_b = submit1_b == lösung2_b
                    console.log("Ergebis Farbe");
                    console.log(result2_1);
                    console.log(result2_2);
                    break;
            }
        }
        // die Konsole sollte 4x true ausgeben wenn
        // - im ersten Formular Hund und 4 eingegeben wird und im zweiten rot und blau
        // oder
        // - im zweiten Formular Hund und 4 eingegeben wird und im ersten rot und blau
    </script>
</body>

</html>

Drucke diesen Beitrag

  PHP-DateTime in Javascript verwenden
Geschrieben von: Exorior - 23.11.2022, 12:12 - Forum: Javascript - Antworten (1)

Hallo zusammen, 

ich habe folgendes Problem:
- In PHP habe ich aus der Datenbank ein "DateTime" Wert für einen Countdown geladen
- Dieser Wert sieht so aus "2022-11-23 11:45:00" und existiert nun in meiner PHP Variable "$quiz_countdown"

 Nun habe ich in meinem Javascript-Bereich folgendes Skript:

Code:
<script>
    //Ende des Countdowns - Hier wird der Wert von PHP benötigt
    var countDownDate = <?php echo $quiz_countdown; ?>;

    //Funktion um das Skript jede Sekunde auszuführen
    var myfunc = setInterval(function() {
    var now = new Date().getTime();
    var timeleft = countDownDate - now;
       
    var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
       
    document.getElementById("timer").innerHTML = minutes + "m " + seconds + "s "
       
    }, 1000);
</script>


Mein Problem ist nun, dass Javascript mit meinem PHP DateTime Format nichts anfangen kann.
Ich benötige das folgende Format: "Nov 23, 2022 11:45:00"

Hat jemand eine Idee wie ich das umsetzen kann?
Ich bin langsam echt am verzweifeln :(

Vielen Dank schonmal

Hat sich erledigt.
Habe das Problem lösen können:

Ich konvertiere im Javascript das Format wie folgt um:
Code:
var countDownDatePHP = '<?php echo $quiz_countdown; ?>';
var countDownDate = new Date(countDownDatePHP.replace(/-/g,"/"));

Drucke diesen Beitrag

  Javascript, php, Hosting und Urheberrecht
Geschrieben von: Michael - 19.11.2022, 15:32 - Forum: Javascript - Antworten (1)

Hallo ihr lieben,
Ich bin beruflich kein Programmierer. Hab mir aber schon vor ein paar Jahren java selbst beigebracht und auch für die Arbeit in unserer abteilung so a paar kleinere nützliche Programme geschrieben. Jetzt hatte ich wieder ein bißchen Zeit und wollte was neues lernen. Deshalb hab ich mir mit zwei dicken Büchern html, css und javascript selbst beigebracht. Html und css ist finde ich einfach und javascript ähnelt vieles java. So dass ich das auch gut hinbekommen hab. Jetzt ist die Zeit für mich gekommen etwas zu erschaffen. Das gelernte anzuwenden... Ich hab auch schon eine Idee für eine Webseite.  Nicht grad die 1mio doller Idee, grins. Aber macht ja nix...

Aber ein paar Fragen tun sich da noch auf. Vielleicht könnt ihr mir da Tips geben. 

1. Hosting 
Auf was muss ich achten wenn ich eine Domain und hosting buche. Wie mach ich das? Schicke ich zu einem Anbieter einfach meine html, css und js Dateien und die machen das dann schon? Oder wie läuft das?
2. Impressum 
Muss ich unbedingt ein Impressum auf die Seite schreiben? Auch wenn ich kein Geld damit verdiene?
3. Urheberrecht 
Was ist alles Urheberrechtlich geschützt? Also ich mein es ist klar dass man keine Musik oder Filme auf die Seite packen sollte. Auch wenn jemand eine Kurzgeschichte oder buch geschrieben hat sollte man das wohl nicht klauen. Das ist denke ich klar. Aber was ist mit Bildern wenn ich bei einer Seite nichts von Urheberrecht sehe. Kann ich so ein Bild kopieren und icn mein Logo mit einbauen? Oder was ist z.b. mit allgemeinen sachen wie eine Schlagzeile von einem nachrichtensender? Oder darf ich das tv-programm von einem tv Sender einfach einfügen. Mit tv programm meine ich z.b. was läuft heute auf pro7 und sat1 zwischen 20:15 und 24 Uhr. Oder was ist mit Sachen aus Wikipedia. Darf man da etwas rauskopieren und verwenden? Oder mache ich mir da zu viele Gedanken? Nicht das mich dann noch jemand für mein Hobby verklagt... 
4. Php
Ich überlege auch noch php und sql zu lernen. Ist das schwieriger? Und was genau kann man damit alles noch machen? Kann mir jemand das verständlich erklären? 

Wenn mir jemand helfen kann wäre ich sehr dankbar.

Drucke diesen Beitrag

  Grafiken in Original- und Fenstergröße anzeigen
Geschrieben von: Prometheus - 18.11.2022, 23:27 - Forum: Javascript - Antworten (3)

Hallo zusammen,

ich habe mich jetzt angemeldet, weiß aber nicht ob es so einen Vorstellungsthread gibt, ich seh keinen?

Ich hab mich vorgestern endlich entschieden, dass ich es mit JS versuchen will (Alternative war z.B. Java)(schon sehr lange viel dazu gesehen und gelesen), und habe dann auch gleich mal VSC installiert und so ein Tutorial ausprobiert. Leider hat YouTube ein notorisches Problem mit mir, und ich habe aktuell das Problem, dass meine Kommentare nach wenigen Sekunden grundsätzlich verschwinden. Ich kann den Tutorial-Kanal daher nichts fragen.
Also versuche ich es mal hier.

Folgendes ist mein Problem, gewissermaßen ist es ein triviales Perfekionismusproblem, und das Tutorial geht nicht darauf ein.
Es soll ein kleiner SpaceShooter erstellt werden. Die Grafiken werden im Script als kleiner Container definiert:


Code:
let fighter = {
            x: 950,
            y: 850,
            width: 100,
            height: 100,
            src: 'img/ships/fighters/fighter_11.png'
width und height werden hier einfach mit einer festen Pixelgröße angegeben. Was ich gerne machen würde: width und height so definieren, dass sie einfach in originaler Auflösung angezeigt werden. Dasselbe versuchte ich so ähnlich mit dem Canvas bzw. Background: der soll sich einfach ans Fenster oder zumindest an den Bildschirm anpassen. Alle Befehle die ich versuchte, führen dazu, das die Spielfläche im Browser auf ein kleines Quadrat oder Rechteck schrumpft.

Ich versuchte schon alles mögliche, mit verschiedenen "Satzzeichen" (; , (); ... mit = oder : usw. auch ohne) nichts geht:

w/d = 100%
w/d = original.
w/d = natural.
w/d = device.
w/d = window.
w/d = screen.
w/d = real.....
w/d = inner.
w/d = outer.
w/d = browser.

usw. alle möglichen Kombinationen... Auch versuchte ich dies verschieden einzufügen, blockierte nichts, half aber auch nicht:
ctx.width  = window.innerWidth;
ctx.height = window.innerHeight;

usw. lange Liste. Finde ich die richtige Syntax nicht? Warum ist es nicht möglich, Width und Height als original zu definieren? Oder den Hintergrund auf Window oder Screengröße zu ziehen? Ich habe schon Stunden lang probiert und gesucht. Ich habe natürlich noch andere Idee von der Lösung. Vielleicht versteht der Cotainer nicht was ich will, weil das img ja dort nicht geladen wird? Dann wüsste ich aber auch nichts genaues mehr...

Ausserdem fand ich viele Code-Stücke, diverse Beiträge im Internet, die aber komplizierter sind, ich wüsste nicht wie ich die richtig implementiere.
Mir ist z.B. nicht klar, wie sich Funktionen zur Originalgröße auf die einzelnen Grafiken beziehen lassen.
Einfach sowas einzufügen dürfte nicht helfen:


Code:
<img src="yourImage.jpg" border="0" height="real_height" width="real_width"
    onload="resizeImg(this, 200, 100);">

<script type="text/javascript">
function resizeImg(img, height, width) {
    img.height = height;
    img.width = width;
}
</script>

Es gibt ja noch start, load and draw, ich denke dort muss das irgendwie mit rein? Es muss doch möglich sein, mit wenigen Befehlen die Originalabmessungen einzufügen... Kann mir jemand weiterhelfen?

Viele Grüße, Prometheus


EDIT:

Ich konnte meine Probleme über Nacht teilweise lösen, weil ich in einem anderen Tutorial mit etwas anderem Thema was aus dem Code abschauen konnte. Meine Lösung war, im style-Abschnitt Folgendes zu ergänzen:
Code:
body { overflow: hidden; }
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            border: 0;
            margin: 0;

padding und margin haben das Problem des Randes (fast) gelöst, border war mein Versuch, der nichts weiter verbesserte. Grund: Unten wird ein dicker Streifen vom Hintergrund abgeschnitten, das sieht man erst im Vollbild. Leider ga es auch einen weißen Streifen unten, bei Mausrad und Leertaste... es "wobbelte".
Das habe ich so fast komplett gedämpft:
Code:
window.onscroll = function () {window.scrollTo(0, 0);} 


Den kleinen weißen Spalt, der trotzdem unten aufblitzte, entfernte bzw. verdeckte ich mit +1 Pixel, ohne das eine Laufleiste verursacht wurde:
Code:
canvas.height = window.innerHeight +1;


Da die Leertaste später zum Abfeuern verwendet wird, war es ganz lustig, das der Hintergrund bei "erschüttert" wird. Habe es noch probiert mit schwarzem Hintergrund, das geht auch.

Leider tauchte aber auch mit Veränderung der Fenstergröße oder dem Vollbild eine tote Laufleiste auf. Ich fand dann noch das, jetzt bewegt sich nichts mehr, es gibt auch keine Laufleisten-Fehler mehr:
Code:
body { overflow: hidden; }

Nur im Vollbild ist unten nach wie vor ein weißer fetter Balken... Ausserdem gibts ein "Problem" bei den Fenstergrößen, mit der Anpassung. Egal. Ganz am Ende wäre das auch noch einen Versuch wert, ist erstmal nicht wichtig.


Was mich immer noch (akademisch) interessiert: Wie kann man Grafiken in Originalgröße laden bzw. anzeigen lassen?

Soweit erstmal. Danke fürs lesen schonmal. Smile


PS: Ich bin am WE vermutlich weg und antworte ggf. erst nächste Woche.

Drucke diesen Beitrag