Aufgabenserie 05

In dieser Aufgabenserie lernst du, wie du Bilder laden und in deinem Programm verwenden kannst.

Weitere Informationen dazu findest du unter: image

Du wirst für die Aufgaben die folgenden Bilder brauchen (klicke jeweils auf das Bild, um es herunter zu laden):

Aufgabe 01

Kommentare

• Lade das Bild arrow_left.png in der Funktion function preload() {...} und platziere es in der Mitte der Zeichenfläche.
• Setze die Grösse des Bildes auf 100 Pixel x 100 Pixel.

let pfeil_links;

function preload() {
  pfeil_links = loadImage('bilder/arrow_left.png');
}
  
function setup() {
  createCanvas(400, 400);
  background(100);
}

function draw() {
  background(100);
  imageMode(CENTER);
  image(pfeil_links, width/2, height/2, 100, 100);
}

Aufgabe 02

Kommentare

• Lade alle 4 Pfeile in function preload() {...}.
• Platziere die Pfeile wie im Beispiel, jeweils 100 Pixel ausserhalb der Bildmitte.

let pfeil_links;
let pfeil_rechts;
let pfeil_oben;
let pfeil_unten;

function preload() {
  pfeil_links = loadImage('bilder/arrow_left.png');
  pfeil_rechts = loadImage('bilder/arrow_right.png');
  pfeil_oben = loadImage('bilder/arrow_up.png');
  pfeil_unten = loadImage('bilder/arrow_down.png');
}

function setup() {
  createCanvas(400, 400);
  background(100);
}

function draw() {
  background(100);

  imageMode(CENTER);
  image(pfeil_links, width/2 - 100, height/2, 100, 100);
  image(pfeil_rechts, width/2 + 100, height/2, 100, 100);
  image(pfeil_oben, width/2, height/2 - 100, 100, 100);
  image(pfeil_unten, width/2, height/2 + 100, 100, 100);
}

Aufgabe 03

Bewege den Pfeil mit den Pfeiltasten unten rechts auf der Tastatur!

Kommentare

• Wenn du nicht mehr weisst, wie du die Tastatur zum Steuern einsetzen kannst, findest du unter folgendem Link die nötigen Informationen: Steuern mit der Tastatur 2
• Verwende eine Variable, in welcher du speicherst, in welche Richtung der Pfeil sich bewegt:
  Zum Beispiel: let direction = 'links'
• Wenn du die Taste nach oben drückst, muss die Variable für die Richtung entsprechend geändert werden:
  Zum Beispiel: direction = 'oben'
• Wichtig: Du musst die Richtung in Anführungszeichen ('' oder "") schreiben!
• In einem if-Statement kannst du nun überprüfen, in welche Richtung der Pfeil schauen sollte und das entsprechende Bild darstellen:
  

  
  if(direction == 'links'){
    image(pfeil_links, x, y, 100, 100);
  }
        

let x = 200;
let y = 200;

let pfeil_links;
let pfeil_rechts;
let pfeil_oben;
let pfeil_unten;

let direction = 'links';

function preload() {
  pfeil_links = loadImage('bilder/arrow_left.png');
  pfeil_rechts = loadImage('bilder/arrow_right.png');
  pfeil_unten = loadImage('bilder/arrow_down.png');
  pfeil_oben = loadImage('bilder/arrow_up.png');
}
  
function setup() {
  createCanvas(400, 400);
  background(100);
}
  
function draw() {
  background(100);
  if (keyIsDown(LEFT_ARROW)) {
    x = x - 4;
    // wenn die linke Pfeiltaste gedrückt wird, wird die Richtung auf 'links' gesetzt
    direction = 'links';
  }
  if (keyIsDown(RIGHT_ARROW)) {
    x = x + 4;
    // wenn die rechte Pfeiltaste gedrückt wird, wird die Richtung auf 'rechts' gesetzt
    direction = 'rechts';
  }
  if (keyIsDown(UP_ARROW)) {
    y = y - 4;
    // wenn die obere Pfeiltaste gedrückt wird, wird die Richtung auf 'oben' gesetzt
    direction = 'oben';
  }
  if (keyIsDown(DOWN_ARROW)) {
    y = y + 4;
    // wenn die untere Pfeiltaste gedrückt wird, wird die Richtung auf 'unten' gesetzt
    direction = 'unten';
  }
  
  // d ist die Grösse des Bildes
  let d = 100;
  imageMode(CENTER);
  if(direction == 'links') {
    image(pfeil_links, x, y, d, d);
  }
  else if(direction == 'rechts') {
    image(pfeil_rechts, x, y, d, d);
  }
  else if(direction == 'oben') {
    image(pfeil_oben, x, y, d, d);
  }
  else if(direction == 'unten') {
    image(pfeil_unten, x, y, d, d);
  }
}

Aufgabe 04

Mit Hintergrund!

Kommentare

• Füge einen Hintergrund hinzu, indem du statt mit background(...) mit image(...) ein Bild als Hintergrund zeichnest!

let x = 200;
let y = 200;

let pfeil_links;
let pfeil_rechts;
let pfeil_oben;
let pfeil_unten;
let hintergrund;

let direction = 'links';

function preload() {
  pfeil_links = loadImage('bilder/arrow_left.png');
  pfeil_rechts = loadImage('bilder/arrow_right.png');
  pfeil_unten = loadImage('bilder/arrow_down.png');
  pfeil_oben = loadImage('bilder/arrow_up.png');
  hintergrund = loadImage('bilder/hintergrund.jpg');
}
  
function setup() {
  createCanvas(400, 400);
  background(100);
}
  
function draw() {
  // hier wird der Hintergrund gezeichnet
  image(hintergrund, width/2, height/2, width, height);
  
  if (keyIsDown(LEFT_ARROW)) {
    x = x - 4;
    // wenn die linke Pfeiltaste gedrückt wird, wird die Richtung auf 'links' gesetzt
    direction = 'links';
  }
  if (keyIsDown(RIGHT_ARROW)) {
    x = x + 4;
    // wenn die rechte Pfeiltaste gedrückt wird, wird die Richtung auf 'rechts' gesetzt
    direction = 'rechts';
  }
  if (keyIsDown(UP_ARROW)) {
    y = y - 4;
    // wenn die obere Pfeiltaste gedrückt wird, wird die Richtung auf 'oben' gesetzt
    direction = 'oben';
  }
  if (keyIsDown(DOWN_ARROW)) {
    y = y + 4;
    // wenn die untere Pfeiltaste gedrückt wird, wird die Richtung auf 'unten' gesetzt
    direction = 'unten';
  }
  
  // d ist die Grösse des Bildes
  let d = 100;
  imageMode(CENTER);
  if(direction == 'links') {
    image(pfeil_links, x, y, d, d);
  }
  else if(direction == 'rechts') {
    image(pfeil_rechts, x, y, d, d);
  }
  else if(direction == 'oben') {
    image(pfeil_oben, x, y, d, d);
  }
  else if(direction == 'unten') {
    image(pfeil_unten, x, y, d, d);
  }
}