Slide 1

Slide 1 text

PONG

Slide 2

Slide 2 text

HTML CSS JavaScript Seiteninhalt und Struktur Überschrift, Paragraphen, Bilder, ... Gestaltung Farben, Schriftart, Abstände, ... Logik / Programmierung Animationen, Benutzereingaben, ...

Slide 3

Slide 3 text

0 / 0 800 / 600 STAGE BALL PADDLE

Slide 4

Slide 4 text

Variable Funktion Objekt speichert Werte Befehle die beliebig oft aufgerufen werden können. Eine Sammlung von Eigenschaften und Funktionen. Auto, Hund, Mensch Methode Funktionen von Objekten. var lieblingsFarbe = „grün“; function machHausaufgaben() { ... } var Auto = {}; Auto.beschleunigen(); Auto.bremsen();

Slide 5

Slide 5 text

// Spielfläche erstellen var canvas = document.getElementById('myCanvas'); var stage = new Game.Stage(); stage.init(800, 600, "black", canvas); // Ball hinzufügen var ball = new Game.Ball(); ball.init(400, 300, 20, 'white'); stage.add(ball);

Slide 6

Slide 6 text

X > BREITE 0 / 0 800 / 600 801 > 800 X + RADIUS > BREITE 791 + 10 > 800

Slide 7

Slide 7 text

X Y X - RADIUS < 0 X + RADIUS > BREITE Y + RADIUS > HÖHE Y - RADIUS > 0

Slide 8

Slide 8 text

wenn X - RADIUS < 0 dann links abgeprallt oder wenn X + RADIUS > BREITE dann rechts abegprallt wenn Y - RADIUS > 0 dann oben abgeprallt oder wenn Y + RADIUS < HÖHE dann unten abegprallt

Slide 9

Slide 9 text

function wallHitTest(stage, ball) { if (ball.x - ball.radius < 0) { ball.x = ball.radius; ball.vx = ball.vx * -1; } else if (ball.x + ball.radius > stage.width) { ball.x = stage.width - ball.radius; ball.vx = ball.vx * -1; } if (ball.y + ball.radius > stage.height) { ball.y = stage.height - ball.radius; ball.vy = ball.vy * -1; } else if (ball.y - ball.radius < 0) { ball.y = ball.radius; ball.vy = ball.vy * -1; } }

Slide 10

Slide 10 text

animation starten

Slide 11

Slide 11 text

function tick() { stage.render(); } window.setInterval(tick, 1000 / 60); stage.start();

Slide 12

Slide 12 text

codepen.io/netzzwerg