Aufgabenserie 04

In dieser Aufgabenserie lernst du, wie du mit der Tastatur ein Objekt bewegen kannst.

Hilfestellungen findest du unter:

• Steuern mit der Tastatur
• Steuern mit der Tastatur 2

Aufgabe 01

Drücke die Tasten g oder h oder j!

Kommentare

• Wenn die Taste g gedrückt wird, wird ein Kreis mit Durchmesser 50 in der Mitte des Zeichenfelds gezeichnet. Der Hintergrund hat die Graustufe 100.
• Wenn die Taste h gedrückt wird, wird ein Quadrat mit der Breite 150 in der Mitte des Zeichenfelds gezeichnet. Der Hintergrund hat die Farbe Rot. Verwende rectMode(CENTER), um den Referenzpunkt des Quadrates in die Mitte des Quadrates zu setzen.
• Wenn die Taste j gedrückt wird, wird ein Rechteck mit der Breite 300 und der Höhe 150 in der Mitte des Zeichenfelds gezeichnet. Der Hintergrund hat die Farbe Blau. Verwende rectMode(CENTER), um den Referenzpunkt des Rechtecks in die Mitte des Rechtecks zu setzen.

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

function draw() {
  // hier passiert nichts
}

function keyPressed() {
  if(key == 'g') {
    background(100);
    ellipse(width / 2, height / 2, 50, 50);
  }
  if(key == 'h') {
    background(255, 0, 0);
    rectMode(CENTER);
    rect(width / 2, height / 2, 150, 150);
  }
  if(key == 'j') {
    background(0, 0, 255);
    rectMode(CENTER);
    rect(width / 2, height / 2, 300, 150);
  }
}

Aufgabe 02

Drücke auf die Pfeiltasten nach oben und nach unten, um den Strich zu bewegen!

Kommentare

• Wenn du die Pfeiltaste nach oben drückst, bewegt sich der Strich nach oben. Wenn du die Pfeiltaste nach unten drückst, bewegt sich der Strich nach unten.
• Verwende die Funktion keyIsDown(UP_ARROW) und keyIsDown(DOWN_ARROW) in einem if(...).

let x = 350;
let y = 200;
let len = 100;

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

function draw() {
  background(100);
  if(keyIsDown(UP_ARROW)) {
    y = y - 4;
  }
  if(keyIsDown(DOWN_ARROW)) {
    y = y + 4;
  }
	
  stroke(255);
  strokeWeight(4);
  line(x, y, x, y + len);
}

Aufgabe 03

Bewege den linken Strich mit den Tasten w und s, den rechten Strich mit den Pfeiltasten!

Kommentare

• Die KeyCodes für w und s sind 87 und 83.
• Zum Beispiel: if(keyIsDown(87) {...}

// rechte Linie
let x = 350;
let y = 200;

// linke Linie
let x2 = 50;
let y2 = 200;

// Länge der Linien
let len = 100;

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

function draw() {
  background(100);

  // Steuerung der rechten Linie
  if(keyIsDown(UP_ARROW)) {
    y = y - 4;
  }
  if(keyIsDown(DOWN_ARROW)) {
    y = y + 4;
  }
  
  // Steuerung der linken Linie
  if(keyIsDown(87)) {
    y2 = y2 - 4;
  }
  if(keyIsDown(83)) {
    y2 = y2 + 4;
  }
	
  stroke(255);
  strokeWeight(4);
  line(x, y, x, y + len);      // rechte Linie
  line(x2, y2, x2, y2 + len);  // linke Linie
}