Wir wollen, dass das Spiel eine Herausforderung ist. Im Moment bewegt sich der Ball auf sehr vorhersehbare Weise geradlinig von links nach rechts. Als erstes fügen wir einige Programmzeilen hinzu, die die momentane Geschwindigkeit des Balls nachhalten. Dann können wir die Geschwindigkeit der waagrechten und senkrechten Bewegung des Balls ändern. Wir müssen auch verhindern, dass der Ball zu schnell wird. Dazu definieren wir neue Funktionen, die wir aber erst im nächsten Schritt aufrufen werden. Deshalb siehst du jetzt noch keine Veränderung im Verhalten des Spiels.
<!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: 3, xSpeed:2, ySpeed: 0,
xUmkehren: function() {
this.xSpeed *= -1;
},
yUmkehren: function() {
this.ySpeed *= -1;
},
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;
var kollidiertMitSpieler = spieler.istKollidiertMit(ball)
var kollidiertMitKi = ki.istKollidiertMit(ball)
if(kollidiertMitSpieler || kollidiertMitKi) {
ball.xUmkehren();
}
for(var tastencode in gedrückt) {
spieler.gehe(tastencode);
}
}
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 = "white";
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 = "white";
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.