Hier ist der komplette Quellcode für Tischtennis. Darin sind schon einige Anregungen zur Weiterentwicklung aus dem Buch umgesetzt.
Tischtennis ist ein Echtzeit-Sport-Spiel, bei dem es auf die Reaktionsfähigkeit des Spielers ankommt. Dieselbe Art der Steuerung – mit Pfeiltasten nach oben, unten, rechts und links – kann auch für andere Spiele verwendet werden, z. B. Space Invaders, Asteroids und andere Action-Spiele.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Tischtennis</title>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function Schläger (x, y, breite, höhe) {
this.x = x;
this.y = y;
this.breite = breite;
this.höhe = höhe;
this.speedModifizierer = 0;
this.istKollidiertMit = function(ball) {
var linkeKante = this.x;
var rechteKante = this.x + this.breite;
var oberkante = this.y;
var unterkante = this.y + this.höhe;
if(ball.x > linkeKante
&& ball.x < rechteKante
&& ball.y > oberkante
&& ball.y < unterkante) {
return true;
}
return false;
};
this.gehe = function(tastencode) {
var yNeu = this.y;
if(tastencode == 40) {
yNeu += 5;
this.speedModifizierer = 1.5;
} else if(tastencode == 38) {
yNeu += -5;
this.speedModifizierer = 1.5;
} else {
this.speedModifizierer = 0;
}
yNeu = yNeu < 0 ? 0 : yNeu;
yNeu = yNeu + this.höhe > 480 ? 480 - this.höhe : yNeu;
this.y = yNeu;
};
}
var spieler = new Schläger(5, 200, 25, 100);
var ki = new Schläger(610, 200, 25, 100);
var ball = {
x:320, y: 240, radius: 7, xSpeed:2, ySpeed: 0,
xUmkehren: function() {
this.xSpeed *= -1;
},
yUmkehren: function() {
this.ySpeed *= -1;
},
reset: function() {
this.x = 320;
this.y = 240;
this.xSpeed = 2;
this.ySpeed = 0;
},
pralltAb: function() {
return ball.ySpeed != 0;
},
ändereXSpeedUm: function(änderung) {
änderung = this.xSpeed < 0 ? änderung * -1 : änderung;
var nächsterWert = this.xSpeed + änderung;
nächsterWert = Math.abs(nächsterWert) > 9 ? 9 : nächsterWert;
this.xSpeed = nächsterWert;
},
ändereYSpeedUm: function(änderung) {
änderung = this.ySpeed < 0 ? änderung * -1 : änderung;
this.ySpeed += änderung;
}
};
function tick() {
aktualisiereSpiel();
zeichne();
window.setTimeout("tick()", 1000/60);
}
function aktualisiereSpiel() {
ball.x += ball.xSpeed;
ball.y += ball.ySpeed;
if(ball.x < 0 || ball.x > 640) {
ball.reset();
}
if(ball.y <= 0 || ball.y >= 480) {
ball.yUmkehren();
}
var kollidiertMitSpieler = spieler.istKollidiertMit(ball)
var kollidiertMitKi = ki.istKollidiertMit(ball)
if(kollidiertMitSpieler || kollidiertMitKi) {
ball.xUmkehren();
ball.ändereXSpeedUm(0.25);
var beschleunigung = kollidiertMitSpieler ?
spieler.speedModifizierer : ki.speedModifizierer;
ball.ändereYSpeedUm(beschleunigung);
}
for(var tastencode in gedrückt) {
spieler.gehe(tastencode);
}
var kiMitte = ki.y + (ki.höhe / 2);
if(kiMitte < ball.y) {
ki.gehe(40);
}
if(kiMitte > ball.y) {
ki.gehe(38);
}
}
function zeichne() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 640, 480);
zeichneSchläger(spieler);
zeichneSchläger(ki);
zeichneBall(ball);
}
function zeichneSchläger(schläger) {
ctx.fillStyle = "blue";
ctx.fillRect(schläger.x, schläger.y, schläger.breite, schläger.höhe);
}
function zeichneBall(ball) {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = "pink";
ctx.fill();
}
var gedrückt = {};
window.addEventListener("keydown",
function(keyInfo) { gedrückt[event.keyCode] = true; }, false);
window.addEventListener("keyup",
function(keyInfo) { delete gedrückt[event.keyCode]; }, false);
tick();
</script>
</body>
</html>
Illustrations © Duncan Beedie
All rights reserved.