PONG programmieren - Spiele entwickeln mit JavaScript (Tutorial deutsch)

In diesem Tutorial lernst du, wie du das Spiel "PONG" programmierst. Selbst, wenn du jetzt noch ganz am Anfang bist und noch nie eine Zeile Code geschrieben hast.

Inhaltsverzeichnis:
00:00 | Intro
00:26 | Warum Pong?
00:41 | Setup
02:20 | Canvas
04:04 | Funktionen
05:11 | Draw-Funktion: Spieler und Ball
09:28 | Variablen - Ballbewegung
16:49 | Variablen - Spielerbewegung
20:31 | Spielregeln
28:11 | Outro

____ Links ____

____ Wichtiger Code ____

Partnerunternehmen bieten wir direkten und nachhaltigen Zugang zu unseren hochqualifizierten Absolventen.


_____ Über diesen Kanal ____
Die Developer Akademie bildet dich zum Programmierer weiter. Auch wenn du noch NIE eine Zeile Code geschrieben hast, ist es möglich in 3 - 9 Monaten einen bezahlten Job zu finden. Dafür musst du nicht nur programmieren lernen, sondern einen guten Lebenslauf mit vielen verschiedenen Projekten vorweisen. In unserem Programm hast du ständigen Kontakt zu unseren Coaches, Hausaufgaben, Abgabefristen und Projekte aus der Praxis.
Am Ende erstellen wir mit dir deinen Lebenslauf und unterstützen dich bei deiner Bewerbung.

[Adrealise]

Damit kann man gegen Computer spielen: <canvas id="ca" width="720" height="480" style="background-color: black;"></canvas>
<script>
let ctx = ca.getContext('2d');
let p1 = 80;
let p2 = 200;
let key = {};
let ball = {
x: 360,
y: 240,
speedX: 3,
speedY: 0
};
let aiSpeed = 2;

document.addEventListener('keydown', e => key[e.keyCode] = true);
document.addEventListener('keyup', e => key[e.keyCode] = false);
draw();
setInterval(loop, 1000 / 60);

function draw() {
ctx.fillStyle = 'grey';
ctx.fillRect(0, 0, 720, 480);
ctx.fillStyle = 'blue';
ctx.fillRect(10, p1, 10, 80);
ctx.fillRect(700, p2, 10, 80);
ctx.fillRect(ball.x, ball.y, 10, 10);
requestAnimationFrame(draw);
}

function loop() {
if (key[38]) {
p2 = Math.max(p2 - 5, 0);
}

if (key[40]) {
p2 = Math.min(p2 + 5, 400);
}

// Simple AI for player 1 (computer)
if (ball.speedX < 0) {
if (ball.y < p1 + 40) {
p1 = Math.max(p1 - aiSpeed, 0);
} else if (ball.y > p1 + 40) {
p1 = Math.min(p1 + aiSpeed, 400);
}
}

ball.x = ball.x + ball.speedX;
ball.y = ball.y + ball.speedY;

if (ball.x < 20 || ball.x > 690) {
if (ball.y > p1 && ball.y < p1 + 80 && ball.speedX < 0) {
ball.speedX = -ball.speedX;
ball.speedY = (ball.y - p1 - 40) * 0.1;
}

if (ball.y > p2 && ball.y < p2 + 80 && ball.speedX > 0) {
ball.speedX = -ball.speedX;
ball.speedY = (ball.y - p2 - 40) * 0.1;
}
}

if (ball.y < 0 || ball.y > 470) {
ball.speedY = -ball.speedY;
}

if (ball.x < 0 || ball.x > 720) {
ball = {
x: 360,
y: 240,
speedX: ball.speedX < 0 ? 3 : -3,
speedY: 0
};
}
}
</script>

[MartineSchmidt]

Vielen Dank für das Video: richtig motivieren für Anfänger. Mir haben noch gefehlt:
Die Erklärung der Syntax, d. h.:
- was bedeuten "Komma", "die Klammer oder die Klammer" usw.?
- warum lässt man manchmal "Leerzeichen" und manchmal nicht?
Für einen Programmierer ist Javascript super einfach, für einen Novizen ist es eine völlig neue Kultur, die hier zu oft als selbstverständlich angenommen wird.
- Zur bildlichen Darstellung von der Position des Elements hätte ich gern grafische Beispiele: Niveau "Anfänger"!
- Zur bildlichen Darstellung von der Syntax hätte ich gerne Beispiele zum Vergleich von einem "Text" zum andere im Programm selbst.

