Rufe nun die neuen Funktionen, die den Ball schneller machen, an den richtigen Stellen im Programm auf. Außerdem sorgst du dafür, dass das Spiel auf den Anfangszustand zurückgesetzt wird, wenn der Spieler den Ball verfehlt.
<!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;
var beschleunigung = kollidiertMitSpieler ?
spieler.speedModifizierer : ki.speedModifizierer;
ball.ändereYSpeedUm(beschleunigung);
}
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.