Wir programmieren eine einfache KI, die den rechten Schläger so positioniert, dass seine Mitte die gleiche y-Koordinate hat wie der Ball. Weil die Schläger sich mit einer festen Geschwindigkeit bewegen, der Ball aber schneller wird, ist der Computer nicht immer in der Lage, den Ball zu treffen. Setze den Programmtext der KI an das Ende der Funktion aktualisiereSpiel. Verwende für die KI eine einfache Berechnung und eine if-Anweisung.
<!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;
},
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 = "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.