Beiträge von herrsander

herrsander · 10. Juni 2016

Hallo und schon mal Danke.
Für so eine ausführliche Lösung brauche ich ein, zwei Tage Zeit, um sie umzusetzen.
Ich melde mich dann wieder.
Gruß
Ralf

herrsander · 10. Juni 2016

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>

Alles anzeigen

Ich weiß auch nicht, ob die Kollisionserkennung in den Bereich setintervalfunction oder in Ball.prototype.move gehört...

Gruß
Ralf

Beiträge von herrsander

Bekomme Kollisionserkennung im Pong - Spiel nicht hin

Bekomme Kollisionserkennung im Pong - Spiel nicht hin