[Schwarzspitzenriffhai]

0:17 Wir brauchen kein html und kein CSS. Wir schreiben das nur mit JavaScript.
1:35 Wir erstellen eine Datei index.html
🤣
Aber mal Spaß beiseite:
Danke für das Video es hat wieder sehr gut geholfen

[taresaki]

hatte Interesse als Programmierer, jetzt habe ich keine mehr. Danke fürs Video konnte immerhin feststellen das programmieren nix für mich ist.

[Nitrode]

Das ist das erste mal, dass ich eins deiner Videos geschaut, bzw. Reingezapped habe, rein aus Neugier um zu sehen wie du die Sache des beibringen angehst.
Ich muss sagen, dass ich positiv überrascht bin und mir vorstellen kann, dass das absoluten Neuligen durchaus helfen kann.
Trotzdem möchte ich eine Kleinigkeit anmerken oder auch nachfragen, vielleicht ist das aber auch out of scope.

Mich würde interessieren wieso du keyCode verwendest (ist ja schon eine Weile deprecated)?

Viele Grüße
ein Kollege.

[LegtBombe]

Hallo ich habe ein Problem wenn ich mein Programm starte wird mir nur ein weißes Bild angezeigt kann wer mir weiter helfen

[LofiCoding]

Junus, wenn du dein VS Code noch verschönern möchtest, verwende das Material Icon und das One Dark Pro Theme. Diese Extensions helfen sehr dabei, den Quellcode zu verschönern.

[ExploitsHUB]

Ab welchem Alter darf man bei euch zum Kurs beitreten wäre sehr interessiert bin 16 Jahre alt. L.G.

[bskucgf]

vielen dank für das video, sollten wir den komplexen teil am ende auch noch hinzufügen? oder wie war das gewollt?

[LasercraftHD_]

das funktionirt bei mir nich mach ich was falsch ?

[moaZa]

also kann ich JS für solche sachen verwenden ohne erstmal html und css zu lernen? danke

[Ludoo]

Darf man fragen, warum du jetzt plötzlich vscode in der Browser Variante benutzt?

[alexjoe]

Programm hat einen Fehler. Wenn p1 den Ball zurückspielen soll kann es vorkommen das p2 sich auf der selben Höhe wie p1 befindet und dann könne sich beide Bedingungen erfüllen.

if (ball.y > (p1-10) && ball.y < (p1 + 80) && ball.speedX < 0){

....
}

if(ball.y >(p2-10) && ball.y < (p2 + 80) && ball.speedX>0){
....
}
Ich habe hier das 2. if durch ein else if ersetz

if (ball.y > (p1-10) && ball.y < (p1 + 80) && ball.speedX < 0){

ball.speedX = -ball.speedX;
ball.speedY = (ball.y - p1 -40)*0.1;
}
else if(ball.y >(p2-10) && ball.y < (p2 + 80) && ball.speedX>0){
ball.speedX = -ball.speedX;
ball.speedY = (ball.y - p2 -40)*0.1;
}

[Thailanderleben]

Hi, Junus woher weist du welche Taste, welche Nummer hat? Es gibt ja Tastaturen mit und Ohne Nummernblock.

[countdestroyer]

ich brauche Hilfe

mein code den ich geschrieben habe ist komplett richtig geschrieben ich habe ihn mehrmals mit dem code in der Videobeschreibung verglichen und das spiel bzw. p1 nimmt den ball nicht an also er prallt ihn nicht ab was soll ich machen ?

[abcezwzsd]

Moin, ich hätte eine frage und zwar bin ich dem ganzen video gefolgt und habe auch alles richtig abgetippt jedoch fliegt der ball bei dem linken spieler einfach durch. habe auch zum test einfach den fertigen script kopiert und trotzdem fliegt er beim linken spieler durch, beim rechten prallt der ball aber ab.

[Pro_Street_Pyro]

Hallo, Ich ein newbee und habe keine Ahnung warum mir dieses nicht angezeigt wird.

<canvas>
id="ca"
width="720"
height="480"
style="background-color: black;"
</canvas>
<script>
let ctx = ca.getContext('2d');
draw();
function draw(){
ctx.fillStyle = 'white';
ctx.fillRect(10, 200, 10, 80);
ctx.fillRect(700, 200, 10, 80);
ctx.fillRect(360, 240, 10, 80);
}
</script>