herrsander
New member
Hallo,
Pong - Spiele gibt es ja wie Sand am Meer, aber ich kann die Kollisionsabfragen nicht auf mein Beispiel übertragen:
Ich wollte jetzt unter ball.prototype.move die Kollisionserkennung mit unterbringen:
Jetzt habe ich gar kein Spielfeld mehr und eine Fehlermeldung in dr neuen Zeile(invalid assignment left-hand size)
Ich vermute einen Formfehler.
Kann mir bitte jemand mit der Kollisionserkennung auf die Sprünge helfen, damit ich dieses Projekt beenden kann?
Gruß
Ralf
Pong - Spiele gibt es ja wie Sand am Meer, aber ich kann die Kollisionsabfragen 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 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();
ctx.strokeRect(0, 0, breite, hoehe);
ctx.fillRect(this.breite/2, 0, 2, this.hoehe);
}, 30);
</script>
</body>
</html>Ich wollte jetzt unter ball.prototype.move die Kollisionserkennung mit unterbringen:
HTML:
else if (this.y <= this.b + ((paddle.height/2)) && this.y >= (this.b - (paddle.height/2)) && this.x = this.a)
{
this.xGeschwindigkeit = -this.xGeschwindigkeit;
}Jetzt habe ich gar kein Spielfeld mehr und eine Fehlermeldung in dr neuen Zeile(invalid assignment left-hand size)
Ich vermute einen Formfehler.
Kann mir bitte jemand mit der Kollisionserkennung auf die Sprünge helfen, damit ich dieses Projekt beenden kann?
Gruß
Ralf
