PONG Tutorial for Coder Dojo Munich

A little Tutorial for the CoderDojoMunich Kids. You can find the whole game at http://codepen.io/netzzwerg/full/mpAnx/

Transcript

1. PONG
2. HTML CSS JavaScript Seiteninhalt und Struktur Überschrift, Paragraphen, Bilder, ... Gestaltung Farben, Schriftart, Abstände, ... Logik / Programmierung Animationen, Benutzereingaben, ...
3. 0 / 0 800 / 600 STAGE BALL PADDLE
4. 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();
5. // 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);
6. X > BREITE 0 / 0 800 / 600 801 > 800 X + RADIUS > BREITE 791 + 10 > 800
7. X Y X - RADIUS < 0 X + RADIUS > BREITE Y + RADIUS > HÖHE Y - RADIUS > 0
8. 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
9. 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; } }
10. animation starten
11. function tick() { stage.render(); } window.setInterval(tick, 1000 / 60); stage.start();
12. codepen.io/netzzwerg