Hallo,
Pong - Spiele gibt es ja wie Sand am Meer, anhand verschiedener Beispiele habe ich ein Programm zur Tastatursteuerung immer weiter aufgebohrt, aber ich kann die Kollisionsabfrage nicht auf mein Beispiel übertragen:
HTML
<html>
<head>
<title>Tastatureingabe</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="512" height="256"></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var breite = canvas.width;
var hoehe = canvas.height;
var paddleheight = 255;
var paddlewidth = 20;
var paddley = (canvas.height-paddleheight)/2;
var rechteck = function(a, b)
{
ctx.beginPath();
ctx.rect(a, b, paddlewidth, paddleheight);
ctx.fill();
ctx.closePath();
}
var kreis = function (x, y, radius)
{
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.fill();
};
var paddle = function ()
{
this.a = canvas.width-15;
this.b = (hoehe-paddleheight) / 2;
this.aGeschwindigkeit = 0;
this.bGeschwindigkeit = 0;
};
var Ball = function ()
{
this.x = breite / 2;
this.y = hoehe / 2;
this.xGeschwindigkeit = 5;
this.yGeschwindigkeit = 0;
};
paddle.prototype.move = function ()
{
this.a += this.aGeschwindigkeit;
this.b += this.bGeschwindigkeit;
}
Ball.prototype.move = function ()
{
this.x += this.xGeschwindigkeit;
this.y += this.yGeschwindigkeit;
if (this.x < 0)
{
this.xGeschwindigkeit = -this.xGeschwindigkeit;
}
else if (this.y < 0)
{
this.yGeschwindigkeit = -this.yGeschwindigkeit;
}
else if (this.y > hoehe)
{
this.yGeschwindigkeit = -this.yGeschwindigkeit;
}
};
paddle.prototype.draw = function ()
{
rechteck(this.a, this.b);
};
Ball.prototype.draw = function ()
{
kreis(this.x, this.y, 10);
};
paddle.prototype.setDirection = function (richtung)
{
if (richtung === "hoch")
{
this.aGeschwindigkeit = 0;
this.bGeschwindigkeit = -5;
}
else if (richtung === "runter")
{
this.aGeschwindigkeit = 0;
this.bGeschwindigkeit = 5;
}
else if (richtung === "stopp")
{
this.aGeschwindigkeit = 0;
this.bGeschwindigkeit = 0;
}
};
var pad = new paddle();
var ball = new Ball();
var keyActions =
{
32: "stopp",
38: "hoch",
40: "runter"
};
$("body").keydown(function (event)
{
var richtung = keyActions[event.keyCode];
pad.setDirection(richtung);
});
setInterval(function ()
{
ctx.clearRect(0, 0, breite, hoehe);
ball.draw();
ball.move();
pad.draw();
pad.move();
if (this.y = paddley + ((paddle.height/2)) && this.y >= (paddley - (paddle.height/2)) && this.x === this.a)
{
this.xGeschwindigkeit = -this.xGeschwindigkeit;
}
ctx.strokeRect(0, 0, breite, hoehe);
ctx.fillRect(this.breite/2, 0, 2, this.hoehe);
}, 30);
</script>
</body>
</html>Ich weiß auch nicht, ob die Kollisionserkennung in den Bereich setintervalfunction oder in Ball.prototype.move gehört...
Gruß
Ralf